<section class="flex flex-col gap-4">
    <div>
        <div class="flex flex-col gap-1">
            <h3 class="text-2xl font-semibold">
                Saved Shipping Address
            </h3>
            {% include 'lib/rule.twig' %}
            <p class="text-xs">
                This is your default shipping address for orders at checkout.
            </p>
        </div>
        {% for address in addresses %}
            {% if address.id == user.shipping_address_id %}
                {% include 'lib/address.twig' with {
                    address: address,
                    edit_url: '/account/shipping/edit/' ~ address.id,
                    delete_url: '/account/shipping/delete/' ~ address.id
                } %}
            {% endif %}
        {% endfor %}
    </div>
    <form action="/account/shipping" method="post" class="flex flex-col gap-2">
        {% include 'lib/forms/address.twig' with {
            action: 'shipping'
        } %}
        {% include 'lib/button.twig' with { 
            label: 'Add Address', 
            onclick: 'this.parentNode.submit()' 
        } %}
    </form>
    {% if addresses|length > 1 %}
        {% include 'lib/rule.twig' with {
                text: 'OR'
            } %}
        {% for address in addresses %}
            {% include 'lib/address.twig' with { 
                    address: address,
                    edit_url: '/account/billing/edit/' ~ address.id,
                    delete_url: '/account/billing/delete/' ~ address.id
                } %}
        {% endfor %}
    {% endif %}

</section>
