<input class="ftr-check js-checkbox-holder" id="holder" type="checkbox" name="isHolder" checked>
<label class="ftr-check-label" for="holder" data-tipo-pessoa='{{ Type_CadastroPessoaJs|json_encode() }}'>
  <span class="ftr-check-label__text">{{ text_holder }}
  </span>
</label>

<hr class="ftr-out-space--b-xl">
<div class="js-holder-content ftr-hidden">
  <span class="ftr-text--l ftr-text--dark ftr-text--bold ftr-block">{{ text_info }}</span>
  <input class="ftr-radio" id="fisica" type="radio" name="pessoa" value="{{ Type_CadastroPessoa.Tp_Fisico }}" checked>
  <label class="ftr-radio-label ftr-block" for="fisica">
    <span class="ftr-radio-label__text">{{ text_fisica }}</span>
  </label>
  <input class="ftr-radio" id="juridica" type="radio" name="pessoa" value="{{ Type_CadastroPessoa.Tp_Juridico }}">
  <label class="ftr-radio-label ftr-block" for="juridica">
    <span class="ftr-radio-label__text">{{ text_juridica }}</span>
  </label>

  <label class="ftr-field">
    <input type="text" class="ftr-field__entry ftr-js-field__entry" name="email" value="" required>
    <span class="ftr-field__text">{{ text_email }}</span>
  </label>

  <label class="ftr-field js-content-fisica ftr-hidden">
    <input type="text" class="ftr-field__entry ftr-js-field__entry mask-cpf" name="cpf" value="" required>
    <span class="ftr-field__text">{{ text_cpf }}</span>
  </label>

  <label class="ftr-field js-content-juridica ftr-hidden">
    <input type="text" class="ftr-field__entry ftr-js-field__entry mask-cnpj" name="cnpj" value="" required>
    <span class="ftr-field__text">{{ text_cnpj }}</span>
  </label>

  <label class="ftr-field">
    <input type="text" class="ftr-field__entry ftr-js-field__entry mask-date" name="data_nascimento" value="" required>
    <span class="ftr-field__text js-label-fisica-juridica">{{ text_date }}</span>
  </label>

  <label for="type_payment_phone" class="ftr-select ftr-js-select written">
    <input class="ftr-select__entry ftr-js-select__entry" type="text" id="type_payment_phone"
           data-type-payment-phones='{{ type_payment_phones|json_encode() }}' value="{{ payment_phones_text }}" readonly>
    <span class="ftr-select__text">{{ text_tipo_telefone }}</span>
    <input class="ftr-js-select__value ftr-js-telefone" type="hidden" name="tipo_telefone" value="{{ payment_phones_select }}">
    <div class="ftr-select__content">
      {% for payment_phone in payment_phones %}
        <span class="ftr-select__content__item ftr-js-select__content__item ftr-js-ripple-effect"
              data-value="{{ payment_phone.value }}"
          {{ (payment_phone.select is not null) ? 'data-selected="true"' : '' }}>{{ payment_phone.description }}</span>
      {% endfor %}
    </div>
  </label>

  <label class="ftr-field">
    <input type="text" class="ftr-field__entry ftr-js-field__entry" name="numero_telefone" value="" required>
    <span class="ftr-field__text">{{ text_numero_telefone }}</span>
  </label>

  <div class="js-address">
    <label class="ftr-field">
      <input type="text" id="postcode" name="postcode" class="ftr-field__entry ftr-js-field__entry mask-cep js-postcode-search postcode"
             maxlength="10" value required>
      <span class="ftr-field__text">{{ text_cep }}</span>
    </label>

    <div class="js-postcode-content ftr-h--full ftr-none">

      <label class="ftr-field">
        <input type="text" class="ftr-field__entry ftr-js-field__entry address_1" id="address_1" name="address_1"
               value="{{ shipping_address_1 }}" required>
        <span class="ftr-field__text">{{ text_endereco }}</span>
        <input type="hidden" class="tipo_logradouro" name="tipo_logradouro" value="{{ tipo_logradouro }}">
        <input type="hidden" class="logradouro" name="logradouro" value="{{ logradouro }}">
        <input type="hidden" class="city" name="city" value="{{ city }}">
      </label>

      <label class="ftr-field">
        <input type="text" class="ftr-field__entry ftr-js-field__entry mask-int" id="numero" name="numero" required>
        <span class="ftr-field__text">{{ text_numero }}</span>
      </label>

      <label class="ftr-field">
        <input type="text" class="ftr-field__entry ftr-js-field__entry" name="complemento"
               value="{{ shipping_complemento }}">
        <span class="ftr-field__text">{{ text_complemento }}</span>
      </label>

      <label class="ftr-field">
        <input type="text" class="ftr-field__entry ftr-js-field__entry address_2" id="address_2" name="address_2"
               value="{{ shipping_address_2 }}" required>
        <span class="ftr-field__text">{{ text_bairro }}</span>
      </label>

      <label for="zone_id" class="ftr-select ftr-js-select ftr-js-select--disabled written">
        <input class="ftr-select__entry ftr-js-select__entry ftr-text--grey" type="text" id="zone_id" disabled readonly>
        <input class="js-city-search ftr-js-select__value zone_id" type="hidden" name="zone_id">
        <span class="ftr-select__text">Estado</span>
        <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.name }}</span>
          {% endfor %}
        </div>
      </label>

      <label for="codigo_municipio" class="ftr-select ftr-js-select ftr-js-select--disabled written">
        <input class="ftr-select__entry ftr-js-select__entry city-name" type="text" id="city" disabled readonly>
        <input class="ftr-js-select__value ftr-hidden codigo-municipio codigo_municipio" name="codigo_municipio" required>
        <span class="ftr-select__text">{{ text_cidade }}</span>
        <div class="ftr-select__content cities-list"></div>
      </label>

      <input type="hidden" name="country_id" value="30">
    </div>
  </div>

</div>
<script>
  language.pages.payment_address = {{languageApp}};
  if (typeof loadSpecificSources != 'undefined') {
    loadSpecificSources({
      scripts: {{ scriptsApp }},
    });
  }
</script>