<span class="ftr-text--l">{{ text_checkout_payment_address }}</span>
<div id="payment-existing">
  {% if addresses %}
    <p class="ftr-text--grey ftr-out-space--t-m">{{ text_shipping_address }}</p>
    {% for address in addresses %}
      <input class="ftr-radio" id="{{ address.address_id }}" type="radio" name="address_id" value="{{ address.address_id }}" {{ (address.address_id == address_id) ? 'checked' : '' }}>
      <label class="ftr-radio-label ftr-block" for="{{ address.address_id }}">
        <span class="ftr-radio-label__text">
          <p>{{ (address.apelido) ? '(' ~ address.apelido ~ ') ' : '' }} {{ address.firstname }} {{ address.lastname }}</p>
          <p class="ftr-text--grey ftr-text-line--xs">{{ address.address_1 }}, {{ address.numero }}</p>
          <p class="ftr-text--grey ftr-text-line--xs">{{ address.address_2 }} {{ address.complemento }}</p>
          <p class="ftr-text--grey ftr-text-line--xs">{{ address.city }} - {{ address.zone }} - {{ address.country }}</p>
        </span>
      </label>
    {% endfor %}
  {% endif %}
  <button type="button" id="new-address" class="ftr-btn ftr-js-ripple-effect ftr-btn--fab ftr-btn--fab-form ftr-background--primary">
    <i class="material-icons">&#xE145;</i>
  </button>
  <input type="hidden" id="using-address" name="payment_address" value="existing">
</div>

<div id="payment-new" style="display: {{ (addresses) ? 'none' : 'block' }}">
  <label class="ftr-field {{ (error_apelido) ? 'error' : '' }}">
    <input type="text" id="apelido" name="apelido" class="ftr-field__entry ftr-js-field__entry" value="{{ apelido }}">
    <span class="ftr-field__text">{{ entry_place }}</span>
    {% if error_apelido %}
      <span class="ftr-field__error">{{ error_apelido }}</span>
    {% endif %}
  </label>
  <label class="ftr-field {{ (error_firstname) ? 'error' : '' }}">
    <input type="text" id="firstname" name="firstname" class="ftr-field__entry ftr-js-field__entry" value="{{ firstname }}" required>
    <span class="ftr-field__text">{{ entry_firstname }}</span>
    {% if error_firstname %}
      <span class="ftr-field__error">{{ error_firstname }}</span>
    {% endif %}
  </label>
  <label class="ftr-field {{ (error_lastname) ? 'error' : '' }}">
    <input type="text" id="lastname" name="lastname" class="ftr-field__entry ftr-js-field__entry" value="{{ lastname }}" required>
    <span class="ftr-field__text">{{ entry_lastname }}</span>
    {% if error_lastname %}
      <span class="ftr-field__error">{{ error_lastname }}</span>
    {% endif %}
  </label>
  <label class="ftr-field {{ (error_address_1) ? 'error' : '' }}">
    <input type="text" id="address_1" name="address_1" class="ftr-field__entry ftr-js-field__entry" value="{{ address_1 }}" required>
    <span class="ftr-field__text">{{ entry_address_1 }}</span>
    {% if error_address_1 %}
      <span class="ftr-field__error">{{ error_address_1 }}</span>
    {% endif %}
  </label>
  <label class="ftr-field {{ (error_numero) ? 'error' : '' }}">
    <input type="number" id="numero" name="numero" class="ftr-field__entry ftr-js-field__entry" value="{{ numero }}" required>
    <span class="ftr-field__text">{{ entry_numero }}</span>
    {% if error_numero %}
      <span class="ftr-field__error">{{ error_numero }}</span>
    {% endif %}
  </label>
  <label class="ftr-field {{ (error_address_2) ? 'error' : '' }}">
    <input type="text" id="address_2" name="address_2" class="ftr-field__entry ftr-js-field__entry" value="{{ address_2 }}">
    <span class="ftr-field__text">{{ entry_address_2 }}</span>
    {% if error_address_2 %}
      <span class="ftr-field__error">{{ error_address_2 }}</span>
    {% endif %}
  </label>
  <label class="ftr-field {{ (error_complemento) ? 'error' : '' }}">
    <input type="text" id="complemento" name="complemento" class="ftr-field__entry ftr-js-field__entry" value="{{ complemento }}">
    <span class="ftr-field__text">{{ entry_complemento }}</span>
    {% if error_complemento %}
      <span class="ftr-field__error">{{ error_complemento }}</span>
    {% endif %}
  </label>
  <label class="ftr-field {{ (error_city) ? 'error' : '' }}">
    <input type="text" id="city" name="city" class="ftr-field__entry ftr-js-field__entry" value="{{ city }}" required>
    <span class="ftr-field__text">{{ entry_city }}</span>
    {% if error_city %}
      <span class="ftr-field__error">{{ error_city }}</span>
    {% endif %}
  </label>
  <label class="ftr-field {{ (error_postcode) ? 'error' : '' }}">
    <input type="number" id="postcode" name="postcode" class="ftr-field__entry ftr-js-field__entry" value="{{ postcode }}" maxlength="8">
    <span class="ftr-field__text">{{ entry_postcode }}</span>
    {% if error_postcode %}
      <span class="ftr-field__error">{{ error_postcode }}</span>
    {% endif %}
  </label>

  <input type="hidden" name="country_id" value="{{ country_id }}">

  <label for="select_zone_id" class="ftr-select ftr-js-select">
    <input class="ftr-select__entry ftr-js-select__entry" type="text" name="" value="{{ zone_name }}" id="select_zone_id" disabled readonly>
    <span class="ftr-select__text">{{ entry_zone }}</span>
    <input class="ftr-js-select__value" type="hidden" name="zone_id" value="{{ zone_id }}">
    <div class="ftr-select__content">
      {% for state in states %}
        <span class="ftr-select__content__item ftr-js-select__content__item ftr-js-ripple-effect" data-value="{{ state.zone_id }}" {{ (state.zone_id == zone_id) ? 'data-selected="true"' : '' }}>{{ state.name }}</span>
      {% endfor %}
    </div>
  </label>
</div>
