{% extends 'base.html' %}

{% block content %}

<div class="flex flex-grow flex-col bg-white sm:rounded shadow overflow-hidden">

    <div class="flex items-center justify-between pt-2 pb-2">
        <div class="flex">
            <h2 class="ml-2 text-xl font-bold leading-none">Notes</h2>
            <span
                class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-1 sm:ml-5 flex justify-center items-center ">{{person_name}}</span>
        </div>

        <div class="mr-4">
            <select name="view" hx-get="{{ url_for('calendar.get_calendar', person_id=person_id) }}"
                hx-target="#container" x-push-url="true" _="init js(me) tail.select(me, {}) end" class="h-10 invisible">
                <option value="month">Month</option>
                <option value="year">Year</option>
                <option value="notes" selected>Notes</option>
                <option value="overview">Overview</option>
            </select>
        </div>
    </div>

    <div class="hidden" hx-get="{{ url_for('get_people_graphs') }}" hx-vals='{"person_id": "{{ person_id }}"}'
        hx-trigger="load" hx-target="this" hx-swap="outerHTML">
    </div>


    {% if workout_notes %}
    <div class="relative w-full overflow-auto">
        <table class="w-full caption-bottom text-sm">
            <thead class="[&amp;_tr]:border-b">
                <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
                    <th
                        class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0">
                        Date
                    </th>
                    <th
                        class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0">
                        Note
                    </th>
                    <th
                        class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0">
                        Tags
                    </th>
                </tr>
            </thead>
            <tbody class="[&amp;_tr:last-child]:border-0">
                {% for workout_note in workout_notes %}
                <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
                    <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0 cursor-pointer"
                        hx-get="{{ url_for('workout.show_workout', person_id=person_id, workout_id=workout_note.workout_id) }}"
                        hx-push-url="true" hx-target="#container">
                        <div class="flex flex-row items-center justify-center">
                            <button
                                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium h-10 px-2 py-1 bg-transparent text-black rounded hidden md:block"
                                type="button">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                                </svg>

                            </button>
                            <div class="font-semibold">
                                {{ workout_note.formatted_start_date
                                }}
                            </div>
                        </div>
                    </td>
                    <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">
                        {{ render_partial('partials/workout_note.html', person_id=person_id,
                        workout_id=workout_note.workout_id,
                        note=workout_note.note) }}
                    </td>
                    <td class="p-4 align-middle [&amp;:has([role=checkbox])]:pr-0">
                        {{ render_partial('partials/workout_tags_list.html', workout_tags=workout_note.tags) }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}

</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 %}

{% block add_workout_button %}
<button
    class="fixed z-90 bottom-10 right-8 bg-blue-600 w-20 h-20 rounded-full drop-shadow-lg flex justify-center items-center text-white text-4xl hover:bg-blue-700 hover:drop-shadow-2xl hover:animate-bounce duration-300"
    hx-post="{{ url_for('workout.create_workout', person_id=person_id) }}" hx-push-url="true" hx-target="#container">
    <svg viewBox="0 0 20 20" enable-background="new 0 0 20 20" class="w-6 h-6 inline-block">
        <path fill="#FFFFFF" d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
                                C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
                                C15.952,9,16,9.447,16,10z" />
    </svg>
</button>

{% endblock %}