<form class="flex flex-col gap-4 p-4" id="create-message-package-form" hx-post="{% url 'terminusgps_notifications:create packages' %}" hx-target="this" hx-swap="outerHTML">
    {{ form.errors }}
    {% csrf_token %}
    <section class="flex flex-col gap-2">
        {{ form.count }}
        <label class="order-first font-semibold peer-user-invalid:text-red-600" for="{{ form.count.id_for_label }}">Messages Count</label>
        <p class="text-sm peer-user-invalid:text-red-800" id="{{ form.count.id_for_label }}_helptext">{{ form.count.help_text }}</p>
        {% if form.count.errors %}<div class="animate-jiggle font-italic">{{ form.count.errors }}</div>{% endif %}
    </section>
    <section class="flex flex-col gap-2">
        {{ form.payment }}
        <label class="order-first font-semibold peer-user-invalid:text-red-600" for="{{ form.payment.id_for_label }}">Payment Method</label>
        <p class="text-sm peer-user-invalid:text-red-800" id="{{ form.payment.id_for_label }}_helptext">{{ form.payment.help_text }}</p>
        {% if form.payment.errors %}<div class="animate-jiggle font-italic">{{ form.payment.errors }}</div>{% endif %}
    </section>
    <section id="id_price" class="flex gap-2">
        <p><span class="font-semibold">Due Today</span>: $</p>
        <svg id="price-indicator" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 animate-spin htmx-indicator">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
        </svg>
    </section>
    <section id="buttons" class="flex flex-col gap-2">
        <button 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" type="submit" hx-confirm="">Purchase</button>
        <button 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" type="button" hx-get="{% url 'terminusgps_notifications:list packages' %}">Back</button>
    </section>
</form>
