{{ header }}
<header
  class="background-white bottom-margin-large"
  data-info='{{ languageForJS|json_encode() }}'
>
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large flex between-xs middle-xs js-header-notifications">
          <div>
            <span class="text-x-large text-dark">{{ heading_title }}</span>
            <div class="adm-breadcrumb">
              {% for breadcrumb in breadcrumbs %}
                <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
                <a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
              {% endfor %}
            </div>
          </div>
          <div class="flex flex-row middle-xs">
            <a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
              <span>{{ button_cancel }}</span>
            </a>
            {% if userFuturaApp == false %}
              <button class="btn-default btn-medium btn-primary js-submit-main-form">
                <span>{{ button_save }}</span>
              </button>
            {% endif %}
          </div>
          {% if error_warning %}
            <div class="warning full-width">{{ error_warning }}</div>
          {% endif %}
        </div>
      </div>
      <div class="col-xs-12">
        <div class="flex js-tabs" id="tab-info"></div>
      </div>
    </div>
  </div>
</header>
<form action="{{ action }}" method="post" class="js-main-form">
  <div class="container-fluid" data-tabs-id="tab-info">

    <div class="row hidden" data-tab="{{ tab_general }}">
      <div class="col-xs-12 bottom-padding-small">
        <span class="text-x-large text-dark">{{ text_info_access }}</span>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="content-box background-white shadow-small padding-large">
          <div class="row">

            <div class="col-xs-12">
              <div class="content-box">
                <label class="field field-medium">
                  <span class="field-label required">
                    {{ entry_email }}
                    <input class="field-entry mask-alpha-no-spaces" type="email" name="email" value="{{ email }}" placeholder="{{ text_email_placeholder }}" required maxlength="96">
                  </span>
                </label>
                {% if error_email %}
                  <span class="text-error text-small">{{ error_email }}</span>
                {% endif %}
              </div>
            </div>
            <div class="col-xs-6">
              <div class="content-box">
                <label class="field field-medium">
                  <span class="field-label required">
                    {{ entry_password }}
                    <input id="nova_senha" class="field-entry" type="password" name="password" value="{{ password }}" required minlength="4" maxlength="20">
                  </span>
                </label>
                {% if error_password %}
                  <span class="text-error text-small">{{ error_password }}</span>
                {% endif %}
              </div>
            </div>
            <div class="col-xs-6">
              <div class="content-box">
                <label class="field field-medium">
                  <span class="field-label required">
                     {{ entry_confirm }}
                     <input id="confirmar_nova_senha" class="field-entry" type="password" name="confirm" value="{{ confirm }}" required minlength="4" maxlength="20">
                  </span>
                </label>
                {% if error_confirm %}
                  <span class="text-error text-small">{{ error_confirm }}</span>
                {% endif %}
              </div>
            </div>
            <div class="col-xs-12">
              <div class="content-box">
                <label class="checkbox checkbox-medium">
                  <input class="checkbox-entry" type="checkbox" name="newsletter" value="1" {{ (newsletter) ? 'checked="checked"' : '' }}>
                  <span class="checkbox-text">{{ entry_newsletter }}</span>
                </label>
              </div>
            </div>

          </div>
        </div>
      </div>
      {% if customer_lock %}
      <div class="col-xs-4 col-md-4">
        <div class="content-box background-white shadow-small padding-large">
          <div class="row">
            <div class="col-xs-12 bottom-padding-small">
              <span class="text-large text-dark">{{ text_information_lock }}</span>
            </div>
            <div class="col-xs-12 bottom-padding-small">
              <span class="text-small text-dark text-justify">{{ text_limiter_information }}</span>
            </div>

            <button class="btn-default btn-error full-width btn-medium js-costumer-unlock"
                    title="{{ column_unlock }}" data-customer-id="{{ customer_id }}">
              <span>Desbloquear <i class="fa-solid fa-unlock"></i></span>
            </button>
          </div>
        </div>
      </div>
      {% endif %}
    </div>

    <div class="row hidden" data-tab="{{ tab_acount }}">
      <div class="col-xs-12 bottom-padding-small">
        <span class="text-x-large text-dark">{{ text_your_details }}</span>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="content-box background-white shadow-small padding-large">
          <div class="row">

            {% if tipo_pessoa == tipo_pessoa_ambos or tipo_pessoa =='' %}
              <div class="col-xs-12">
                <div class="content-box">
                  <label class="field field-medium">
                    <div class="select_options">
                      <input type="radio" id="fisica" name="pessoa" value="F"  {{ ((pessoa == 'F') or (pessoa == '')) ? 'checked' : '' }} >
                      <label for="fisica" class="text-small">{{ text_fisica }}</label>
                      <input type="radio" id="juridica" name="pessoa" value="J" {{ ((pessoa == 'J')) ? 'checked' : '' }}>
                      <label for="juridica" class="text-small">{{ text_juridica }}</label>
                    </div>
                  </label>
                </div>
              </div>
            {% elseif tipo_pessoa == tipo_pessoa_juridica %}
              <input class="hidden" type="radio" id="juridica" name="pessoa" checked value="J">
            {% elseif tipo_pessoa == tipo_pessoa_fisica %}
              <input class="hidden" type="radio" id="fisica" name="pessoa" checked value="F">
            {% endif %}

            <div class="col-xs-6">
              <div class="content-box">
                <label class="field field-medium">
                  <span class="field-label required">
                    {{ entry_firstname }}
                    <input type="text" id="firstname" class="field-entry" name="firstname" value="{{ firstname }}" maxlength="32" required>
                  </span>
                </label>
                {% if error_firstname %}
                  <span class="text-error text-small">{{ error_firstname }}</span>
                {% endif %}
              </div>
            </div>
            <div class="col-xs-6">
              <div class="content-box">
                <label class="field field-medium">
                  <span class="field-label required">
                    {{ entry_lastname }}
                    <input type="text" id="lastname" class="field-entry" name="lastname" value="{{ lastname }}" maxlength="32" required>
                  </span>
                </label>
                {% if error_lastname %}
                  <span class="text-error text-small">{{ error_lastname }}</span>
                {% endif %}
              </div>
            </div>

            {% if (tipo_pessoa == tipo_pessoa_juridica) or (tipo_pessoa == tipo_pessoa_ambos) %}
              <div class="col-xs-12 pessoa_juridica">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label required">
                      {{ entry_razao }}
                      <input type="text" class="field-entry" name="razao_social" id="razao_social" value="{{ razao_social }}" required>
                    </span>
                  </label>
                  {% if error_razao_social %}
                    <span class="text-error text-small">{{ error_razao_social }}</span>
                  {% endif %}
                </div>
              </div>

              <div class="col-xs-6 pessoa_juridica">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label">{{ text_contribute_icms }}</span>
                    <select class="field-entry" name="contribuinte" id="contribuinte" {{ (disable_contribuinte_pj) ? 'readonly="true"': '' }}>
                      {% for contribuintes in contribuinte %}
                        <option value="{{ contribuintes.id }}" {{ contribuintes.status }}>
                          {{ contribuintes.name }}
                        </option>
                      {% endfor %}
                    </select>
                  </label>
                </div>
              </div>

              <div class="col-xs-6 pessoa_juridica">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label">{{ entry_ie }}</span>
                    <input type="text" class="field-entry" maxLength="20" name="inscricao_estadual" id="inscricao_estadual" {{ (disable_ie_pj) ? 'readonly="true"': '' }}  value="{{ inscricao_estadual }}" placeholder="{{ text_ie_placeholder }}">
                  </label>
                  {% if error_inscricao_estadual %}
                    <span class="text-error text-small">{{ error_inscricao_estadual }}</span>
                  {% endif %}
                </div>
              </div>
            {% endif %}

            {% if (tipo_pessoa == tipo_pessoa_fisica) or (tipo_pessoa == tipo_pessoa_ambos) %}
              <div class="col-xs-6 pessoa_fisica">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label required">
                      {{ entry_cpf }}
                      <input type="text" class="field-entry mask-cpf" id="cpf" name="cpf" value="{{ cpf }}" {{ (displayinfo) ? 'readonly="true"': '' }} placeholder="{{ text_cpf_placeholder }}" required>
                    </span>
                  </label>
                  {% if error_cpf %}
                    <span class="text-error text-small">{{ error_cpf }}</span>
                  {% endif %}
                </div>
              </div>
              {% if fields_register_brazil_status_rg %}
                <div class="col-xs-6 pessoa_fisica">
                  <div class="content-box">
                    <label class="field field-medium">
                      <span class="field-label">{{ entry_rg }}</span>
                      <input type="text" class="field-entry" maxLength="10" name="rg" id="rg" value="{{ rg }}" placeholder="{{ text_rg_placeholder }}">
                    </label>
                  </div>
                </div>
              {% endif %}
            {% endif %}

            {% if (tipo_pessoa == tipo_pessoa_juridica) or (tipo_pessoa == tipo_pessoa_ambos) %}
              <div class="col-xs-6 pessoa_juridica">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label required">
                      {{ entry_cnpj }}
                      <input type="text" class="field-entry mask-cnpj" name="cnpj" id="cnpj" value="{{ cnpj }}" {{ (displayinfo) ? 'readonly="true"': '' }} placeholder="{{ text_cnpj_placeholder }}" required>
                    </span>
                  </label>
                  {% if error_cnpj %}
                    <span class="text-error text-small">{{ error_cnpj }}</span>
                  {% endif %}
                </div>
              </div>
              <div class="col-xs-6 pessoa_juridica">
                <div class="content-box">
                  <label class="field field-medium">
                  <span class="field-label">{{ entry_perfil }}</span>
                  <select class="field-entry" name="perfil" {{ (disable_perfil_pj) ? 'readonly="true"': '' }}>
                    {% for perfils in perfil %}
                     <option value="{{ perfils.id }}" {{ perfils.status }}>
                     {{ perfils.name }}
                     </option>
                    {% endfor %}
                  </select>
                  </label>
                </div>
              </div>
            {% endif %}

            <div class="col-xs-6">
              <div class="content-box">
                  <label class="field field-medium">
                  <span class="field-label {{ (fields_register_brazil_status_telefone) ? 'required' : '' }}">{{ entry_telephone }}</span>
                    <input type="tel" class="field-entry mask-phone" name="telephone" value="{{ telephone }}" placeholder="{{ text_telephone_placeholder }}" maxlength="32" {{ (fields_register_brazil_status_telefone) ? 'required' : '' }}>
                  </label>
                  {% if error_telephone %}
                    <span class="text-error text-small">{{ error_telephone }}</span>
                  {% endif %}
              </div>
            </div>
            {% if fields_register_brazil_status_telefone2 %}
              <div class="col-xs-6">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label">{{ entry_fax }}</span>
                    <input type="tel" class="field-entry mask-phone" name="fax" value="{{ fax }}" placeholder="{{ text_fax_placeholder }}" maxlength="32">
                  </label>
                </div>
              </div>
            {% endif %}
            <div class="col-xs-6">
              <div class="content-box">
                <label class="field field-medium">
                  <span class="field-label {{ (fields_register_brazil_status_celular) ? 'required' : '' }}">{{ entry_celular }}</span>
                  <input type="tel" class="field-entry mask-celular" id="celular" name="celular" value="{{ celular }}" placeholder="{{ text_celular_placeholder }}" maxlength="32" {{ (fields_register_brazil_status_celular) ? 'required' : '' }} >
                </label>
                {% if error_celular %}
                  <span class="text-error text-small">{{ error_celular }}</span>
                {% endif %}
              </div>
            </div>

            {% if (tipo_pessoa == tipo_pessoa_fisica) or (tipo_pessoa == tipo_pessoa_ambos) %}
              {% if fields_register_brazil_status_sexo %}
                <div class="col-xs-6 pessoa_fisica">
                  <div class="content-box">
                    <span class="visible-block text-dark text-small text-bold">{{ entry_sex }}</span>
                    <label class="radio radio-medium radio-inline">
                      <input class="radio-entry" type="radio" name="sexo" value="m" {{ (sexo == 'm') ? 'checked' : '' }}>
                      <span class="radio-text">{{ text_male }}</span>
                    </label>
                    <label class="radio radio-medium radio-inline">
                      <input class="radio-entry" type="radio" name="sexo" value="f" {{ (sexo == 'f') ? 'checked' : '' }}>
                      <span class="radio-text">{{ text_female }}</span>
                    </label>
                    <label class="radio radio-medium radio-inline">
                      <input class="radio-entry" type="radio" name="sexo" value="o" {{ ((sexo == 'o') or (sexo == '')) ? 'checked' : '' }}>
                      <span class="radio-text">{{ text_other }}</span>
                    </label>
                  </div>
                </div>
              {% endif %}
              {% if fields_register_brazil_status_data_nascimento %}
                <div class="col-xs-6 pessoa_fisica">
                  <div class="content-box">
                    <label class="field field-medium">
                      <span class="field-label {{ (fields_register_brazil_status_data_nascimento_required) ? 'required' : '' }}">{{ entry_date_birth }}</span>
                      <input type="text" class="field-entry mask-date" name="data_nascimento" value="{{ data_nascimento }}" placeholder="{{ text_date_birth_placeholder }}">
                    </label>
                    {% if error_data_nascimento %}
                      <span class="text-error text-small">{{ error_data_nascimento }}</span>
                    {% endif %}
                  </div>
                </div>
              {% endif %}
            {% endif %}

            <div class="col-xs-6">
              <div class="content-box">
                <label class="field field-medium">
                  <span class="field-label">{{ entry_customer_group }}</span>
                  <select class="field-entry" name="customer_group_id">
                    {% for customer_group in customer_groups %}
                      {% if customer_group.customer_group_id == customer_group_id %}
                        <option value="{{ customer_group.customer_group_id }}" selected="selected">{{ customer_group.name }}</option>
                      {% else %}
                        <option value="{{ customer_group.customer_group_id }}">{{ customer_group.name }}</option>
                      {% endif %}
                    {% endfor %}
                  </select>
                </label>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="col-xs-12 col-md-4">
        <div class="content-box background-white shadow-small padding-large">
          <label class="field field-medium">
            <span class="field-label">{{ entry_status }}</span>
            <select class="field-entry field-entry-medium" name="status">
              {% if status %}
                <option value="1" selected="selected">{{ text_enabled }}</option>
                <option value="0">{{ text_disabled }}</option>
              {% else %}
                <option value="1">{{ text_enabled }}</option>
                <option value="0" selected="selected">{{ text_disabled }}</option>
              {% endif %}
            </select>
          </label>
        </div>
      </div>

    </div>

    <div class="row hidden" data-tab="{{ tab_adress }}">
      <div id="address-tab">
        {% set address_row = 1 %}
        {% for address in addresses %}

          <div class="col-xs-12 col-md-8">
            <div class="content-box vtabs-content">
              <div class="row">
                <div class="col-xs-12">
                  <div id="address-{{ address_row }}" class="top-padding-medium flex middle-xs">
                    <span class="count-shipping-address text-x-large text-dark right-padding-medium">Endereço de entrega </span>
                    <button type="button" class="btn btn-default btn-error btn-small padding-small js-remove-row"><i class="fas fa-times"></i></button>
                  </div>
                </div>
                <div id="tab-address-{{ address_row }}" class="col-xs-12 js-address">
                  <div class="content-box background-white shadow-small padding-large">

                    <div class="row">
                      <input type="hidden" name="address[{{ address_row }}][address_id]" value="{{ address.address_id }}" />

                      <div class="col-xs-12">
                        <div class="content-box">
                          <label class="checkbox checkbox-medium">
                            <input class="checkbox-entry default-address" type="checkbox" name="address[{{ address_row }}][default]" value="{{ address_row }}" {{ ((address.address_id == address_id) or not addresses) ? 'checked="checked"' : '' }}>
                            <span class="checkbox-text">{{ entry_default }}</span>
                          </label>
                        </div>
                      </div>

                      <div class="col-xs-12">
                        <div class="content-box">
                          <label class="field field-medium">
                            <span class="field-label required">
                              {{ entry_firstname }}
                            </span>
                            <input type="text" class="field-entry"  name="address[{{ address_row }}][firstname]" value="{{ address.firstname }}" maxlength="32" required>
                          </label>
                          {% if error_address_firstname[address_row] is defined %}
                            <span class="text-error">{{ error_address_firstname[address_row] }}</span>
                          {% endif %}
                        </div>
                      </div>
                      <div class="col-xs-12">
                        <div class="content-box">
                          <label class="field field-medium">
                            <span class="field-label required">
                              {{ entry_lastname }}
                            </span>
                            <input type="text" class="field-entry" name="address[{{ address_row }}][lastname]" value="{{ address.lastname }}" maxlength="32" required>
                          </label>
                          {% if error_address_lastname[address_row] is defined %}
                            <span class="error">{{ error_address_lastname[address_row] }}</span>
                          {% endif %}
                        </div>
                      </div>

                      <div class="col-xs-12 col-md-6">
                        <div class="content-box">
                          <div class="flex between-xs">
                            <label class="field field-medium">
                              <span class="field-label required postcode-required">CEP
                                <span class="vertical-middle">
                                  <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 pull-right">Não sei meu cep</span>
                              </span>
                              <input type="text" class="field-entry mask-cep js-postcode-search postcode" name="address[{{ address_row }}][postcode]" value="{{ address.postcode }}" placeholder="{{ text_postcode_placeholder }}" class="numeric" />
                            </label>
                          </div>
                        </div>
                      </div>

                      <div class="col-xs-12 col-md-6">
                        <div class="content-box">
                          <label class="field field-medium">
                            <span class="field-label">Local</span>
                            <input type="text" class="field-entry apelido" name="address[{{ address_row }}][apelido]" value="{{ address.apelido }}" placeholder="{{ text_apelido_placeholder }}" />
                          </label>
                          {% if error_address_apelido[address_row] is defined %}
                            <span class="text-error">{{ error_address_apelido[address_row] }}</span>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                    <div class="row js-postcode-content">
                      <div class="col-xs-12">
                        <div class="content-box top-margin-medium">
                          <label class="field field-medium">
                            <span class="field-label required">
                              {{ entry_address_1 }}
                            </span>
                            <input {{ ( not error_address_address_1[address_row] is defined) ? 'readonly' : '' }} type="text" class="field-entry address_1" name="address[{{ address_row }}][address_1]" value="{{ address.address_1 }}" />
                            <input type="hidden" class="tipo_logradouro" name="address[{{ address_row }}][tipo_logradouro]" value="{{ address.tipo_logradouro }}" />
                            <input type="hidden" class="logradouro" name="address[{{ address_row }}][logradouro]" value="{{ address.logradouro }}" />
                            <input type="hidden" class="city" name="address[{{ address_row }}][city]" value="{{ address.city }}" />
                          </label>
                          {% if error_address_address_1[address_row] is defined %}
                            <span class="error">{{ error_address_address_1[address_row] }}</span>
                          {% endif %}
                        </div>
                      </div>

                      <div class="col-xs-6">
                        <div class="content-box">
                          <label class="field field-medium">
                            <span class="field-label required">
                              Número
                            </span>
                            <input type="text" class="field-entry mask-number numero" name="address[{{ address_row }}][numero]" value="{{ address.numero }}" placeholder="{{ text_number_placeholder }}" />
                          </label>
                          {% if error_address_numero[address_row] is defined %}
                            <span class="error">{{ error_address_numero[address_row] }}</span>
                          {% endif %}
                        </div>
                      </div>

                      <div class="col-xs-6">
                        <div class="content-box">
                          <label class="field field-medium">
                            <span class="field-label">Complemento</span>
                          </label>
                          <input type="text" class="field-entry complemento" name="address[{{ address_row }}][complemento]" value="{{ address.complemento }}" placeholder="{{ text_complemento_placeholder }}" maxlength="60"/>
                            {% if error_address_complemento[address_row] is defined %}
                              <span class="error">{{ error_address_complemento[address_row] }}</span>
                            {% endif %}
                        </div>
                      </div>

                      <div class="col-xs-12">
                        <div class="content-box">
                          <label class="field field-medium">
                            <span class="field-label required">
                              {{ entry_address_2 }}
                            </span>
                          </label>
                          <input {{ ( not error_address_address_2[address_row] is defined) ? 'readonly' : '' }} type="text" class="field-entry address_2" name="address[{{ address_row }}][address_2]" value="{{ address.address_2 }}" />
                          {% if error_address_address_2[address_row] is defined %}
                            <span class="text-error">{{ error_address_address_2[address_row] }}</span>
                          {% endif %}
                        </div>
                      </div>

                    <div class="col-xs-6">
                        <div class="content-box">
                          <label class="field field-medium">
                            <span class="field-label required">
                              {{ entry_zone }}
                            </span>
                            <select {{ ( not error_address_zone[address_row] is defined) ? 'readonly' : '' }} name="address[{{ address_row }}][zone_id]" data-codigo-municipio="{{address.codigo_municipio}}" data-city="{{ address.city }}"  class="field-entry zone_id js-city-search">
                              {% for key, state in states %}
                              <option value="{{ state.zone_id }}" {{ (state.zone_id == address.zone_id) ? ' selected="selected"' : '' }}>{{ state.name }}</option>
                              {% endfor %}
                            </select>
                          </label>
                          {% if error_address_zone[address_row] is defined %}
                            <span class="text-error">{{ error_address_zone[address_row] }}</span>
                          {% endif %}
                          <input type="hidden" name="address[{{ address_row }}][country_id]" value="{{ country_id }}">
                        </div>
                      </div>

                      <div class="col-xs-6">
                        <div class="content-box">
                          <label class="field field-medium">
                            <span class="field-label required">
                              {{ entry_city }}
                            </span>
                            <select {{ ( not error_address_city[address_row] is defined) ? 'readonly' : '' }} class="field-entry codigo-municipio codigo_municipio js-codigo-municipio" name="address[{{ address_row }}][codigo_municipio]">
                              <option value="">{{ (address.city is defined) ? address.city : text_select }}</option>
                              {% for city in cities %}
                                <option data-codigo-municipio="{{city.codigo_municipio}}" data-municipio="{{city.municipio}}" value="{{ city.codigo_municipio }}" {{ (address.city == city.codigo_municipio) ? ' selected="selected"' : '' }}>{{ city.municipio }}</option>
                              {% endfor %}
                            </select>
                          </label>
                          {% if error_address_city[address_row] is defined %}
                            <span class="text-error">{{ error_address_city[address_row] }}</span>
                          {% endif %}
                        </div>
                      </div>

                    </div>

                  </div>
                </div>
              </div>
            </div>

          </div>

        {% set address_row = address_row + 1 %}
        {% endfor %}
      </div>
      <div class="col-xs-12">
        <div class="content-box">
          <button type="button" id="address-add" class="btn-default btn-medium btn-primary">
            <span>{{ button_add_address }}</span>
          </button>
        </div>
      </div>
    </div>

    {% if customer_id %}
      <div id="tab-history" class="row hidden" data-tab="{{ tab_history }}">
        <div class="col-xs-12 bottom-padding-small">
          <span class="text-x-large text-dark">{{ tab_history }}</span>
        </div>

        <div id="history" class="col-xs-12 col-md-8"></div>

        <div class="col-xs-12 col-md-4">
          <div class="content-box background-white shadow-small padding-large">
            <label class="field field-medium">
              <span class="field-label">{{ entry_comment }}</span>
              <textarea name="comment" cols="40" rows="5" class="field-entry"></textarea>
            </label>
            <button type="button" id="button-history" class="btn-default btn-medium btn-primary top-margin-medium">
              <span>{{ button_add_history }}</span>
            </button>
          </div>
        </div>

      </div>
    {% endif %}

    <div class="row hidden" data-tab="{{ tab_ip }}">
      <div class="col-xs-12 bottom-padding-small">
        <span class="text-x-large text-dark">{{ tab_ip }}</span>
      </div>

      {% if ips %}
        <div class="col-xs-12 col-md-8">
          {% for ip in ips %}
            <div class="content-box background-white shadow-small hover:shadow-large bottom-margin-small">
              <div class="row no-space-xs middle-xs padding-medium">
                <div class="col-xs-4 col-md-4">
                  <a class="text-small text-dark" href="http://www.geoiptool.com/en/?IP={{ ip.ip }}" target="_blank">{{ ip.ip }}</a>
                </div>
                <div class="col-xs-2 col-md-2">
                  <a class="text-small text-dark" href="{{ ip.filter_ip }}" target="_blank">{{ ip.total }}</a>
                </div>
                <div class="col-xs-2 col-md-2">
                  <span class="text-small text-dark">{{ ip.date_added }}</span>
                </div>
                <div class="col-xs-width-auto">
                {% if ip.ban_ip %}
                  <button type="button" data-ip="{{ (ip.ip) }}" class="btn-default full-width btn-outline btn-medium js-remove-ban-ip"><span>{{ text_remove_ban_ip }}</span></button>
                {% else %}
                  <button type="button" data-ip="{{ (ip.ip) }}" class="btn-default full-width btn-outline btn-medium js-add-ban-ip"><span>{{ text_add_ban_ip }}</span></button>
                {% endif %}
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="col-xs-12 col-md-8">
          <div
            class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center">
            <span class="text-medium text-gray"> {{ text_no_results }}</span>
          </div>
        </div>
      {% endif %}

    </div>

    <div class="row hidden" data-tab="{{ tab_cart_product }}">
      <div class="col-xs-12 bottom-padding-small">
        <span class="text-x-large text-dark">{{ tab_cart_product }}</span>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="content-box">
          <div class="row">
            <div class="col-xs-12">
              {% if cartlist %}

                {% for keyTipo, cartTipo in cartlist %}
                  {% for keyLista, lista in cartTipo %}
                    <div class="js-order-by-list">

                      {% if lista.isListaEscolar %}
                        <span class="text-large text-dark visible-block top-padding-x-large">{{lista.escola}}</span>
                        <span class="text-small text-gray visible-block top-margin-x-small bottom-padding-medium">{{lista.serie}}</span>
                      {% endif %}

                      {% for keyProduto, product in lista.products %}
                          <div class="content-box background-white shadow-small bottom-margin-small">
                            <div class="row no-space-xs middle-xs padding-medium">
                              <div class="col-xs-12 col-md">
                                <div class="content-box">
                                  <div class="row x-small-space-xs middle-xs">
                                    <div class="col-xs-width-auto">
                                      <div class="content-box">
                                        <img
                                          src="{{ product.image }}"
                                          alt="{{ product.name }}"
                                          class="border-gray visible-block"
                                          id="image"
                                          width="80"
                                          height="80"
                                        />
                                      </div>
                                    </div>
                                    <div class="col-xs">
                                      <div class="content-box">
                                        <span class="text-small text-dark text-bold">{{ product.product_id }}</span>
                                        <a href="{{ product.href }}" target="_blank" class="text-small text-primary visible-block">{{ product.name }}</a>
                                        {% if product.itens_kit %}
                                          {% for itemKitKey, itemKit in product.itens_kit %}
                                            <span class="text-small text-gray visible-block">{{ itemKit.quantidade }} - {{ itemKit.descricao }}</span>
                                          {% endfor %}
                                        {% endif %}
                                        {% if futuragrade_status is defined and (futuragrade_status) %}
                                          {% if product.color_description %}
                                            <span class="text-small text-gray visible-block">Cor: {{ product.color_description }}</span>
                                          {% endif %}
                                          {% if product.size_description %}
                                            <span class="text-small text-gray visible-block">Tamanho: {{ product.size_description }}</span>
                                          {% endif %}
                                          {% if product.specification_description %}
                                            <span class="text-small text-gray visible-block">Especificação: {{ product.specification_description }}</span>
                                          {% endif %}
                                        {% endif %}
                                      </div>
                                      {% if product.brinde %}
                                        <a class="text-small top-padding-x-small visible-block" href="{{ product.brinde.href }}">
                                          <span class="text-gray text-small">{{ text_gift }}</span>
                                          <span class="text-dark text-bold text-small">{{product.brinde.product_name}}</span>
                                        </a>
                                      {% endif %}
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="col-xs-6 col-md-1">
                                <div class="content-box vertical-padding-small">
                                  <span class="text-small text-dark">{{ product.quantity }} unid.</span>
                                </div>
                              </div>
                              <div class="col-xs-6 col-md-2">
                                <div class="content-box vertical-padding-small">
                                  <span class="text-small text-dark vertical-padding-small" data-tooltip="Preço">{{ product.price }}</span>
                                </div>
                              </div>
                              <div class="col-xs-6 col-md-2">
                                <div class="content-box vertical-padding-small">
                                  <span class="text-small text-dark vertical-padding-small" data-tooltip="Total">{{ product.total }}</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        {% endfor %}
                      {% endfor %}
                    </div>
                  {% endfor %}
              {% else %}
                <div class="row">
                  <div class="col-xs-12">
                    <div
                      class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center">
                      <span class="text-medium text-gray">{{ entry_noitens }}</span>
                    </div>
                  </div>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-md-4">
        <div class="content-box background-white padding-large shadow-small">
          <div class="row nowrap-xs no-space-xs middle-xs bottom-margin-small totals-value">
            <span class="text-medium text-dark right-padding-x-small first-xs text-bold">Total de Itens</span>
            <div class="col-xs"><span class="top-border-gray top-border-dashed visible-block top-margin-x-small"></span></div>
              <span class="text-large text-dark left-padding-x-small text-nowrap">{{ totals.totalquantity is defined  ? totals.totalquantity : '0' }}</span>
          </div>
          <div class="row nowrap-xs no-space-xs middle-xs bottom-margin-small totals-value">
            <span class="text-medium text-dark right-padding-x-small first-xs text-bold">Sub-total</span>
            <div class="col-xs"><span class="top-border-gray top-border-dashed visible-block top-margin-x-small"></span></div>
            <span class="text-large text-dark left-padding-x-small text-nowrap">{{ totals.total is defined  ? totals.total : '0' }}</span>
          </div>
        </div>
      </div>
    </div>

    {% if display_mercadolivre %}
      <div id="tab-mercado-livre" class="row hidden" data-tab="{{ tab_mercado_livre }}">
        <div class="col-xs-12 bottom-padding-small">
          <span class="text-x-large text-dark">{{ tab_mercado_livre }}</span>
        </div>
        <div class="col-xs-12 col-md-8">
          <div class="content-box background-white shadow-small padding-large">
            <div class="row">

            <div class="col-xs-12">
              <div class="content-box">
                <label class="field field-medium">
                  <span class="field-label">{{ entry_email_ml }}</span>
                  <input type="text" class="field-entry" name="email_ml" value="">
                  <span class="text-small text-gray vertical-padding-small">{{ entry_email_ml_helper }}</span>
                </label>
              </div>
            </div>
            <div class="col-xs-12">
              <div class="content-box">
                <button type="button" class="btn-default btn-large btn-primary btn-email-ml">{{ button_email_ml }}</button>
              </div>
            </div>

            </div>
          </div>
        </div>
      </div>
    {% endif %}

  </div>
</form>
<script>
  var
    address_row = {{ address_row }},
    ip = "{{ ip.ip }}",
    states = {{ states|json_encode() }},
    textWait = "{{ text_wait }}",
    costumerId = {{ customer_id }},
    country_id = {{ country_id }},
    token = document.body.getAttribute('data-token');
</script>
{{ footer }}