<form class="flex flex-col gap-4" action="{% url 'terminusgps_notifications:login' %}" method="post">
    {% csrf_token %}
    <section class="flex flex-col gap-2">
        {{ form.username }}
        <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.username.id_for_label }}">Username</label>
        <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.username.id_for_label }}_helptext">{{ form.username.help_text }}</p>
        {% if form.username.errors %}<div class="animate-jiggle font-italic">{{ form.username.errors }}</div>{% endif %}
    </section>
    <section class="flex flex-col gap-2">
        {{ form.password }}
        <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.password.id_for_label }}">Password</label>
        <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.password.id_for_label }}_helptext">{{ form.password.help_text }}</p>
        {% if form.password.errors %}<div class="animate-jiggle font-italic">{{ form.password.errors }}</div>{% endif %}
    </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">Login</button>
    <p class="text-center">Don't have an account? Click <a href="{% url 'terminusgps_notifications:register' %}" hx-boost="true" hx-inherit="false" class="w-fit decoration text-terminus-red-200 underline decoration-terminus-black underline-offset-4 hover:text-terminus-red-100 hover:decoration-dotted dark:decoration-white">here</a> to register.</p>
</form>
