<span class="ftr-text--l">{{ text_checkout_shipping_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 }}"
             data-address-info='{{ address|json_encode()|e('html') }}'
            {{ (address.address_id == address_id) ? 'checked' : '' }}
            {% if address.address_2 == '' %}data-error-bairro="true"{% endif %}
      >
      <label class="ftr-radio-label ftr-block" for="{{ address.address_id }}">
        <span class="ftr-radio-label__text">
          {% if address.address_2 == '' %}<p class="ftr-text--red">Endereço incompleto, complete agora</p>{% endif %}
          <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_code }} - {{ address.country_pt }}</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="shipping_address" value="existing">
</div>

<div id="payment-new" style="display: {{ (addresses) ? 'none' : 'block' }}">
  {{ shippingAddressForm }}
</div>
<script>

   window.initPostcode($('#payment-new').context);

  $("#payment-existing").find('.ftr-radio[data-error-bairro="true"]').on('click', function(){
      $('#new-address').trigger('click');
  });


  $('.ftr-steps').on('click', '#new-address', function() {

    $(this)
      .closest('.ftr-steps__step')
      .find('#using-address')
      .val('new');
    $(this)
      .closest('.ftr-steps__step')
      .find('#payment-existing')
      .hide();
    $(this)
      .closest('.ftr-steps__step')
      .find('#payment-new')
      .show();

    $element = $("input[name='address_id']:checked");
    if ($element.data('error-bairro')) {
      $('#payment-new')
        .siblings('.ftr-text--l')
        .text('Completar Endereço');
      $('#payment-new').append(
        '<input type="hidden" id="address-update-id" name="address_update_id" value="' + $element.val() + '">'
      );

      var address_info = $element.data('address-info');

      $('.js-postcode-content').removeClass('ftr-none');
      $('input[name="firstname"]')
        .val(address_info['firstname'])
        .addClass('on');
      $('input[name="lastname"]')
        .val(address_info['lastname'])
        .addClass('on');
      $('input[name="postcode"]')
        .val(address_info['postcode'])
        .trigger('input')
        .addClass('on');
      $('input[name="apelido"]')
        .val(address_info['apelido'])
        .addClass('on');
      $('input[name="address_1"]')
        .val(address_info['address_1'])
        .addClass('on');
      $('input[name="numero"]')
        .val(address_info['numero'])
        .addClass('on');
      $('input[name="address_2"]')
        .val(address_info['address_2'])
        .addClass('on');
      $('input[name="tipo_logradouro"]')
        .val(address_info['tipo_logradouro'])
        .addClass('on');
      $('input[name="logradouro"]')
        .val(address_info['logradouro'])
        .addClass('on');
      $('input[name="city"]')
        .val(address_info['city'])
        .addClass('on');

      $('.js-city-search ftr-js-select__content__item[data-value='+address_info['zone_id']+']').attr('data-selected', 'true').siblings().removeAttr('data-selected');
      $('.js-city-search').attr('data-codigo-municipio', address_info['codigo_municipio']);
      $('.codigo_municipio').val(address_info['codigo_municipio']);
      $('.codigo_municipio').trigger('change');

    } else {
      $('.js-postcode-content').addClass('ftr-none');

      $('#payment-new')
        .siblings('.radio-text')
        .text('Quero usar um novo endereço');
      $('#address-update-id').remove();
      $('input[name="firstname"]')
        .val('')
        .removeClass('on');
      $('input[name="lastname"]')
        .val('')
        .removeClass('on');
      $('input[name="postcode"]')
        .val('')
        .removeClass('on');
      $('input[name="apelido"]')
        .val('')
        .removeClass('on');
      $('input[name="address_1"]')
        .val('')
        .removeClass('on');
      $('input[name="numero"]')
        .val('')
        .removeClass('on');
      $('input[name="address_2"]')
        .val('')
        .removeClass('on');
      $('input[name="tipo_logradouro"]')
        .val('')
        .removeClass('on');
      $('input[name="logradouro"]')
        .val('')
        .removeClass('on');
      $('input[name="city"]')
        .val('')
        .removeClass('on');

    }

  });

</script>
