{% extends 'base.html' %}

{% block content %}
<div class="flex justify-center">
    <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 md:w-full lg:w-10/12 xl:w-8/12 2xl:w-5/12">

        <div class="mb-4 flex items-center justify-between">
            <div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">{{ person['PersonName'] }}</h3>
                <span class="text-base font-normal text-gray-500">List of workouts</span>
            </div>
            <div>
                <form action="{{ url_for('create_workout', person_id=person['PersonId']) }}" method="post">
                    <button
                        class="sm:inline-flex text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center items-center mt-6">New
                        workout</button>
                </form>
            </div>
        </div>

        <div class="flex flex-col mt-8">
            <div class="overflow-x-auto rounded-lg">
                <div class="align-middle inline-block min-w-full">
                    <div class="shadow overflow-hidden sm:rounded-lg">

                        {% if person['Workouts']|length > 0 %}
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col"
                                        class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Date
                                    </th>
                                    {% for e in person['Exercises'] %}
                                    <th scope="col"
                                        class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        {{ e['ExerciseName'] }}
                                    </th>
                                    {% endfor %}
                                    <th scope="col"
                                        class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-8">
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white">

                                {% for w in person['Workouts'] %}
                                <tr>
                                    <td class="p-4 whitespace-nowrap text-sm font-normal text-gray-500">
                                        {{ w['StartDate'] }}
                                    </td>

                                    {% for e in person['Exercises'] %}
                                    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
                                        {% set topset_exercise =
                                        get_first_element_from_list_with_matching_attribute(w['TopSets'], 'ExerciseId',
                                        e['ExerciseId']) %}
                                        {% if topset_exercise %}
                                        {{ topset_exercise['Repetitions'] }} x {{ topset_exercise['Weight'] }}kg
                                        {% endif %}
                                    </td>
                                    {% endfor %}

                                    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
                                        <a href="{{ url_for('get_workout' ,person_id=person['PersonId'], workout_id=w['WorkoutId']) }}"
                                            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2">
                                            Edit
                                        </a>

                                        <form
                                            action="{{ url_for('delete_workout', person_id=person['PersonId'], workout_id=w['WorkoutId']) }}"
                                            method="delete" class="inline">
                                            <button
                                                class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2"
                                                type="submit">Delete</button>
                                        </form>
                                    </td>
                                </tr>
                                {% endfor %}

                            </tbody>
                        </table>
                        {% endif %}

                        {% if person['Workouts']|length == 0 %}
                        <div class="bg-purple-100 rounded-lg py-5 px-6 mb-4 text-base text-purple-700 mb-3"
                            role="alert">
                            No workouts found.
                        </div>
                        {% endif %}

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}