<div class="flex flex-col gap-8">
    <div class="flex flex-col gap-2">
        <p>Terminus GPS Notifications Subscription: ${{ customer.subtotal }}/mo</p>
        <p>One-time setup fee: ${{ setup_fee }}</p>
        <p>Today you pay: <span class="font-semibold">${{ total }}</span></p>
    </div>
    <form id="create-form" class="flex flex-col gap-4" hx-post="{% url 'terminusgps_notifications:create subscriptions' %}" method="post" hx-target="this" hx-select="#create-form">
        {% csrf_token %}
        <section class="flex flex-col gap-2">
            {{ form.payment_profile }}
            <label class="order-first font-semibold peer-invalid:text-red-800" for="{{ form.payment_profile.id_for_label }}">Payment Profile</label>
            <p class="text-sm peer-invalid:text-red-600" id="{{ form.payment_profile.id_for_label }}_helptext">{{ form.payment_profile.help_text }}</p>
            {% if form.payment_profile.errors %}<div class="animate-jiggle font-italic">{{ form.payment_profile.errors }}</div>{% endif %}
        </section>
        <section class="flex flex-col gap-2">
            {{ form.address_profile }}
            <label class="order-first font-semibold peer-invalid:text-red-800" for="{{ form.address_profile.id_for_label }}">Address Profile</label>
            <p class="text-sm peer-invalid:text-red-600" id="{{ form.address_profile.id_for_label }}_helptext">{{ form.address_profile.help_text }}</p>
            {% if form.address_profile.errors %}<div class="animate-jiggle font-italic">{{ form.address_profile.errors }}</div>{% endif %}
        </section>
        <div class="flex gap-4 items-center">
            {{ form.consent }}
            <label class="text-sm" for="{{ form.consent.id_for_label }}">I authorize Terminus GPS to charge the above credit card ${{ total }} today and ${{ customer.subtotal }} every {% now 'jS' %} day (or final day) of each month thereafter.</label>
        </div>
        <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">Subscribe</button>
    </form>
</div>
