{% extends 'base.html' %}

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

{% block content %}
<!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1">
    <h1 class="page-title">Etherpad hinzufügen</h1>
    <div class="w-full h-full flex-1 flex justify-center items-center">
        <form action="" method="POST" enctype="multipart/form-data" 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 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.date.label }}</span>
                <input type="date" id="id_date" name="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" required>
            </label>

            <input type="hidden" name="attachment" value="{{ attachment.id }}" id="id_attachment">

            <input type="submit" class="block btn btn-primary" value="Hinzufügen">
        </form>
    </div>
</main>
{% endblock %}