{% extends 'base.html' %}

{% block content %}

<div class="flex flex-grow flex-col bg-white sm:rounded shadow overflow-hidden animate-fadeIn">
    <div class="flex items-center justify-between pt-2 pb-2">
        <div class="flex">
            <div class="flex ml-1 md:ml-6">
                <button hx-get="{{ url_for('calendar.get_calendar', person_id=person_id) }}" hx-target="#container"
                    hx-vals='{"date": "{{ prev_date }}"}' hx-include="[name='view']" hx-push-url="true"
                    hx-swap="innerHTML swap:0.5s">
                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor" data-darkreader-inline-stroke=""
                        style="--darkreader-inline-stroke:currentColor;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
                        </path>
                    </svg>
                </button>
                <button hx-get="{{ url_for('calendar.get_calendar', person_id=person_id) }}" hx-target="#container"
                    hx-vals='{"date": "{{ next_date }}"}' hx-include="[name='view']" hx-push-url="true"
                    hx-swap="innerHTML swap:0.5s">
                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor" data-darkreader-inline-stroke=""
                        style="--darkreader-inline-stroke:currentColor;">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
                        </path>
                    </svg>
                </button>
            </div>

            {% if view == 'month' %}
            <h2 class="ml-2 text-xl font-bold leading-none">{{ date | strftime('%B, %Y') }}</h2>
            {% else %}
            <h2 class="ml-2 text-xl font-bold leading-none">{{ date | strftime('%Y') }}</h2>
            {% endif %}
            <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" hx-vals='{"date": "{{ date }}"}' hx-push-url="true"
                _="init js(me) tail.select(me, {}) end" class="h-10 invisible">
                <option value="month" {% if view=='month' %}selected{% endif %}>Month</option>
                <option value="year" {% if view=='year' %}selected{% endif %}>Year</option>
                <option value="notes">Notes</option>
                <option value="overview">Overview</option>
            </select>
        </div>
    </div>

    {% if view == 'month' %}
    <div class="flex flex-col px-2 py-2 -mb-px">
        <div class="grid grid-cols-7 pl-2 pr-2">

            <div class="p-2 h-10 text-center font-bold">
                <span class="xl:block lg:block md:block sm:block hidden">Sunday</span>
                <span class="xl:hidden lg:hidden md:hidden sm:hidden block">Sun</span>
            </div>
            <div class="p-2 h-10 text-center font-bold">
                <span class="xl:block lg:block md:block sm:block hidden">Monday</span>
                <span class="xl:hidden lg:hidden md:hidden sm:hidden block">Mon</span>
            </div>
            <div class="p-2 h-10 text-center font-bold">
                <span class="xl:block lg:block md:block sm:block hidden">Tuesday</span>
                <span class="xl:hidden lg:hidden md:hidden sm:hidden block">Tue</span>
            </div>
            <div class="p-2 h-10 text-center font-bold">
                <span class="xl:block lg:block md:block sm:block hidden">Wednesday</span>
                <span class="xl:hidden lg:hidden md:hidden sm:hidden block">Wed</span>
            </div>
            <div class="p-2 h-10 text-center font-bold">
                <span class="xl:block lg:block md:block sm:block hidden">Thursday</span>
                <span class="xl:hidden lg:hidden md:hidden sm:hidden block">Thu</span>
            </div>
            <div class="p-2 h-10 text-center font-bold">
                <span class="xl:block lg:block md:block sm:block hidden">Friday</span>
                <span class="xl:hidden lg:hidden md:hidden sm:hidden block">Fri</span>
            </div>
            <div class="p-2 h-10 text-center font-bold">
                <span class="xl:block lg:block md:block sm:block hidden">Saturday</span>
                <span class="xl:hidden lg:hidden md:hidden sm:hidden block">Sat</span>
            </div>
        </div>

        <div class="grid grid-cols-7 overflow-hidden flex-1 pl-2 pr-2 w-full">

            {% for day in days %}
            <div
                class="{% if day.is_today %}rounded-md border-4 border-green-50{% endif %} border flex flex-col h-36 sm:h-40 md:h-30 lg:h-30 mx-auto mx-auto overflow-hidden w-full pt-2 pl-1 cursor-pointer {% if day.is_in_current_month %}bg-gray-100{% endif %}">
                <div class="top h-5 w-full">
                    <span class="text-gray-500 font-semibold">{{ day.day }}</span>
                </div>
                {% for workout in day.workouts %}
                <div class="bottom flex-grow py-1 w-full"
                    hx-get="{{ url_for('show_workout', person_id=person_id, workout_id=workout.workout_id) }}"
                    hx-push-url="true" hx-target="#container">
                    {% for set in workout.sets %}
                    <button
                        class="flex flex-col xl:flex-row items-start lg:items-center flex-shrink-0 px-0 sm:px-0.5 md:px-0.5 lg:px-0.5 text-xs">
                        <span class="ml-0 sm:ml-0.5 md:ml-2 lg:ml-2 font-medium leading-none truncate">{{
                            set.exercise_name }}</span>
                        <span class="ml-0 sm:ml-0.5 md:ml-2 lg:ml-2 font-light leading-none">{{ set.repetitions }} x {{
                            set.weight }}kg</span>
                    </button>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
            {% endfor %}

        </div>
    </div>
    {% elif view == 'year'%}
    <div class="flex justify-center px-2 py-2 -mb-px">

        <div
            class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4 lg:gap-10 bg-white overflow-hidden">
            {% for month in months %}
            <div>
                <div class="bg-grey-lighter font-semibold text-center cursor-pointer"
                    hx-get="{{ url_for('calendar.get_calendar', person_id=person_id) }}" hx-target="#container"
                    hx-vals='{"date": "{{ month.first_day_of_month }}", "view": "month"}' hx-push-url="true"
                    _="on click go to the top of the body">
                    {{ month.first_day_of_month | strftime('%B') }}
                </div>
                <div>
                    <div class="grid grid-cols-7 border-b font-semibold">
                        <div class="py-3 px-4">S</div>
                        <div class="py-3 px-4">M</div>
                        <div class="py-3 px-4">T</div>
                        <div class="py-3 px-4">W</div>
                        <div class="py-3 px-4">T</div>
                        <div class="py-3 px-4">F</div>
                        <div class="py-3 px-4">S</div>
                    </div>

                    <div class="grid grid-cols-7 overflow-hidden flex-1 pl-2 pr-2 w-full">
                        {% for day in month.days %}
                        <div class="{% if day.is_today and day.is_in_current_month %}rounded-md border-4 border-green-50 border{% endif %} py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer rounded-md {% if day.has_workouts and day.is_in_current_month %}bg-green-100{% endif %}"
                            {% if day.has_workouts %}
                            hx-get="{{ url_for('show_workout', person_id=person_id, workout_id=day.first_workout_id) }}"
                            hx-push-url="true" hx-target="#container" {% endif %}>
                            {% if day.is_in_current_month %}
                            {{ day.day }}
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endfor %}

        </div>
    </div>
    {% endif %}
</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>

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