<form class="flex flex-col gap-4" hx-post="{% url 'terminusgps_notifications:create notifications' %}" method="post">
    {% csrf_token %}
    <section class="flex flex-col gap-2">
        {{ form.method }}
        <label class="order-first font-semibold peer-user-invalid:text-red-600" for="{{ form.method.id_for_label }}">Notification Method</label>
        <p class="text-sm peer-user-invalid:text-red-800" id="{{ form.method.id_for_label }}_helptext">{{ form.method.help_text }}</p>
        {% if form.method.errors %}<div class="animate-jiggle font-italic">{{ form.method.errors }}</div>{% endif %}
    </section>
    <section class="flex flex-col gap-2">
        {{ form.name }}
        <label class="order-first font-semibold peer-user-invalid:text-red-600" for="{{ form.name.id_for_label }}">Notification Name</label>
        <p class="text-sm peer-user-invalid:text-red-800" id="{{ form.name.id_for_label }}_helptext">{{ form.name.help_text }}</p>
        {% if form.name.errors %}<div class="animate-jiggle font-italic">{{ form.name.errors }}</div>{% endif %}
    </section>
    <section class="flex flex-col gap-2">
        {{ form.message }}
        <label class="order-first font-semibold peer-user-invalid:text-red-600" for="{{ form.message.id_for_label }}">Notification Message</label>
        <p class="text-sm peer-user-invalid:text-red-800" id="{{ form.message.id_for_label }}_helptext">{{ form.message.help_text }}</p>
        {% if form.message.errors %}<div class="animate-jiggle font-italic">{{ form.message.errors }}</div>{% endif %}
        <div class="relative overflow-x-auto h-24">
            <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Tag
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Description
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for tag in message_tags %}
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            {{ tag.0 }}
                        </th>
                        <td class="px-6 py-4">
                            {{ tag.1 }}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
    <section id="advanced" aria-expanded="false" class="group bg-gray-300 p-2 border-2 rounded border-gray-600 dark:bg-gray-700 dark:border-gray-300">
        <section class="flex justify-between items-center p-2 select-none cursor-pointer" id="advanced-header" hx-target="#advanced-fields" hx-on:click="s=document.getElementById('advanced').getAttribute('aria-expanded');document.getElementById('advanced').setAttribute('aria-expanded', s === 'true' ? 'false' : 'true');">
            <h3 class="font-bold text-lg">Advanced Options</h3>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8 hidden group-aria-expanded:flex">
              <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8 flex group-aria-expanded:hidden">
              <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
            </svg>
        </section>
        <section id="advanced-fields" class="flex-col gap-4 p-2 hidden group-aria-expanded:flex">
            <section class="flex flex-col gap-2">
                {{ form.activation_time }}
                <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.activation_time.id_for_label }}">Activation Time:</label>
                <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.activation_time.help_text }}">{{ form.activation_time.help_text }}</p>
                {% if form.activation_time.errors %}<div class="animate-jiggle font-italic">{{ form.activation_time.errors }}</div>{% endif %}
            </section>
            <section class="flex flex-col gap-2">
                {{ form.deactivation_time }}
                <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.deactivation_time.id_for_label }}">Deactivation Time:</label>
                <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.deactivation_time.help_text }}">{{ form.deactivation_time.help_text }}</p>
                {% if form.deactivation_time.errors %}<div class="animate-jiggle font-italic">{{ form.deactivation_time.errors }}</div>{% endif %}
            </section>
            <section class="flex flex-col gap-2">
                {{ form.max_alarms }}
                <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.max_alarms.id_for_label }}">Max Alarms:</label>
                <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.max_alarms.help_text }}">{{ form.max_alarms.help_text }}</p>
                {% if form.max_alarms.errors %}<div class="animate-jiggle font-italic">{{ form.max_alarms.errors }}</div>{% endif %}
            </section>
            <section class="flex flex-col gap-2">
                {{ form.max_message_interval }}
                <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.max_message_interval.id_for_label }}">Max Message Interval:</label>
                <p class="text-sm peer-invalid:text-red-600" id="{{ form.max_message_interval.help_text }}">{{ form.max_message_interval.help_text }}</p>
                {% if form.max_message_interval.errors %}<div class="animate-jiggle font-italic">{{ form.max_message_interval.errors }}</div>{% endif %}
            </section>
            <section class="flex flex-col gap-2">
                {{ form.alarm_timeout }}
                <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.alarm_timeout.id_for_label }}">Alarm Timeout:</label>
                <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.alarm_timeout.help_text }}">{{ form.alarm_timeout.help_text }}</p>
                {% if form.alarm_timeout.errors %}<div class="animate-jiggle font-italic">{{ form.alarm_timeout.errors }}</div>{% endif %}
            </section>
            <section class="flex flex-col gap-2">
                {{ form.control_period }}
                <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.control_period.id_for_label }}">Control Period:</label>
                <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.control_period.help_text }}">{{ form.control_period.help_text }}</p>
                {% if form.control_period.errors %}<div class="animate-jiggle font-italic">{{ form.control_period.errors }}</div>{% endif %}
            </section>
            <section class="flex flex-col gap-2">
                {{ form.min_duration_alarm }}
                <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.min_duration_alarm.id_for_label }}">Minimum alarm duration (sec):</label>
                <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.min_duration_alarm.help_text }}">{{ form.min_duration_alarm.help_text }}</p>
                {% if form.min_duration_alarm.errors %}<div class="animate-jiggle font-italic">{{ form.min_duration_alarm.errors }}</div>{% endif %}
            </section>
            <section class="flex flex-col gap-2">
                {{ form.min_duration_prev }}
                <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.min_duration_prev.id_for_label }}">Minimum previous state duration (sec):</label>
                <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.min_duration_prev.help_text }}">{{ form.min_duration_prev.help_text }}</p>
                {% if form.min_duration_prev.errors %}<div class="animate-jiggle font-italic">{{ form.min_duration_prev.errors }}</div>{% endif %}
            </section>
            <section class="flex flex-col gap-2">
                {{ form.language }}
                <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.language.id_for_label }}">Language:</label>
                <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.language.help_text }}">{{ form.language.help_text }}</p>
                {% if form.language.errors %}<div class="animate-jiggle font-italic">{{ form.language.errors }}</div>{% endif %}
            </section>
            <section class="flex flex-col gap-2">
                {{ form.flags }}
                <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.flags.id_for_label }}">Flags:</label>
                <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.flags.help_text }}">{{ form.flags.help_text }}</p>
                {% if form.flags.errors %}<div class="animate-jiggle font-italic">{{ form.flags.errors }}</div>{% endif %}
            </section>
        </section>
    </section>
    {% for hidden in form.hidden_fields %}
    {{ hidden }}
    {% endfor %}
    <button type="submit" class="flex w-full cursor-pointer items-center justify-center gap-2 rounded border border-terminus-red-900 bg-terminus-red-800 p-2 text-center text-white transition-colors duration-300 ease-in-out hover:bg-terminus-red-400">Create Notification</button>
</form>
