{% extends 'base.html' %}

{% block title %}{{ task.title }} bearbeiten{% endblock %}

{% block content %}
<!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1">
    <h1 class="page-title">Task '{{ task.title }}' bearbeiten</h1>
    <div class="w-full h-full flex-1 flex justify-center items-center">
        <form action="" method="POST" class="w-full max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
            {% csrf_token %}

            {% if form.non_field_errors %}
                <div class="alert alert-danger">
                    <i class="alert-icon fa-solid fa-check-circle"></i>
                    <h2 class="alert-title">Fehler:</h2>
                    <div class="alert-body">{{ form.non_field_errors }}</div>
                </div>
            {% endif %}

            <label>
                <span class="text-gray-700 dark:text-gray-200">{{ form.assigned_to.label }}</span>
                {% if form.assigned_to.errors %}
                    <div class="alert alert-danger">
                        <div class="alert-body">{{ form.assigned_to.errors }}</div>
                    </div>
                {% endif %}
                <select id="id_assigned_to" name="assigned_to" 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">
                    {% for elem in form.assigned_to %}
                        {% if forloop.first %}
                            <option value="">Alle</option>
                        {% else %}
                            {{ elem }}
                        {% endif %}
                    {% endfor %}
                </select>
            </label>

            <label>
                <span class="text-gray-700 dark:text-gray-200">{{ form.due_date.label }}</span>
                {% if form.due_date.errors %}
                    <div class="alert alert-danger">
                        <div class="alert-body">{{ form.due_date.errors }}</div>
                    </div>
                {% endif %}
                 <input type="date" id="id_due_date" name="due_date" value="{{ task.due_date|date:"Y-m-d" }}" 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">
            </label>

            <label>
                <span class="text-gray-700 dark:text-gray-200">{{ form.completed_date.label }}</span>
                {% if form.completed_date.errors %}
                    <div class="alert alert-danger">
                        <div class="alert-body">{{ form.completed_date.errors }}</div>
                    </div>
                {% endif %}
                 <input type="date" id="id_completed_date" name="completed_date" value="{{ task.completed_date|date:"Y-m-d" }}" 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">
            </label>

            <label>
                <input type="checkbox" id="id_completed" name="completed" 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="text-gray-700 dark:text-gray-200">{{ form.completed.label }}</span>
                {% if form.completed.errors %}
                    <div class="alert alert-danger">
                        <div class="alert-body">{{ form.completed.errors }}</div>
                    </div>
                {% endif %}
            </label>

            <label class="block">
                <span class="text-gray-700 dark:text-gray-200">{{ form.note.label }}</span>
                {% if form.note.errors %}
                    <div class="alert alert-danger">
                        <div class="alert-body">{{ form.note.errors }}</div>
                    </div>
                {% endif %}
                {{ form.media }}
                {{ form.note }}
            </label>

            <input type="hidden" name="task_list" value="{{ task.task_list.id }}" id="id_task_list">

            <div class="flex flex-col-reverse sm:flex-row gap-3 justify-end pt-4 sm:pt-0">
                <a href="{% url 'admin:tasks_task_change' task.id %}" class="block btn btn-secondary-proprietary">Task im Admin bearbeiten</a>
                <input type="submit" class="block btn btn-primary" value="Speichern">
            </div>
        </form>
    </div>
</main>
{% endblock %}