{% extends 'base.html' %}

{% block title %}Task hinzufügen{% endblock %}

{% block content %}
<!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1">
    <h1 class="page-title">Task hinzufügen</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 fas fa-check-circle"></i>
                    <h2 class="alert-title">Fehler:</h2>
                    <div class="alert-body">{{ form.non_field_errors }}</div>
                </div>
            {% endif %}

            <label class="block">
                <span class="text-gray-700 dark:text-gray-200">{{ form.title.label }}</span>
                {% if form.title.errors %}
                    <div class="alert alert-danger">
                        <div class="alert-body">{{ form.title.errors }}</div>
                    </div>
                {% endif %}
                <input type="text" id="id_title" name="title" class="mt-1 block w-full 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" required>
            </label>

            <label>
                <span class="text-gray-700 dark:text-gray-200">{{ form.task_list.label }}</span>
                {% if form.task_list.errors %}
                    <div class="alert alert-danger">
                        <div class="alert-body">{{ form.task_list.errors }}</div>
                    </div>
                {% endif %}
                <select id="id_task_list" name="task_list" 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" required>
                    {% for elem in form.task_list %}
                        {% if forloop.first %}
                            <option value="">---------</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" 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.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>
            
            <input type="submit" class="block btn btn-primary" value="Hinzufügen">
        </form>

        <a href="{% url 'admin:tasks_tasklist_add' %}" class="btn btn-primary block place-self-end"><i class="fas fa-pen-to-square mr-2"></i>Task-Gruppe erstellen</a>
    </div>
</main>
{% endblock %}
