<section class="flex flex-col gap-4">
    <div class="flex flex-col gap-2">
        <div class="flex flex-col">
            <h3 class="font-semibold text-4xl">
                Create an Account
            </h3>
            <span class="text-sm">
                You can manage all your orders, addresses, and payment cards in one place!
            </span>
        </div>
        {% include 'lib/alert.twig' %}
        <form action="/account/signup" method="post" class="flex flex-col gap-4">
            {% include 'lib/rule.twig' with { text: 'STEP 1' } %}
            <div class="flex flex-col">
                <h4 class="font-semibold text-2xl">
                    Email Address
                </h4>
                <span class="text-sm">
                    Recieve login link to verify. Order and account updates will be sent here.
                </span>
            </div>
            <div class="w-full flex items-center justify-between gap-4">
                <div class="w-3/5">
                    {% include 'lib/inputs/text.twig' with {
                        type: 'text',
                        name: 'email',
                        value: session.user_email is defined ? session.user_email : null,
                        readonly: session.user_email is defined ? true : null
                    } %}
                </div>
                {% include 'lib/inputs/toggle.twig' with { 
                    label: 'Recieve coupons & more', 
                    name: 'opt_in_promotional',
                    on: true
                } %}
            </div>
            {% include 'lib/rule.twig' with { text: 'STEP 2' } %}
            <div class="flex flex-col">
                <h4 class="font-semibold text-2xl">
                    Shipping Address
                </h4>
                <span class="text-sm">
                    Your orders will ship to this address (USA only).
                </span>
            </div>
            {% include 'lib/forms/address.twig' with {
                type: 'shipping_',
                name: session.last_post.shipping_name,
                addressLine1: session.last_post.shipping_addressLine1,
                company: session.last_post.shipping_company,
                addressLine2: session.last_post.shipping_addressLine2,
                city: session.last_post.shipping_city,
                state: session.last_post.shipping_state,
                zip: session.last_post.shipping_zip,
                phone: session.last_post.shipping_phone,
            } %}
            {% include 'lib/rule.twig' with { text: 'STEP 3' } %}
            <div class="flex items-center justify-between">
                <div class="flex flex-col">
                    <h4 class="font-semibold text-2xl">
                        Billing Address
                    </h4>
                    <span class="text-sm">
                        Info must match the credit card making the purchase.
                    </span>
                </div>
            </h4>
            {% include 'lib/inputs/toggle.twig' with { 
                    label: 'Same as shipping', 
                    name: 'use_shipping',
                    on: true 
                } %}
        </div>
        <div id="billing-address" style="display: none;">
            {% include 'lib/forms/address.twig' with {
                type: 'billing_',
                name: session.last_post.billing_name,
                addressLine1: session.last_post.billing_addressLine1,
                company: session.last_post.billing_company,
                addressLine2: session.last_post.billing_addressLine2,
                city: session.last_post.billing_city,
                state: session.last_post.billing_state,
                zip: session.last_post.billing_zip,
                phone: session.last_post.billing_phone,
            } %}
        </div>
        {% include 'lib/rule.twig' with { text: 'ALL DONE!' } %}
        {% include 'lib/buttons/submit.twig' with { 
            label: 'Register', 
            captcha: true 
        } %}
    </form>
</div>
<script>
        // this bit-of-script handles show/hide the billing address form fields
        const useShippingCheckbox = document.getElementById('use_shipping');
        const billingAddress = document.getElementById('billing-address');

        useShippingCheckbox.addEventListener('change', () => {
            if (useShippingCheckbox.checked) {
                billingAddress.style.display = 'none';
            } else {
                billingAddress.style.display = 'flex';
            }
        });
    </script></section>