{% extends 'base.html' %}

{% block title %}Tasks{% endblock %}

{% block content %}
<!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1">
    <h1 class="page-title">Tasks</h1>
    <div class="sm:flex sm:flex-row-reverse justify-center">
        <aside class="sm:w-2/5 sm:max-w-xs sm:pl-4 lg:pl-8 my-8 sm:my-0">
            <div class="z-10 fixed sm:sticky top-0 sm:top-4 lg:top-8 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center"
                x-show="showModal || $screen('sm')"
                x-transition:enter="transition duration-300 ease-out"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition duration-150 ease-in"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
            >
                <div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 rounded bg-white dark:bg-gray-800 sm:shadow-lg sm:dark:border-2 sm:dark:border-gray-700"
                    @click.outside="showModal = ! showModal"
                    x-show="showModal || $screen('sm')"
                    x-transition:enter="transition transform ease-out duration-300"
                    x-transition:enter-start="scale-110 opacity-0"
                    x-transition:enter-end="scale-100 opacity-100"
                    x-transition:leave="transition transform ease-in duration-150"
                    x-transition:leave-start="scale-100 opacity-100"
                    x-transition:leave-end="scale-110 opacity-0"
                >
                    <div class="flex justify-between items-center mb-2">
                        <h2 class="text-gray-800 dark:text-gray-100 sm:section-title sm:section-title-margins sm:w-full">
                            <span class="mr-1 text-gray-400 sm:hidden">
                                <i class="fas fa-filter"></i>
                            </span>
                            Auswahl einschränken
                        </h2>
                        <div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="showModal = false">
                            <i class="far fa-times"></i>
                        </div>
                    </div>
                    <form action="" method="GET" class="grid grid-cols-1 gap-2 sm:gap-4">
                        <label class="block">
                            <span class="text-gray-700 dark:text-gray-200">Task-Gruppe</span>
                            <select id="id_tasklist" name="tasklist" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
                                <option value="all" {% if not show_tasklist %}selected{% endif %}>alle Task-Gruppen</option>
                                {% for elem in tasklists %}
                                    <option value="{{ elem.id }}" {% if show_tasklist == elem.id %}selected{% endif %}>{{ elem.name }}</option>
                                {% endfor %}
                            </select>
                        </label>
                        <label>
                            <span class="text-gray-700 dark:text-gray-200">Tasks</span>
                            <select id="id_task" name="tasks" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
                                <option value="own" {% if not show_all_tasks %}selected{% endif %}>eigenen Tasks</option>
                                <option value="all" {% if show_all_tasks %}selected{% endif %}>alle Tasks</option>
                            </select>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="checkbox" name="open_tasks" {% if not completed %}checked{% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
                            <span class="ml-2 text-gray-700 dark:text-gray-200">Offene Tasks</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="checkbox" name="closed_tasks" {% if completed %}checked{% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
                            <span class="ml-2 text-gray-700 dark:text-gray-200">Geschlossene Tasks</span>
                        </label>
                        <input type="submit" class="block btn btn-primary" value="Anzeigen">
                    </form>
                </div>
            </div>
            <button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden" 
                @click="showModal = true"
                x-show="!showModal"
                x-transition:enter="transition duration-100 ease-in"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition duration-100 ease-out"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
            >
                <i class="fas fa-filter p-2"></i>
            </button>
        </aside>

        <section class="my-8 sm:my-0 sm:w-3/5 xl:w-2/5 flex flex-col gap-4 text-gray-700 dark:text-gray-200">
            {% if tasks %}
                <form action="" method="post">
                    {% csrf_token %}

                    {% regroup tasks by task_list as section_list %}
                    {% for group in section_list %}
                        <h3>{{ group.grouper }}</h3>

                        {% for task in group.list %}
                            <label class="flex justify-between items-start">
                                <div class="inline-flex items-baseline mr-2">
                                    <input type="checkbox" name="checkbox" value="{{ task.id }}" {% if task.completed %}checked{% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
                                    <span class="ml-2">{{ task.title }} <a href="{% url 'tasks:task-detail' task.id %}" class="inline-block text-proprietary dark:text-proprietary-lighter">Link <i class="fa-solid fa-link"></i></a></span>
                                </div>
                                {% if task.due_date %}
                                    <div class="inline-flex gap-2 flex-shrink-0">
                                        <span class="px-2 py-0.5 rounded-full text-sm font-medium text-proprietary dark:text-blue-100 bg-blue-200 dark:bg-proprietary-dark"><i class="fa-solid fa-hourglass mr-1"></i>{{ task.due_date|date:"d.m.Y" }}</span>
                                    </div>
                                {% endif %}
                            </label>
                        {% endfor %}
                    {% endfor %}

                    <div class="flex flex-col md:flex-row gap-y-2 md:gap-y-0 md:gap-x-2 lg:justify-end mt-4">
                        <input type="submit" name="btn_checkbox" value="Tasks abschließen" class="btn btn-error block md:flex-grow lg:flex-grow-0">

                        <a href="{% url 'tasks:task-create' %}" class="btn btn-primary block md:flex-grow lg:flex-grow-0"><i class="fas fa-plus-square mr-2"></i>Task hinzufügen</a>
                    </div>
                </form>
            {% else %}
                keine Tasks in dieser Liste für dich.

                <div class="flex flex-col md:flex-row gap-y-2 md:gap-y-0 md:gap-x-2 lg:justify-end mt-4">
                    <a href="{% url 'tasks:task-create' %}" class="btn btn-primary block md:flex-grow lg:flex-grow-0"><i class="fas fa-plus-square mr-2"></i>Task hinzufügen</a>
                </div>
        {% endif %}
        </section>
    </div>
</main>
{% endblock %}
