{{ header }}
<section class="container-fluid">
  {% if content_top %}
    {{ content_top }}
  {% endif %}
  {{breadcrumbs}}
  <div class="row">
    <div class="col-md-3 hidden-md-down">
      <div class="content-box js-fixed-on-top">
        {{ account }}
      </div>
    </div>
    <div class="col-xs">
      <div class="content-box">
        <div class="flex middle-xs">
          <a href="{{ back }}" class="padding-small text-x-large text-dark">
            <i class="fas fa-angle-left" aria-hidden="true"></i>
          </a>
          <span class="heading-1">
            {{ (firstname != '') ? text_edit_address : button_new_address }} {{ (default) ? 'principal' : '' }}
          </span>
        </div>
        <form id="form-address" class="form-address js-address" action="{{ action }}" method="post" enctype="multipart/form-data">
          <div style="max-width: 480px;">
            {% if default == false %}
              <span class="visible-block text-medium text-dark top-margin-medium bottom-margin-small">{{ text_address_default }}</span>
              <div class="flex">
                <label class="radio radio-medium" style="width:72px;">
                  <input class="radio-entry" type="radio" name="default" value="1" {{ (default) ? 'checked' : '' }}>
                  <span class="radio-text">{{ text_yes }}</span>
                </label>
                <label class="radio radio-medium" style="width:72px;">
                  <input class="radio-entry" type="radio" name="default" value="0" {{ (default) ? '' : 'checked' }}>
                  <span class="radio-text">{{ text_no }}</span>
                </label>
              </div>
            {% endif %}
            <label class="field field-medium top-margin-medium field-required">
              <span class="field-label">
                {{ text_name }}
              </span>
              <input class="field-entry {{ (error_firstname) ? 'border-error' : '' }}" id="firstname" type="text" name="firstname" value="{{ firstname }}" placeholder="{{ text_name_placeholder }}" maxlength="32" required>
              {{ (error_firstname) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_firstname ~ '</span>' : '' }}
            </label>
            <label class="field field-medium top-margin-medium field-required">
              <span class="field-label">
                {{ text_last_name }}
              </span>
              <input class="field-entry {{ (error_lastname) ? 'border-error' : '' }}" id="lastname" type="text" name="lastname" value="{{ lastname }}" placeholder="{{ text_last_name_placeholder }}" maxlength="32" required>
              {{ (error_lastname) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_lastname ~ '</span>' : '' }}
            </label>
            <label class="field field-medium top-margin-medium">
              <span class="field-label">{{ text_local }}</span>
              <input class="field-entry {{ (error_apelido) ? 'border-error' : '' }}" id="apelido" type="text" name="apelido"
                value="{{ apelido }}" placeholder="{{ text_local_placeholder }} {{ text_local_description }}" minlength="3" maxlength="80" required>
              {{ (error_apelido) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_apelido ~ '</span>' : '' }}
            </label>
            <div class="top-border-gray vertical-margin-x-large"></div>
            <label class="field field-medium top-margin-medium">
              <span class="field-label">
                <span id="postcode-required" class="required">*
                </span>
                {{ text_postcode }}
                <span class="vertical-middle">
                  <img class="js-postcode-loading hidden" src="assets/img/loading-black.svg" width="14" height="14"/>
                </span>
              </span>
              <input class="field-entry {{ (error_postcode) ? 'border-error' : '' }} mask-cep js-postcode-search" type="text" name="postcode" value="{{ postcode[:5] }}-{{ postcode[5:] }}" placeholder="{{ text_postcode_placeholder }}" maxlength="96" required>
              {{ (error_postcode) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_postcode ~ '</span>' : '' }}
            </label>
            <a href="#" class="text-small visible-inline-block top-padding-small js-postcode-address">Não sei meu cep</a>
            <div class="js-postcode-content {{ (postcode_visible == false) ? ' hidden' : '' }}">
              <div class="row small-space-xs top-margin-small">
                <div class="col-xs-8">
                  <label class="field field-medium">
                    <span class="field-label">
                      <span class="required">*
                      </span>
                      {{ text_street }}
                    </span>
                    <input class="field-entry address_1 {{ (error_address_1) ? 'border-error' : '' }}" id="address_1" type="text" name="address_1"
                      value="{{ address_1 }}" placeholder="{{ text_street_placeholder }}" maxlength="70" required
                      {{ (postcode_readonly and error_address_1 == false) ? 'readonly' : '' }}>
                    <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 }}">
                    {{ (error_address_1) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_address_1 ~ '</span>' : '' }}
                  </label>
                </div>
                <div class="col-xs-4">
                  <label class="field field-medium">
                    <span class="field-label">
                      <span class="required">*</span>
                      {{ text_number }}
                    </span>
                    <input class="field-entry {{ (error_numero) ? 'border-error' : '' }} mask-int" id="numero" type="text" name="numero"
                      value="{{ numero }}" placeholder="{{ text_number_placeholder }}" maxlength="6" required>
                    {{ (error_numero) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_numero ~ '</span>' : '' }}
                  </label>
                </div>
              </div>
              <label class="field field-medium top-margin-medium">
                <span class="field-label">
                  <span class="required">*</span>
                  {{ text_neighborhood }}
                </span>
                <input class="field-entry address_2 {{ (error_address_2) ? 'border-error' : '' }}" id="address_2" type="text" name="address_2"
                  value="{{ address_2 }}" placeholder="{{ text_neighborhood_placeholder }}" required
                  {{ (postcode_readonly and error_address_2 == false) ? 'readonly' : '' }}>
                {{ (error_address_2) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_address_2 ~ '</span>' : '' }}
              </label>
              <label class="field field-medium top-margin-medium">
                <span class="field-label">{{ text_complement }}</span>
                <input class="field-entry {{ (error_complemento) ? 'border-error' : '' }}" id="complemento" type="text" name="complemento" value="{{ complemento }}" placeholder="{{ text_complement_placeholder }}" maxlength="60">
                {{ (error_complemento) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_complemento ~ '</span>' : '' }}
              </label>
              <div class="row small-space-xs top-margin-medium">
                <div class="col-xs-6">
                  <label class="field field-medium">
                    <span class="field-label">
                      <span class="required">*</span>
                      {{ text_zone }}
                    </span>
                    <select class="js-city-search field-entry zone_id {{ (error_zone) ? 'border-error' : '' }}" id="zone_id" name="zone_id" required {{ (postcode_readonly and error_zone == false) ? 'readonly' : '' }} data-codigo-municipio="{{codigo_municipio}}">
                      {% for state in states %}
                        <option value="{{ state.zone_id }}" {{ (zone_id == state.zone_id) ? 'selected="selected"' : '' }}>{{ state.name }}
                        </option>
                      {% endfor %}
                    </select>
                    <input type="hidden" name="country_id" value="{{ country_id }}">
                    {{ (error_zone) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_zone ~ '</span>' : '' }}
                  </label>
                </div>
                <div class="col-xs-6">
                  <label class="field field-medium">
                    <span class="field-label">
                      <span class="required">*</span>
                      {{ text_city }}
                    </span>
                    <select class="field-entry codigo_municipio codigo-municipio {{ (error_city) ? 'border-error' : '' }}" id="codigo_municipio" name="codigo_municipio"
                      required {{ (postcode_readonly and error_city == false) ? 'readonly' : '' }}></select>
                    {{ (error_city) ? '<span class="text-error text-small text-left top-margin-x-small visible-block">' ~ error_city ~ '</span>' : '' }}
                  </label>
                </div>
              </div>
            </div>
            <div class="top-margin-x-large">
              <button type="submit" class="btn-default btn-large">
                <span>{{ (firstname != '') ? 'Alterar endereço' : 'Cadastrar endereço' }}</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    {% if column_right %}
      <div class="col-md-3 hidden-md-down">
        {{ column_right }}
      </div>
    {% endif %}
  </div>
  {% if content_bottom %}
    {{ content_bottom }}
  {% endif %}
</section>
{{ footer }}