<form class="flex flex-col gap-4" action="{% url 'terminusgps_notifications:register' %}" method="post">
    {% csrf_token %}
    <section class="flex gap-2 justify-between">
        <section class="flex flex-col gap-2 w-full">
            {{ form.first_name }}
            <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.first_name.id_for_label }}">{{ form.first_name.label }}</label>
            <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.first_name.id_for_label }}_helptext">{{ form.first_name.help_text }}</p>
            {% if form.first_name.errors %}<div class="animate-jiggle font-italic">{{ form.first_name.errors }}</div>{% endif %}
        </section>
        <section class="flex flex-col gap-2 w-full">
            {{ form.last_name }}
            <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.last_name.id_for_label }}">{{ form.last_name.label }}</label>
            <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.last_name.id_for_label }}_helptext">{{ form.last_name.help_text }}</p>
            {% if form.last_name.errors %}<div class="animate-jiggle font-italic">{{ form.last_name.errors }}</div>{% endif %}
        </section>
    </section>
    <section class="flex flex-col gap-2">
        {{ form.company_name }}
        <label class="order-first peer-user-invalid:text-red-800" for="{{ form.company_name.id_for_label }}">{{ form.company_name.label }}</label>
        <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.company_name.id_for_label }}_helptext">{{ form.company_name.help_text|safe }}</p>
        {% if form.company_name.errors %}<div class="animate-jiggle font-italic">{{ form.company_name.errors }}</div>{% endif %}
    </section>
    <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 }}">Email Address</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.password1 }}
        <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.password1.id_for_label }}">Password</label>
        <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.password1.id_for_label }}_helptext">{{ form.password1.help_text }}</p>
        {% if form.password1.errors %}<div class="animate-jiggle font-italic">{{ form.password1.errors }}</div>{% endif %}
    </section>
    <section class="flex flex-col gap-2">
        {{ form.password2 }}
        <label class="order-first font-semibold peer-user-invalid:text-red-800" for="{{ form.password2.id_for_label }}">Repeat Password</label>
        <p class="text-sm peer-user-invalid:text-red-600" id="{{ form.password2.id_for_label }}_helptext">{{ form.password2.help_text }}</p>
        {% if form.password2.errors %}<div class="animate-jiggle font-italic">{{ form.password2.errors }}</div>{% endif %}
    </section>
    {% for hidden in form.hidden_fields %}
    {{ hidden }}
    {% endfor %}
    <div class="flex flex-col gap-4">
        <section class="flex gap-2 items-center">
            {{ form.consent }}
            <label class="peer-user-invalid:text-red-800" for="{{ form.consent.id_for_label }}">By checking this box, you agree to our <a href="{% url 'terminusgps_notifications:terms' %}" 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">terms of use</a> and <a href="{% url 'terminusgps_notifications:privacy' %}" 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">privacy policy</a>.</label>
            {% if form.consent.errors %}<div class="animate-jiggle font-italic">{{ form.consent.errors }}</div>{% endif %}
        </section>
        <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">Register</button>
        <p class="text-center">Already have an account? Click <a href="{% url 'terminusgps_notifications:login' %}" 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 login.</p>
    </div>
</form>
