{{ 'pages.css' | asset_url | stylesheet_tag }}
{{ 'pagination.css' | asset_url | stylesheet_tag }}
<script crossorigin="anonymous" src="{{ 'shopify_common.js' | shopify_asset_url }}"></script>

<div id="address-container" data-section-id="" data-section-type="account-address">
  <div id="admin_header">
    <div class="action_top">
      <div id="action" class="action_link action_add note">
        <button type="button" class="btn btn-1 btn-add-new js-btn-add-new">{{- 'customer.addresses.add_new' | t -}}</button>
        <a href="{{ routes.account_url }}" class="btn btn-2">{{ 'customer.addresses.back_account' | t }}</a>
      </div>
    </div>
  </div>

  <div id="address_tables">
    {%- paginate customer.addresses by 9 -%}
      <div class="row">

          {%- for address in customer.addresses -%}
            <div class="address_table col-lg-6 col-md-6 col-12{% if address == customer.default_address %} order-0{% else %} order-{{ forloop.index }}{% endif %}">
              <div id="view_address_{{ address.id }}" class="customer_address">
                <h5 class="address_title">
                  {{ address.street }}
                  {% if address == customer.default_address %}<span class="default_address note">({{- 'customer.addresses.default' | t -}})</span>{% endif %}
                </h5>
                <div class="view_address">
                  <table>
                    <tr>
                      <td class="address-label">{{- 'customer.addresses.name' | t -}}</td>
                      <td class="address-value">{{ address.first_name }} {{ address.last_name }}</td>
                    </tr>
                    <tr>
                      <td class="address-label">{{- 'customer.addresses.company' | t -}}</td>
                      <td class="address-value">{{ address.company }}</td>
                    </tr>
                    <tr>
                      <td class="address-label">{{- 'customer.addresses.street' | t -}}</td>
                      <td class="address-value">{{ address.street }}</td>
                    </tr>
                    <tr>
                      <td class="address-label">{{- 'customer.addresses.city' | t -}}</td>
                      <td class="address-value">{{ address.city }} {% if address.province_code %}, {{ address.province_code }}{% endif %}</td>
                    </tr>
                    <tr>
                      <td class="address-label">{{- 'customer.addresses.country' | t -}}</td>
                      <td class="address-value">{{ address.country }} {{ address.zip }}</td>
                    </tr>
                    <tr>
                      <td class="address-label">{{- 'customer.addresses.phone' | t -}}</td>
                      <td class="address-value">{{ address.phone }}</td>
                    </tr>
                  </table>
                </div>
                <div class="address_actions">
                  <form class="address-delete-form" method="post" action="{{ routes.account_addresses_url }}/{{ address.id }}">
                    <input type="hidden" name="_method" value="delete"/>
                    <button type="button" class="btn btn-2 btn-edit js-btn-edit" data-json="{{ address | json | escape }}">{{- 'customer.addresses.edit' | t -}}</button>
                    <button type="submit" class="btn btn-1 address-row-delete">{{ 'customer.addresses.delete' | t }}</button>
                  </form>
                </div>
              </div>
            </div>
          {%- endfor -%}

      </div>
      {%- render 'pagination', paginate: paginate -%}
    {%- endpaginate -%}
  </div>
  
  <popup-address class="popup-component popup-address" id="popup-address">
    <div class="popup-component_overlay js-popup-close"></div>
    <div class="popup-component_box">
      <div class="popup-component_box_content">
        <button type="button" class="btn-close js-popup-close">{%- render 'svg', type: 'close' -%}</button>
        
        <div class="popup-component_box_inner">
          <header class="popup-component_box_header h2">{{- 'customer.addresses.add_new' | t -}}</header>
          <main class="popup-component_box_body">
            {%- form 'customer_address', customer.new_address, class: 'form-address' -%}
              <input type="hidden" name="_method" value="">
              <table class="customer_address_table">
                <tr>
                  <td class="label"><label for="address_first_name_new">{{- 'customer.addresses.first_name' | t -}}</label></td>
                  <td class="value"><input type="text" id="address_first_name_new" class="address_form" name="address[first_name]" value="{{ form.first_name }}" /></td>
                </tr>
                <tr>
                  <td class="label"><label for="address_last_name_new">{{- 'customer.addresses.last_name' | t -}}</label></td>
                  <td class="value"><input type="text" id="address_last_name_new" class="address_form" name="address[last_name]" value="{{ form.last_name }}" /></td>
                </tr>
                <tr>
                  <td class="label"><label for="address_company_new">{{- 'customer.addresses.company' | t -}}</label></td>
                  <td class="value"><input type="text" for="address_company_new" class="address_form" name="address[company]" value="{{ form.company }}" /></td>
                </tr>
                <tr>
                  <td class="label"><label for="address_address1_new">{{- 'customer.addresses.address1' | t -}}</label></td>
                  <td class="value"><input type="text" id="address_address1_new" class="address_form" name="address[address1]" value="{{ form.address1 }}" /></td>
                </tr>
                <tr>
                  <td class="label"><label for="address_address2_new">{{- 'customer.addresses.address2' | t -}}</label></td>
                  <td class="value"><input type="text" id="address_address2_new" class="address_form" name="address[address2]" value="{{ form.address2 }}" /></td>
                </tr>
                <tr>
                  <td class="label"><label for="address_city_new">{{- 'customer.addresses.city' | t -}}</label></td>
                  <td class="value"><input type="text" id="address_city_new" class="address_form" name="address[city]" value="{{ form.city }}" /></td>
                </tr>
                <tr>
                  <td class="label"><label for="address_country_new">{{- 'customer.addresses.country' | t -}}</label></td>
                  <td class="value">
                    <select id="address_country_new" name="address[country]" data-default="{{ form.country }}">{{ country_option_tags }}</select>
                    {%- render 'svg', type: 'bold-angle-down' -%}
                  </td>
                </tr>
                <tr>
                  <td class="label"><label for="address_province_new">{{- 'customer.addresses.province' | t -}}</label></td>
                  <td class="value">
                    <select id="address_province_new" class="address_form" name="address[province]" data-default="{{ form.province }}"></select>
                    {%- render 'svg', type: 'bold-angle-down' -%}
                  </td>
                </tr>
                <tr>
                  <td class="label"><label for="address_zip_new">{{- 'customer.addresses.zip' | t -}}</label></td>
                  <td class="value"><input type="text" id="address_zip_new" class="address_form" name="address[zip]" value="{{ form.zip }}" /></td>
                </tr>
                <tr>
                  <td class="label"><label for="address_phone_new">{{- 'customer.addresses.phone' | t -}}</label></td>
                  <td class="value"><input type="text" id="address_phone_new" class="address_form" name="address[phone]" value="{{ form.phone }}" /></td>
                </tr>
                <tr class="address-default">
                  <td class="value">
                    <span class="address-default-input">
                      {{ form.set_as_default_checkbox }}
                      <label for="address_default_address_new">{{ 'customer.addresses.set_default' | t -}}</label>
                    </span>
                  </td>
                  <td class="action_bottom">
                    <button type="submit" class="btn btn-1">{{ 'customer.addresses.add_new' | t }}</button>
                  </td>
                </tr>
              </table>
            {%- endform -%}
          </main>
        </div>
      </div>
    </div>
  </popup-address>
</div>
