<section>
    {% include 'lib/alert.twig' %}
    <div class="flex flex-col gap-4">
        <div class="flex flex-col gap-1">
            <h3 class="text-2xl font-semibold">
                Payment Methods
            </h3>
            {% include 'lib/rule.twig' %}
        </div>
        {% include 'lib/empty.twig' with {
            type: 'payment',
            title: "Let's get you set up!",
            subtitle: 'Add a payment method'
        } %}
        <div class="flex flex-col gap-1">
            <h3 class="text-2xl font-semibold">
                Billing Address
            </h3>
            {% include 'lib/rule.twig' %}
            <p class="text-xs">
                Your billing information must match the information associatied with the credit card making the purchase.
            </p>
            {% for address in addresses %}
                {% if address.id == user.billing_address_id %}
                    {% include 'lib/address.twig' with {
                        address: address,
                        edit: true,
                        delete: true,
                        redirect: '/account/billing'
                    } %}
                {% endif %}
            {% endfor %}
        </div>
        <form action="/account/billing" method="post" class="flex flex-col gap-2">
            {% include 'lib/forms/address.twig' with {
                type: 'billing_'
            } %}
            {% include 'lib/buttons/submit.twig' with { 
                label: 'Add Address', 
            } %}
        </form>
        {% if addresses|length > 1 %}
            {% include 'lib/rule.twig' with {
                text: 'OR'
            } %}
            {% for address in addresses %}
                {% if address.id != user.shipping_address_id %}
                    {% include 'lib/address.twig' with {
                        address: address,
                        edit: true,
                        delete: true,
                        redirect: '/account/billing',
                        set_default: 'billing'
                    } %}
                {% endif %}
            {% endfor %}
        {% endif %}
    </div>
</section>
