{% extends 'base.html' %}
{% block content %}

<div class="workout-workspace">
    <nav class="flex  md:pb-0 pb-4" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
        <li class="inline-flex items-center">
            <a hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container"
                class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white cursor-pointer">
                <svg class="w-3 h-3 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                    viewBox="0 0 20 20">
                    <path
                        d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
                </svg>
                Home
            </a>
        </li>
        <li>
            <div class="flex items-center">
                <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="m1 9 4-4-4-4" />
                </svg>

                <a hx-get="{{ url_for('calendar.get_calendar', person_id=person_id) }}"
                    hx-push-url="true" hx-target="#container"
                    class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white cursor-pointer">{{person_name}}</a>
            </div>
        </li>
        <li aria-current="page">
            <div class="flex items-center">
                <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="m1 9 4-4-4-4" />
                </svg>
                <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">Workout</span>
            </div>
        </li>
    </ol>
</nav>
    <header class="workout-header">
        <div>
            <p class="workout-eyebrow">Training log</p>
            <h1>{{ person_name }}<span> / Workout</span></h1>
            {{ render_partial('partials/start_date.html', person_id=person_id, workout_id=workout_id, start_date=start_date) }}
        </div>
        <button type="button" class="workout-button workout-delete"
            hx-get="{{ url_for('workout.delete_workout', person_id=person_id, workout_id=workout_id) }}"
            hx-confirm="Are you sure you wish to delete this workout?" hx-push-url="true" hx-target="#container">Delete workout</button>
    </header>

    <div class="workout-layout">
        <div class="workout-main">
            <section class="workout-card workout-logger" aria-labelledby="log-heading">
                <div class="workout-section-heading">
                    <div><p class="workout-eyebrow">Log your training</p><h2 id="log-heading">Add a top set</h2></div>
                    <span class="workout-subtle">Reps &times; weight</span>
                </div>
                {{ render_partial('partials/new_set_form.html', person_id=person_id, workout_id=workout_id, exercises=exercises, has_value=False) }}
            </section>

            <section class="workout-card workout-results" aria-labelledby="sets-heading">
                <div class="workout-section-heading">
                    <div><h2 id="sets-heading">Session exercises</h2><p class="workout-subtle">Your top sets, records and progress.</p></div>
                </div>
                <table class="workout-table">
                    <thead><tr><th scope="col">Exercise</th><th scope="col">Top set</th><th scope="col"><span class="sr-only">Actions</span></th></tr></thead>
                    <tbody id="new-workout" hx-target="closest tr" hx-swap="outerHTML swap:0.5s">
                        {% for top_set in top_sets %}
                        {{ render_partial('partials/topset.html', person_id=person_id, workout_id=workout_id, **top_set) }}
                        {% endfor %}
                    </tbody>
                </table>
                <div class="workout-empty" id="no-workouts"><strong>Your session starts here</strong><p>Add your first top set above. Progress and records will appear here.</p></div>
                <div id="exercise-progress"></div>
            </section>
        </div>

        <aside class="workout-sidebar" aria-label="Session information">
            {{ render_partial('partials/workout_summary.html', person_id=person_id, workout_id=workout_id, top_sets=top_sets) }}
            <details class="workout-card workout-disclosure" open>
                <summary>Training balance <span class="workout-subtle">Muscles & equipment</span></summary>
                <div class="workout-disclosure-body">
                    {{ render_partial('partials/workout_breakdown.html', person_id=person_id, workout_id=workout_id, distribution=muscle_distribution, category_name='Muscle Group') }}
                    <details class="workout-secondary-details">
                        <summary>Equipment & movement</summary>
                        {{ render_partial('partials/workout_breakdown.html', person_id=person_id, workout_id=workout_id, distribution=equipment_distribution, category_name='Machine vs Free Weight') }}
                        {{ render_partial('partials/workout_breakdown.html', person_id=person_id, workout_id=workout_id, distribution=movement_distribution, category_name='Compound vs Isolation') }}
                    </details>
                </div>
            </details>
            {{ render_partial('partials/session_note.html', person_id=person_id, workout_id=workout_id, note=note or '') }}
            {{ render_partial('partials/workout_tags.html', person_id=person_id, workout_id=workout_id, tags=tags) }}
        </aside>
    </div>
</div>
<div class="hidden" hx-get="{{ url_for('get_stats') }}" hx-vals='{"person_id": "{{ person_id }}"}' hx-trigger="load" hx-target="#stats" hx-swap="innerHTML"></div>

{% endblock %}