<div class="p-4 flex flex-col gap-4 border-2 rounded bg-gray-50 dark:bg-gray-900" hx-target="this" hx-swap="outerHTML">
    <h3 class="font-semibold text-lg text-terminus-red-500 dark:text-terminus-red-100">Subscribe</h3>
    <div class="relative overflow-x-auto shadow-xs rounded border bg-gray-100 dark:bg-gray-700">
        <table class="w-full text-sm text-left">
            <thead class="text-sm text-body border-b bg-gray-200 dark:bg-gray-600">
                <tr>
                    <th scope="col" class="px-6 py-3">
                        Item
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Price
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="border-b">
                    <th scope="row" class="px-6 py-4 whitespace-nowrap">
                        One-time Set-up Fee
                    </th>
                    <td class="px-6 py-4 font-bold">
                        ${{ setup_fee|floatformat:"2g" }}
                    </td>
                </tr>
                <tr class="border-b">
                    <th scope="row" class="px-6 py-4 whitespace-nowrap">
                        First Month of Service
                    </th>
                    <td class="px-6 py-4 font-bold">
                        ${{ customer.subtotal|floatformat:"2g" }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <form id="create-form" class="flex flex-col gap-4" hx-post="{% url 'terminusgps_notifications:create subscriptions' %}" method="post">
        {% if form.non_field_errors %}
        <div class="p-2 bg-red-200 text-red-700 animate-jiggle border border-current rounded">
            <div class="flex gap-2 items-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-red-700 fill-red-50 animate-pulse">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
                </svg>
                {{ form.non_field_errors }}
            </div>
        </div>
        {% endif %}
        {% 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|floatformat:"2g" }} today and ${{ customer.subtotal|floatformat:"2g" }} every {% now 'jS' %} day (or final day) of each month thereafter.</label>
        </div>
        <p class="text-center">Due Today: <span class="font-semibold">${{ total|floatformat:"2g" }}</span></p>
        <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>
