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

{% if display_cpf is defined or tipo_pessoa ==  tipo_pessoas.Tp_Fisico %}
  <label class="ftr-field">
    <input type="text" class="ftr-field__entry ftr-js-field__entry mask-cpf" name="cpf" value="{{ cpf }}" required>
    <span class="ftr-field__text">{{ text_cpf }}</span>
  </label>
{% endif %}

{% if tipo_pessoa == tipo_pessoas.Tp_Juridico %}
  <label class="ftr-field">
    <input type="text" class="ftr-field__entry ftr-js-field__entry mask-cnpj" name="cnpj" value="{{ cnpj }}" 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" name="razao_social" value="{{ razao_social }}" required>
    <span class="ftr-field__text">{{ text_razao_social }}</span>
  </label>
{% endif %}

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

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

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

  <label class="ftr-field">
    <input type="text" class="ftr-field__entry ftr-js-field__entry" name="address_1"
           value="{{ shipping_address_1 }}" {{ (shipping_address_1 is not empty) ? 'readonly' : '' }} required>
    <span class="ftr-field__text">{{ text_endereco }}</span>
  </label>

  <label class="ftr-field">
    <input type="text" class="ftr-field__entry ftr-js-field__entry mask-number" name="numero"
           value="{{ shipping_numero }}" {{ (shipping_numero is not empty) ? 'readonly' : '' }} 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 }}" {{ (shipping_complemento is not empty) ? 'readonly' : '' }}>
    <span class="ftr-field__text">{{ text_complemento }}</span>
  </label>

  <label class="ftr-field">
    <input type="text" class="ftr-field__entry ftr-js-field__entry" name="address_2"
           value="{{ shipping_address_2 }}" {{ (shipping_address_2 is not empty) ? 'readonly' : '' }} 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" name="" value="{{ shipping_zone }}" id="zone_id" disabled readonly>
    <span class="ftr-select__text">Estado</span>
    <input class="ftr-js-select__value" type="hidden" name="zone_id" value="{{ shipping_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 }}"
        {{ (shipping_zone_id == state.zone_id) ? 'data-selected="true"' : '' }}>{{ 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 ftr-text--grey" type="text" name="" value="{{ city }}" id="codigo_municipio"
      {{ codigo_municipio is not null ? 'readonly' : '' }} required>
    <span class="ftr-select__text">{{ text_cidade }}</span>
    <input class="ftr-js-select__value" type="hidden" name="codigo_municipio" value="{{ codigo_municipio }}">
    <div class="ftr-select__content">
      {% for city in cities %}
        <span class="ftr-select__content__item ftr-js-select__content__item ftr-js-ripple-effect"
              data-codigo-municipio="{{ city.codigo_municipio }}" data-municipio="{{ city.municipio }}"
              data-value="{{ city.codigo_municipio }}"
        {{ (codigo_municipio == city.codigo_municipio) ? 'data-selected="true"' : '' }}>{{ city.municipio }}</span>
      {% endfor %}
    </div>
  </label>

  <label for="type_payment_phone" class="ftr-select ftr-js-select written">
    <input class="ftr-select__entry ftr-js-select__entry" type="text" name="" value="{{ payment_phones_text }}" id="type_payment_phone"
           data-type-payment-phones='{{ type_payment_phones|json_encode() }}' 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="{{ numero_telefone }}" required>
    <span class="ftr-field__text">{{ text_numero_telefone }}</span>
  </label>
</div>

<script>
  if (typeof loadSpecificSources != 'undefined') {
    loadSpecificSources({
      scripts: {{ scriptsApp }},
    });
  }
</script>