<form id="form-address" class="js-address">
  <div class="row small-space-xs">
    <div class="col-xs-12">
      <label class="field field-medium">
              <span class="field-label">
                <span class="required">*</span>
                {{ entry_firstname }}
              </span>
        <input class="field-entry" id="firstname" type="text" name="firstname" value="" placeholder="Digite o nome"
               maxlength="96" required>
      </label>
    </div>
    <div class="col-xs-12">
      <label class="field field-medium">
              <span class="field-label">
                <span class="required">*</span>
                {{ entry_lastname }}
              </span>
        <input class="field-entry" id="lastname" type="text" name="lastname" value="" placeholder="Digite o sobrenome"
               maxlength="96" required>
      </label>
    </div>
    <div class="col-xs-12">
      <label class="field field-medium">
        <div class="flex between-xs">
                <span class="field-label">
                  <span class="required">*</span>
                  {{ entry_postcode }}
                  <img class="js-postcode-loading hidden" src="assets/img/loading-black.svg" width="14" height="14">
                </span>
          <span class="text-primary text-small js-postcode-address cursor-pointer">Não sei meu cep</span>
        </div>
        <input class="field-entry numeric js-postcode-search mask-cep" id="postcode" type="text" name="postcode" value=""
               placeholder="Digite o CEP" maxlength="96" required>
      </label>
    </div>
    <div class="col-xs-12 js-postcode-content hidden">
      <div class="content-box">
        <div class="row small-space-xs">
          <div class="col-xs-12">
            <label class="field field-medium">
              <span class="field-label">Local</span>
              <input class="field-entry" id="apelido" type="text" name="apelido" value=""
                     placeholder="Ex: Casa, Trabalho, etc" maxlength="80">
            </label>
          </div>
          <div class="col-xs-12">
            <label class="field field-medium">
                    <span class="field-label">
                      <span class="required">*</span>
                      {{ entry_address_1 }}
                    </span>
              <input class="field-entry address_1" id="address_1" type="text" name="address_1" value="" placeholder="Digite a Rua"
                     maxlength="70" required>
              <input type="hidden" class="tipo_logradouro" name="tipo_logradouro" value="">
              <input type="hidden" class="logradouro" name="logradouro" value="">
              <input type="hidden" class="city" name="city" value="">
            </label>
          </div>
          <div class="col-xs-12">
            <label class="field field-medium">
                    <span class="field-label">
                      <span class="required">*</span>
                      Número
                    </span>
              <input class="field-entry numeric" id="numero" type="text" name="numero" value=""
                     placeholder="Digite o numero" maxlength="6" required>
            </label>
          </div>
          <div class="col-xs-12">
            <label class="field field-medium">
                    <span class="field-label">
                      Complemento
                    </span>
              <input class="field-entry" id="complemento" type="text" name="complemento" value=""
                     placeholder="Ex: Ap. 105" maxlength="60">
            </label>
          </div>
          <div class="col-xs-12">
            <label class="field field-medium">
                    <span class="field-label">
                      <span class="required">*</span>
                      {{ entry_address_2 }}
                    </span>
              <input class="field-entry address_2" id="address_2" type="text" name="address_2" value=""
                     placeholder="Digite o bairro" maxlength="50" required>
            </label>
          </div>

          <div class="col-xs-12">
            <label class="field field-medium">
                    <span class="field-label">
                      <span class="required">*</span>
                      {{ entry_zone }}
                    </span>
              <select class="js-city-search field-entry zone_id" id="zone_id" name="zone_id" required>
                <option value="">{{ text_select }}</option>
                {% for key, state in states %}
                  <option value="{{ state.zone_id }}" {% if zone_id == state.zone_id %}selected{% endif %}>
                    {{ state.name }}
                  </option>
                {% endfor %}
              </select>
            </label>
          </div>

          <div class="col-xs-12">
            <label class="field field-medium">
                    <span class="field-label">
                      <span class="required">*</span> {{ entry_city }}
                    </span>
              <select class="field-entry codigo-municipio codigo_municipio" id="codigo_municipio"
                      name="codigo_municipio" required>
              </select>
            </label>
          </div>

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