{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{{ 'customer_area.js' | shopify_asset_url | script_tag }}
<style>
    .form-edit {
        border-radius: 0;
        display: flex;
        flex-direction: column;
        margin: 0;
        max-height: 100vh;
    }
    .form-edit .form-address-box {
        height: auto;
    }
    .field-select {
        background: var(--dark-beige);
        padding: 13px 20px;
        display: flex;
        flex-direction: column;
    }
    .field-select select {
        background-color: transparent;
        background-position: right center;
    }
</style>
<div id="customer-address">
    <div class="sticky sticky-below-header zi-1 hide-d">
        {%- assign values = 'Order History,Address Book,Log Out' | split: ',' -%}
        {%- assign option_values = 'history,addresses,logout' | split: ',' -%}
        {%- render 'global-select',
            class: 'account-link',
            default_text: 'Address Book',
            default_value: 'addresses',
            values: values,
            option_values: option_values,
            onchange: '$360.accountRedirect(this)'
        -%}
    </div>
    {%- render 'account-title', wrapper_class: 'hide-m show-d' -%}
    <div class="container pt-50 pb-50 d-pt-80 d-pb-80 hd-pt-100 hd-pb-100">
        <div class="row">
            <div class="col-12 col-d-4 col-hd-2">
                {%- render 'account-links' -%}
            </div>
            <div class="col-hd-1"></div>
            <div class="col-12 col-d-8">
                <h1 class="h4 mb-30 d-mb-35">{{ 'customer.account.address_book' | t }}</h1>
                <div class="relative">
                    {% comment %} Existing addresses {% endcomment %}
                    <div class="order-table">
                        {%- if customer.addresses.size > 0 -%}
                            <div class="show-m">
                                <table class="w-full">
                                    <colgroup>
                                        <col span="1" width="50%">
                                        <col span="1" width="50%">
                                    </colgroup>
                                    <thead>
                                        <tr class="bb-1 b-light-grey">
                                            <td class="p2 bold-500 pt-15 pb-15 d-p-20">{{ 'customer.addresses.customer' | t }}</td>
                                            <td class="p2 bold-500 pt-15 pb-15 d-p-20">{{ 'customer.addresses.address' | t }}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {%- paginate customer.addresses by 50 -%}
                                        {%- for address in customer.addresses -%}
                                        <tr class="{% unless forloop.last %}bb-1 b-light-grey{% endunless %}">
                                            <td class="pt-15 pb-15 d-p-20">
                                                {%- if forloop.first -%}
                                                    <span class="p2">
                                                    {{- customer.name -}}
                                                    <br>
                                                    {{ customer.email -}}
                                                    </span>                          
                                                {%- endif -%}
                                            </td>
                                            <td class="pt-15 pb-15 d-p-20">
                                                <div class="flex flex-column">
                                                    <div class="p2">
                                                    {% if address.address1 != blank -%}
                                                        {{- address.address1 -}}
                                                        {% if address.address2 != blank -%}, {{ address.address2 }}{% endif %}
                                                        <br>
                                                    {% endif %}
                                                    {%- if address.city != blank -%}
                                                        {{- address.city -}}{%- if address.province != blank -%}, {{ address.province }}<br>{%- else -%}<br>{%- endif -%}
                                                    {%- endif -%}
                                                    {{ address.country }} {{ address.zip }}
                                                    <br>
                                                    {% if address.phone != blank -%}
                                                        {{- address.phone -}}
                                                        <br>
                                                    {% endif %}
                                                    {% if address == customer.default_address %}
                                                        ({{ 'customer.addresses.default_address' | t }})
                                                    {% endif %}
                                                    </div>

                                                    <div class="mt-15 flex jc-start ai-center colgap-15">
                                                        {%- assign delete_confirm = 'customer.addresses.delete_confirm' | t -%}
                                                        <a
                                                            href="#"
                                                            rel="nofollow"
                                                            @click.prevent="showEditForm('edit_{{ forloop.index }}')"
                                                            class="p3 link2"
                                                        >
                                                            <span class="icon-link">{{ settings.icon_edit }}</span>
                                                        </a>
                                                        <a
                                                            href="#"
                                                            class="p3 link2"
                                                            onclick="Shopify.CustomerAddress.destroy({{ address.id }}, '{{ delete_confirm }}');return false;"
                                                            rel="nofollow"
                                                        >
                                                            <span class="icon-link">{{ settings.icon_trash }}</span>
                                                        </a>
                                                    </div>
                                                </div>

                                                <Teleport to="body">
                                                    <div
                                                    class="form-edit pb-25 pl-25 pr-25 t-pb-35 t-pl-35 t-pr-35 bg-cream zi-8 relative"
                                                    :class="{active: editForm['edit_{{ forloop.index }}']}"
                                                    >
                                                    <div class="flex jc-between ai-center mt-25 mb-20 t-mt-35 t-mb-30 hd-mb-30 hhd-mb-30">
                                                        <h3 class="h5">{{ 'customer.addresses.edit_address' | t }} </h3>
                                                        <button
                                                        type="button"
                                                        @click="hideEditForm('edit_{{ forloop.index }}')"
                                                        class="close flex ai-center jc-center btn-close absolute top-20 right-20">
                                                            {{ settings.icon_close }}
                                                        </button>
                                                    </div>
                                                    <div class="w-full relative form-address-box">
                                                        {% form 'customer_address', address %}
                                                        <div class="account-form">
                                                            <div class="container-max flex flex-column t-flex-row t-jc-between t-ai-center rowgap-15 mb-15 t-colgap-15">
                                                                <div class="col-12 col-t-6 account-form-each">
                                                                    {%- render "global-input",
                                                                        id: 'address_first_name_{{form.id}}',
                                                                        name: 'address[first_name]',
                                                                        type: 'text',
                                                                        multiline: false,
                                                                        wrapper_class: 'label-as-placeholder',
                                                                        label: 'First Name',
                                                                        placeholder: 'First Name',
                                                                        value: form.first_name
                                                                    -%}
                                                                    {% comment %} <input
                                                                    type="text"
                                                                    id="address_first_name_{{form.id}}"
                                                                    class="global-input with-border p2 c-body-grey"
                                                                    name="address[first_name]"
                                                                    value="{{form.first_name}}"
                                                                    placeholder="{{ 'customer.addresses.first_name' | t }}"
                                                                    > {% endcomment %}
                                                                </div>
                                                                <div class="col-12 col-t-6 account-form-each">
                                                                    {%- render "global-input",
                                                                        id: 'address_last_name_{{form.id}}',
                                                                        name: 'address[last_name]',
                                                                        type: 'text',
                                                                        multiline: false,
                                                                        wrapper_class: 'label-as-placeholder',
                                                                        label: 'Last Name',
                                                                        placeholder: 'Last Name',
                                                                        value: form.last_name
                                                                    -%}
                                                                    {% comment %} <input
                                                                    type="text"
                                                                    id="address_last_name_{{form.id}}"
                                                                    class="global-input with-border p2 c-body-grey"
                                                                    name="address[last_name]"
                                                                    value="{{form.last_name}}"
                                                                    placeholder="{{ 'customer.addresses.last_name' | t }}"
                                                                    > {% endcomment %}
                                                                </div>
                                                            </div>
                                                            <div class="account-form-each mb-15" style="display:none;">
                                                                <input
                                                                    type="text"
                                                                    id="address_company_{{form.id}}"
                                                                    class="global-input with-border p2 c-body-grey"
                                                                    name="address[company]"
                                                                    value="{{form.company}}"
                                                                    placeholder="{{ 'customer.addresses.company' | t }}"
                                                                >
                                                            </div>
                                                            <div class="account-form-each mb-15">
                                                                {%- render "global-input",
                                                                    id: 'address_address1_{{form.id}}',
                                                                    name: 'address[address1]',
                                                                    type: 'text',
                                                                    multiline: false,
                                                                    wrapper_class: 'label-as-placeholder',
                                                                    label: 'Address 1',
                                                                    placeholder: 'Address 1',
                                                                    value: form.address1
                                                                -%}
                                                                {% comment %} <input
                                                                    type="text"
                                                                    id="address_address1_{{form.id}}"
                                                                    class="global-input with-border p2 c-body-grey"
                                                                    name="address[address1]"
                                                                    value="{{form.address1}}"
                                                                    placeholder="{{ 'customer.addresses.address1' | t }}"
                                                                > {% endcomment %}
                                                            </div>
                                                            <div class="account-form-each mb-15">
                                                                {%- render "global-input",
                                                                    id: 'address_address2_{{form.id}}',
                                                                    name: 'address[address2]',
                                                                    type: 'text',
                                                                    multiline: false,
                                                                    wrapper_class: 'label-as-placeholder',
                                                                    label: 'Address 2',
                                                                    placeholder: 'Address 2',
                                                                    value: form.address2
                                                                -%}
                                                                {% comment %} <input
                                                                    type="text"
                                                                    id="address_address2_{{form.id}}"
                                                                    class="global-input with-border p2 c-body-grey"
                                                                    name="address[address2]"
                                                                    value="{{form.address2}}"
                                                                    placeholder="{{ 'customer.addresses.address2' | t }}"
                                                                > {% endcomment %}
                                                            </div>
                                                            <div class="container-max flex flex-column t-flex-row t-jc-between t-ai-center rowgap-15 mb-15 t-colgap-15">
                                                                <div class="col-12 col-t-6 account-form-each">
                                                                    {%- render "global-input",
                                                                        id: 'address_city_{{form.id}}',
                                                                        name: 'address[city]',
                                                                        type: 'text',
                                                                        multiline: false,
                                                                        wrapper_class: 'label-as-placeholder',
                                                                        label: 'City',
                                                                        placeholder: 'City',
                                                                        value: form.city
                                                                    -%}
                                                                    {% comment %} <input
                                                                        type="text"
                                                                        id="address_city_{{form.id}}"
                                                                        class="global-input with-border p2 c-body-grey"
                                                                        name="address[city]"
                                                                        value="{{form.city}}"
                                                                        placeholder="{{ 'customer.addresses.city' | t }}"
                                                                    > {% endcomment %}
                                                                </div>
                                                                <div class="col-12 col-t-6 account-form-each">
                                                                    <div class="field-select">
                                                                        <label class="p5 mb-5">Country</label>
                                                                        <select
                                                                            id="address_country_{{form.id}}"
                                                                            name="address[country]"
                                                                            data-default="{{form.country}}"
                                                                            data-form-id="{{ form.id }}"
                                                                            class="country-dropdown global-input p3 b-0"
                                                                        >
                                                                            {{ country_option_tags }}
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div
                                                                class="account-form-each mb-15"
                                                                id="address_province_container_{{form.id}}"
                                                                style="display:none;"
                                                            >
                                                                <div class="field-select">
                                                                    <label class="p5 mb-5">Province</label>
                                                                    <select
                                                                        id="address_province_{{form.id}}"
                                                                        class="product-buy-options province-dropdown global-input p3 b-0"
                                                                        name="address[province]"
                                                                        data-default="{{form.province}}"
                                                                    ></select>
                                                                </div>
                                                            </div>
                                                            <div class="container-max flex flex-column rowgap-15">
                                                                <div class="col-12 account-form-each">
                                                                    {%- render "global-input",
                                                                        id: 'address_zip_{{form.id}}',
                                                                        name: 'address[zip]',
                                                                        type: 'text',
                                                                        multiline: false,
                                                                        wrapper_class: 'label-as-placeholder',
                                                                        label: 'Postal Code',
                                                                        placeholder: 'Postal Code',
                                                                        value: form.zip
                                                                    -%}
                                                                    {% comment %} <input
                                                                        type="text"
                                                                        id="address_zip_{{form.id}}"
                                                                        class="global-input with-border p2 c-body-grey"
                                                                        name="address[zip]"
                                                                        value="{{form.zip}}"
                                                                        placeholder="{{ 'customer.addresses.zip' | t }}"
                                                                    > {% endcomment %}
                                                                </div>
                                                                <div class="col-12 account-form-each">
                                                                    {%- render "global-input",
                                                                        id: 'address_phone_{{form.id}}',
                                                                        name: 'address[phone]',
                                                                        type: 'text',
                                                                        multiline: false,
                                                                        wrapper_class: 'label-as-placeholder',
                                                                        label: 'Phone',
                                                                        placeholder: 'Phone',
                                                                        value: form.phone
                                                                    -%}
                                                                    {% comment %} <input
                                                                        type="text"
                                                                        id="address_phone_{{form.id}}"
                                                                        class="global-input with-border p2 c-body-grey"
                                                                        name="address[phone]"
                                                                        value="{{form.phone}}"
                                                                        placeholder="{{ 'customer.addresses.phone' | t }}"
                                                                    > {% endcomment %}
                                                                </div>
                                                            </div>
                                                            <div class="account-form-each global-checkbox mt-20 mb-20">
                                                                <label class="checkbox-label">
                                                                    <input
                                                                    type="checkbox"
                                                                    id="address_default_address_{{ form.id }}"
                                                                    name="address[default]"
                                                                    value="1"
                                                                    v-model="editForm['default_{{ forloop.index }}']"
                                                                    >
                                                                    <div class="text">
                                                                        <p class="p2">{{ 'customer.addresses.set_default' | t }}</p>
                                                                    </div>
                                                                    <span class="checkmark"></span>
                                                                </label>
                                                            </div>
                                                            <div class="form-buttons">
                                                                <button class="btn1" type="submit">{{ 'customer.addresses.submit' | t }}</button>
                                                            </div>
                                                        </div>
                                                        {% endform %}
                                                    </div>
                                                    </div>
                                                </Teleport>
                                            </td>
                                        </tr>
                                        {%- endfor -%}
                                    {%- endpaginate -%}
                                    </tbody>
                                </table>
                            </div>

                            <div class="mb-20 hide-m">
                                <table class="w-full">
                                    <thead>
                                        <tr class="bb-1 b-border">
                                            <td class="p2 bold-500 pt-15 pb-15 pl-20 pr-20">{{ 'customer.addresses.customer' | t }}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {%- paginate customer.addresses by 50 -%}
                                        {%- for address in customer.addresses -%}
                                            {% if forloop.first %}
                                                <tr>
                                                    <td class="pt-15 pb-15 d-p-20">
                                                        {%- if forloop.first -%}
                                                            <span class="p2">
                                                            {{- customer.name -}}
                                                            <br>
                                                            {{ customer.email -}}
                                                            </span>                          
                                                        {%- endif -%}
                                                    </td>
                                                </tr>
                                            {% endif %}
                                        {%- endfor -%}
                                    {%- endpaginate -%}
                                    </tbody>
                                </table>
                            </div>
                            <div class="hide-m">
                                <table class="w-full">
                                    <thead>
                                        <tr class="bb-1 b-border">
                                            <td class="p2 bold-500 pt-15 pb-15 pl-20 pr-20">{{ 'customer.addresses.address' | t }}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {%- paginate customer.addresses by 50 -%}
                                        {%- for address in customer.addresses -%}
                                        <tr class="{% unless forloop.last %}bb-1 b-border{% endunless %}">
                                            <td class="pt-15 pb-15 d-p-20">
                                                <div class="flex flex-column">
                                                    <div class="p2">
                                                    {% if address.street != blank -%}
                                                        {{- address.street -}}
                                                        <br>
                                                    {% endif %}
                                                    {%- if address.city != blank -%}{{- address.city }}<br>{%- endif -%}
                                                    {%- if address.province != blank -%}, {{ address.province }}<br>{%- endif -%}
                                                    {{ address.country }} {{ address.zip }}
                                                    <br>
                                                    {% if address.phone != blank -%}
                                                        {{- address.phone -}}
                                                        <br>
                                                    {% endif %}
                                                    {% if address == customer.default_address %}
                                                        ({{ 'customer.addresses.default_address' | t }})
                                                    {% endif %}
                                                    </div>

                                                    <div class="mt-15 flex jc-start ai-center colgap-15">
                                                        {%- assign delete_confirm = 'customer.addresses.delete_confirm' | t -%}
                                                        <a
                                                            href="#"
                                                            rel="nofollow"
                                                            @click.prevent="showEditForm('edit_{{ forloop.index }}')"
                                                            class="p3 link2"
                                                        >
                                                            <span class="icon-link">{{ settings.icon_edit }}</span>
                                                        </a>
                                                        <a
                                                            href="#"
                                                            class="p3 link2"
                                                            onclick="Shopify.CustomerAddress.destroy({{ address.id }}, '{{ delete_confirm }}');return false;"
                                                            rel="nofollow"
                                                        >
                                                            <span class="icon-link">{{ settings.icon_trash }}</span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        {%- endfor -%}
                                    {%- endpaginate -%}
                                    </tbody>
                                </table>
                            </div>
                        {%- else -%}
                            <p class="p2 opacity-5">{{ 'customer.addresses.not_found' | t }}</p>
                        {%- endif -%}
                    </div>
                    {% comment %} End Existing addresses {% endcomment %}

                    {% comment %} New address {% endcomment %}
                    <div class="flex jc-start mt-25">
                        <button @click="showNewForm" type="button" class="address-new btn2">
                            {{ 'customer.addresses.add_new' | t }}
                        </button>
                    </div>
                    <Teleport to="body">
                        <div class="form-edit pb-25 pl-25 pr-25 t-pb-35 t-pl-35 t-pr-35 bg-cream zi-8 relative" :class="{active: newForm}">
                            <div class="flex jc-between ai-center mt-25 mb-20 t-mt-35 t-mb-30 hd-mb-30 hhd-mb-30">
                                <h3 class="h5">{{ 'customer.addresses.add' | t }} </h3>
                                <button
                                    type="button"
                                    @click="hideNewForm"
                                    class="close flex ai-center jc-center btn-close absolute top-20 right-20"
                                >
                                    {{ settings.icon_close }}
                                </button>
                            </div>
                            <div class="w-full relative form-address-box">
                                {% form 'customer_address', customer.new_address %}
                                    <div class="account-form">
                                        <div class="container-max flex flex-column t-flex-row t-jc-between t-ai-center rowgap-15 mb-15 t-colgap-15">
                                            <div class="col-12 col-t-6 account-form-each">
                                                {%- render "global-input",
                                                    id: 'address_first_name_{{form.id}}',
                                                    name: 'address[first_name]',
                                                    type: 'text',
                                                    multiline: false,
                                                    wrapper_class: 'label-as-placeholder',
                                                    label: 'First Name',
                                                    placeholder: 'First Name',
                                                    value: form.first_name
                                                -%}
                                                {% comment %} <input
                                                    type="text"
                                                    id="address_first_name_{{form.id}}"
                                                    class="global-input with-border p2 c-body-grey"
                                                    name="address[first_name]"
                                                    value="{{form.first_name}}"
                                                    placeholder="{{ 'customer.addresses.first_name' | t }}"
                                                > {% endcomment %}
                                            </div>
                                            <div class="col-12 col-t-6 account-form-each">
                                                {%- render "global-input",
                                                    id: 'address_last_name_{{form.id}}',
                                                    name: 'address[last_name]',
                                                    type: 'text',
                                                    multiline: false,
                                                    wrapper_class: 'label-as-placeholder',
                                                    label: 'Last Name',
                                                    placeholder: 'Last Name',
                                                    value: form.last_name
                                                -%}
                                                {% comment %} <input
                                                    type="text"
                                                    id="address_last_name_{{form.id}}"
                                                    class="global-input with-border p2 c-body-grey"
                                                    name="address[last_name]"
                                                    value="{{form.last_name}}"
                                                    placeholder="{{ 'customer.addresses.last_name' | t }}"
                                                > {% endcomment %}
                                            </div>
                                        </div>
                                        <div class="account-form-each mb-15" style="display:none;">
                                            <input
                                            type="text"
                                            id="address_company_{{form.id}}"
                                            class="global-input with-border p2 c-body-grey"
                                            name="address[company]"
                                            value="{{form.company}}"
                                            placeholder="{{ 'customer.addresses.company' | t }}"
                                            >
                                        </div>
                                        <div class="account-form-each mb-15">
                                            {%- render "global-input",
                                                id: 'address_address1_{{form.id}}',
                                                name: 'address[address1]',
                                                type: 'text',
                                                multiline: false,
                                                wrapper_class: 'label-as-placeholder',
                                                label: 'Address 1',
                                                placeholder: 'Address 1',
                                                value: form.address1
                                            -%}
                                            {% comment %} <input
                                                type="text"
                                                id="address_address1_{{form.id}}"
                                                class="global-input with-border p2 c-body-grey"
                                                name="address[address1]"
                                                value="{{form.address1}}"
                                                placeholder="{{ 'customer.addresses.address1' | t }}"
                                            > {% endcomment %}
                                        </div>
                                        <div class="account-form-each mb-15">
                                            {%- render "global-input",
                                                id: 'address_address2_{{form.id}}',
                                                name: 'address[address2]',
                                                type: 'text',
                                                multiline: false,
                                                wrapper_class: 'label-as-placeholder',
                                                label: 'Address 2',
                                                placeholder: 'Address 2',
                                                value: form.address2
                                            -%}
                                            {% comment %} <input
                                                type="text"
                                                id="address_address2_{{form.id}}"
                                                class="global-input with-border p2 c-body-grey"
                                                name="address[address2]"
                                                value="{{form.address2}}"
                                                placeholder="{{ 'customer.addresses.address2' | t }}"
                                            > {% endcomment %}
                                        </div>
                                        <div class="container-max flex flex-column t-flex-row t-jc-between t-ai-center rowgap-15 mb-15 t-colgap-15">
                                            <div class="col-12 col-t-6 account-form-each">
                                                {%- render "global-input",
                                                    id: 'address_city_{{form.id}}',
                                                    name: 'address[city]',
                                                    type: 'text',
                                                    multiline: false,
                                                    wrapper_class: 'label-as-placeholder',
                                                    label: 'City',
                                                    placeholder: 'City',
                                                    value: form.city
                                                -%}
                                                {% comment %} <input
                                                    type="text"
                                                    id="address_city_{{form.id}}"
                                                    class="global-input with-border p2 c-body-grey"
                                                    name="address[city]"
                                                    value="{{form.city}}"
                                                    placeholder="{{ 'customer.addresses.city' | t }}"
                                                > {% endcomment %}
                                            </div>
                                            <div class="col-12 col-t-6 account-form-each">
                                                <div class="field-select">
                                                    <label class="p5 mb-5">Country</label>
                                                    <select
                                                        id="address_country_{{form.id}}"
                                                        name="address[country]"
                                                        data-default="{{form.country}}"
                                                        data-form-id="{{ form.id }}"
                                                        class="country-dropdown global-input p3 b-0"
                                                    >
                                                        {{ country_option_tags }}
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="account-form-each mb-15" id="address_province_container_{{form.id}}" style="display:none">
                                            <div class="field-select">
                                                <label class="p5 mb-5">Province</label>
                                                <select
                                                    id="address_province_{{form.id}}"
                                                    class="product-buy-options province-dropdown global-input p3 b-0"
                                                    name="address[province]"
                                                    data-default="{{form.province}}"
                                                ></select>
                                            </div>
                                        </div>
                                        <div class="container-max flex flex-column rowgap-15">
                                            <div class="col-12 account-form-each">
                                                {%- render "global-input",
                                                    id: 'address_zip_{{form.id}}',
                                                    name: 'address[zip]',
                                                    type: 'text',
                                                    multiline: false,
                                                    wrapper_class: 'label-as-placeholder',
                                                    label: 'Postal Code',
                                                    placeholder: 'Postal Code',
                                                    value: form.zip
                                                -%}
                                                {% comment %} <input
                                                    type="text"
                                                    id="address_zip_{{form.id}}"
                                                    class="global-input with-border p2 c-body-grey"
                                                    name="address[zip]"
                                                    value="{{form.zip}}"
                                                    placeholder="{{ 'customer.addresses.zip' | t }}"
                                                > {% endcomment %}
                                            </div>
                                            <div class="col-12 account-form-each">
                                                {%- render "global-input",
                                                    id: 'address_phone_{{form.id}}',
                                                    name: 'address[phone]',
                                                    type: 'text',
                                                    multiline: false,
                                                    wrapper_class: 'label-as-placeholder',
                                                    label: 'Phone',
                                                    placeholder: 'Phone',
                                                    value: form.phone
                                                -%}
                                                {% comment %} <input
                                                    type="text"
                                                    id="address_phone_{{form.id}}"
                                                    class="global-input with-border p2 c-body-grey"
                                                    name="address[phone]"
                                                    value="{{form.phone}}"
                                                    placeholder="{{ 'customer.addresses.phone' | t }}"
                                                > {% endcomment %}
                                            </div>
                                        </div>
                                        <div class="account-form-each global-checkbox mt-20 mb-20">
                                            <label class="checkbox-label">
                                                <input
                                                    type="checkbox"
                                                    id="address_default_address_{{ form.id }}"
                                                    name="address[default]"
                                                    value="0"
                                                >
                                                <div class="text">
                                                    <p class="p2">{{ 'customer.addresses.set_default' | t }}</p>
                                                </div>
                                                <span class="checkmark"></span>
                                            </label>
                                        </div>
                                        <div class="form-buttons flex ai-center">
                                            <button class="btn1 w-full" type="submit">{{ 'customer.addresses.submit' | t }}</button>
                                        </div>
                                    </div>
                                {% endform %}
                            </div>
                        </div>
                    </Teleport>

                    <Teleport to="body">
                        <div
                            @click="hideAllForm"
                            class="page-overlay address-form zi-7"
                            :class="{active: showOverlay, 'fade-out': overlayFadeOut}"
                        >
                            &nbsp;
                        </div>
                    </Teleport>
                    {% comment %} End New address {% endcomment %}
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    Vue.createApp({
        delimiters: ['${', '}'],
        data() {
            return {
            checked: true,
            showOverlay: false,
            overlayFadeOut: false,
            newForm: false,
            editForm: {
                {% for address in customer.addresses %}
                {%- assign default = false -%}
                {%- if address == customer.default_address -%}
                    {%- assign default = true -%}
                {%- endif -%}
                edit_{{ forloop.index }}: false,
                default_{{ forloop.index }}: {{ default }},
                {% endfor %}
            }
            }
        },
        mounted() {
        /** Handling province options */
        if (Shopify && Shopify.CountryProvinceSelector) {
            setTimeout(function() {
            document.querySelectorAll('.country-dropdown').forEach(el => {
                const formId = el.getAttribute('data-form-id');
                var countrySelector = 'address_country_' + formId;
                var provinceSelector = 'address_province_' + formId;
                var containerSelector = 'address_province_container_' + formId;

                new Shopify.CountryProvinceSelector(countrySelector, provinceSelector, {
                    hideElement: containerSelector
                });
            });
            }, 1000);
        }
        /** End handling province options */
        },
        methods: {
        showNewForm() {
            this.newForm = true;
            this.showOverlay = true;
            this.bodyAddOverflow();
            $360.hideFloatingApp();
        },
        hideNewForm() {
            this.fadeOutOverlay();
            this.newForm = false;
            this.bodyRemoveOverflow();
            $360.showFloatingApp();
        },
        showEditForm(id) {
            this.editForm[id] = true;
            this.showOverlay = true;
            this.bodyAddOverflow();
            $360.hideFloatingApp();
        },
        hideEditForm(id) {
            this.fadeOutOverlay();
            this.editForm[id] = false;
            this.bodyRemoveOverflow();
            $360.showFloatingApp();
        },
        hideAllForm() {
            this.bodyRemoveOverflow();
            this.newForm = false;
            this.fadeOutOverlay();
            {% for address in customer.addresses %}
            this.editForm.edit_{{ forloop.index }} = false;
            {% endfor %}
            $360.showFloatingApp();
        },
        fadeOutOverlay() {
            this.showOverlay = false;
            this.overlayFadeOut = true;
            setTimeout(() => {
            this.overlayFadeOut = false;
            }, 150);
        },
        bodyAddOverflow(){
            document.querySelector('body').classList.add('overflow');
        },
        bodyRemoveOverflow() {
            document.querySelector('body').classList.remove('overflow');
        }
        }
    }).mount('#customer-address');
</script>
{% schema %}
    {
        "name": "Account Addresses",
        "settings": [],
        "presets": [{ "name": "Account Addresses" }]
    }
{% endschema %}