<div class="row small-space-xs large-space-sm no-space-md between-xs center-xs start-sm top-margin-large">
  <div class="col-xs-6 col-sm-5 col-md-4">
    <div class="content-box text-left">
      <span id="login" class="aba-mobile-control heading-2 js-title-login">{{ text_returning_customer }} </span>
      <span id="login" class="aba-mobile-control heading-2 js-title-forgotten hidden">{{ text_recover_password }}</span>
    </div>
  </div>
  <div class="col-sm-2 hidden-md-down">
    <div class="vr full-height center-block">
    </div>
  </div>
  <div class="col-xs-6 col-sm-7 col-md-6">
    <div class="content-box text-left">
      <span id="register" class="aba-mobile-control heading-2">{{ text_create_your_account }}</span>
    </div>
  </div>
  <div class="col-xs-12 hidden-sm-up">
    <div class="content-box">
      <div class="flex bottom-margin-medium">
        <div class="aba-mobile aba-login active">
        </div>
        <div class="aba-mobile aba-register">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row medium-space-xs large-space-sm no-space-md between-xs bottom-margin-x-large">
  <div class="col-xs-12 col-sm-5 col-md-4 login aba-controlled">
    <div class="content-box rel">
      {{ login }}
      {{ forgotten }}
    </div>
  </div>
  <div class="col-sm-2 hidden-md-down">
    <div class="vr full-height center-block">
    </div>
  </div>
  <div class="col-xs-12 col-sm-7 col-md-6 register aba-controlled">
    <div class="content-box">
      <form id="form-register" class="form-register" action="{{ action }}" method="post" enctype="multipart/form-data" autocomplete="off">
        <div>
          <span class="text-small visible-block">{{ text_create_your_account_subtitle }}</span>
          {% if (fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Ambos')) or (fields_register_brazil_tipo_de_pessoa not in fields_register_brazil_tipo_de_pessoa_array) %}
          <div class="select_options top-margin-x-large bottom-margin-small">
            <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>
          {% elseif fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Juridico') %}
            <input class="hidden" type="radio" id="juridica" name="pessoa" checked value="J">
          {% elseif fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Fisico') %}
            <input class="hidden" type="radio" id="fisica" name="pessoa" checked value="F">
          {% endif %}

          <div id="info-access" class="js-accordion-control vertical-padding-medium">
            <div class="flex between-xs middle-xs">
              <span class="text-medium text-uppercase vertical-middle">{{ text_info_access }}</span>
              <span class="accordion-icon text-small"><i class="fas fa-angle-down vertical-middle text-large"></i></span>
            </div>
            <div class="text-small">
              <span class="label-email">{{ text_email }},</span>
              <span class="label-password">{{ text_password }},</span>
              <span class="label-newsletter">{{ text_newsletter_short }}</span>
            </div>
          </div>
          <div class="js-accordion-content bottom-padding-medium">
            <div class="row small-space-xs">
              <div class="col-xs-12">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label">
                      <span class="required">* </span>
                      {{ text_email }}
                    </span>
                    <input class="field-entry mask-alpha-no-spaces js-mail-verify" type="email" name="email" value="{{ email }}" placeholder="{{ text_email_placeholder }}" required maxlength="96">
                    <img src="assets/img/loading-black.svg" width="24" height="24" style="position: absolute; right:16px; top:32px;" class="hidden js-loading-email" />
                    {% if error_email %}
                      <span class="text-error text-small">{{ error_email }}</span>
                    {% endif %}
                  </label>
                </div>
              </div>
              <div class="col-xs-6">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label"><span class="required">* </span>{{ text_password }}</span>
                    <input id="nova_senha" class="field-entry" type="password" name="password" value="{{ password }}" required minlength="4" maxlength="20">
                    {% if error_password %}
                      <span class="text-error text-small">{{ error_password }}</span>
                    {% endif %}
                  </label>
                </div>
              </div>
              <div class="col-xs-6">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label"><span class="required">* </span> {{ text_confirm }}</span>
                    <input id="confirmar_nova_senha" class="field-entry" type="password" name="confirm" value="{{ confirm }}" required minlength="4" maxlength="20">
                    {% if error_confirm %}
                      <span class="text-error text-small">{{ error_confirm }}</span>
                    {% endif %}
                  </label>
                </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">{{ text_newsletter }}</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <div id="account" class="js-accordion-control vertical-padding-medium">
            <div class="flex between-xs middle-xs">
              <span class="text-medium text-uppercase vertical-middle">{{ text_your_details }}</span>
              <span class="accordion-icon text-small"><i class="fas fa-angle-down vertical-middle text-large"></i></span>
            </div>
            <div class="text-small">
              <span class="label-firstname label-razao_social">
                {{ text_firstname }},
                {% if fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Juridico') or fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Ambos') %}
                  {{ text_razao }},
                {% endif %}
              </span>
              <span class="label-lastname label-nome_fantasia">
                {{ text_lastname }},
                {% if fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Juridico') or fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Ambos') %}
                  {{ text_fantasia }},
                {% endif %}
              </span>
              <span class="label-cpf label-cnpj">
                {% if fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Fisico') or fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Ambos') %}
                  {{ text_cpf }}
                {% endif %}
                {% if fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Ambos') %}
                  /
                {% endif %}
                {% if fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Juridico') or fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Ambos') %}
                  {{ text_cnpj }}
                {% endif %}
              </span>
            </div>
          </div>
          <div class="js-accordion-content bottom-padding-medium">
            <div class="row small-space-xs">
              <div class="col-xs-6">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label"><span class="required">* </span>{{ text_firstname }}</span>
                    <input type="text" id="firstname" class="field-entry" name="firstname" value="{{ firstname }}" maxlength="32" required>
                    {% if error_firstname %}
                      <span class="text-error text-small">{{ error_firstname }}</span>
                    {% endif %}
                  </label>
                </div>
              </div>
              <div class="col-xs-6">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label"><span class="required">* </span>{{ text_lastname }}</span>
                    <input type="text" id="lastname" class="field-entry" name="lastname" value="{{ lastname }}"  maxlength="32" required>
                    {% if error_lastname %}
                      <span class="text-error text-small">{{ error_lastname }}</span>
                    {% endif %}
                  </label>
                </div>
              </div>
              {% if fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Juridico') or fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Ambos') %}
                <div class="col-xs-12 pessoa_juridica">
                  <div class="content-box">
                    <label class="field field-medium">
                      <span class="field-label"><span class="required">* </span>{{ text_razao }}</span>
                      <input type="text" class="field-entry" name="razao_social" id="razao_social" value="{{ razao_social }}" required>
                      {% if error_razao_social %}
                        <span class="text-error text-small">{{ error_razao_social }}</span>
                      {% endif %}
                    </label>
                  </div>
                </div>

              {% endif %}
              {% if fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Fisico') or fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Ambos') %}
                <div class="col-xs-6 pessoa_fisica">
                  <div class="content-box">
                    <label class="field field-medium">
                      <span class="field-label"><span class="required">* </span>{{ text_cpf }}</span>
                      <input type="text" class="field-entry mask-cpf" id="cpf" name="cpf" value="{{ cpf }}" placeholder="{{ text_cpf_placeholder }}" required>
                      {% if error_cpf %}
                        <span class="text-error text-small">{{ error_cpf }}</span>
                      {% endif %}
                    </label>
                  </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">{{ text_rg }}</span>
                        <input type="text" class="field-entry" maxLength="20" name="rg" id="rg" value="{{ rg }}" placeholder="{{ text_rg_placeholder }}">
                      </label>
                    </div>
                  </div>
                {% endif %}
          		{% endif %}
              {% if fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Juridico') or fields_register_brazil_tipo_de_pessoa == constant('Type_CadastroPessoa::Tp_Ambos') %}
                <div class="col-xs-6 pessoa_juridica">
                  <div class="content-box">
                    <label class="field field-medium">
                      <span class="field-label"><span class="required">* </span>{{ text_cnpj }}</span>
                      <input type="text" class="field-entry mask-cnpj" name="cnpj" id="cnpj" value="{{ cnpj }}" placeholder="{{ text_cnpj_placeholder }}" required>
                      {% if error_cnpj %}
                        <span class="text-error text-small">{{ error_cnpj }}</span>
                      {% endif %}
                    </label>
                  </div>
                </div>
                <div class="col-xs-6 pessoa_juridica">
                  <div class="content-box">
                    <label class="field field-medium">
                      <span class="field-label">{{ text_perfil }}</span>
                      <select class="field-entry" name="perfil">
                        {% for perfil in perfis %}
                          <option value="{{ perfil.value }}" {{ (perfil.selected) ? ' selected="selected"' : '' }}>{{ perfil.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">{{ text_contribute_icms }}</span>
                      <select class="field-entry" name="contribuinte" id="contribuinte">
                        {% for contribuinte in contribuintes %}
                          <option value="{{ contribuinte.value }}" {{ (contribuinte.selected) ? ' selected="selected"' : '' }}>{{ contribuinte.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">{{ text_ie }}</span>
                      <input type="text" class="field-entry" maxLength="20" name="inscricao_estadual" id="inscricao_estadual" value="{{ inscricao_estadual }}" placeholder="{{ text_ie_placeholder }}">
                      {% if error_inscricao_estadual %}
                        <span class="text-error text-small">{{ error_inscricao_estadual }}</span>
                      {% endif %}
                    </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) ? '<span class="required">* </span>' : '' }}
                      {{ text_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' : '' }}>
                    {% if error_telephone %}
                      <span class="text-error text-small">{{ error_telephone }}</span>
                    {% endif %}
                  </label>
                </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">{{ text_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) ? '<span class="required">* </span>' : '' }}{{ text_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' : '' }}>
                    {% if error_celular %}
                      <span class="text-error text-small">{{ error_celular }}</span>
                    {% endif %}
                  </label>
                </div>
              </div>
              {% if fields_register_brazil_tipo_de_pessoa != constant('Type_CadastroPessoa::Tp_Juridico') and fields_register_brazil_status_sexo %}
                <div class="col-xs-6 pessoa_fisica">
                  <div class="content-box">
                    <div class="field field-medium">
                      <span class="field-label">{{ text_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' ? 'checked' : '' }}>
                        <span class="radio-text">{{ text_other }}</span>
                      </label>
                    </div>
                  </div>
                </div>
              {% endif %}

              {% if fields_register_brazil_status_data_nascimento %}

                {% if fields_register_brazil_tipo_de_pessoa != constant('Type_CadastroPessoa::Tp_Juridico') %}
                  <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) ? '<span class="required">* </span>' : '' }}{{ text_date_birth }}
                        </span>
                        <input type="text" class="field-entry mask-date" name="data_nascimento" value="{{ data_nascimento }}" placeholder="{{ text_date_birth_placeholder }}" {{ (fields_register_brazil_status_data_nascimento_required) ? 'required' : '' }}>
                          {% if error_data_nascimento %}
                            <span class="text-error text-small">{{ error_data_nascimento }}</span>
                          {% endif %}
                      </label>
                    </div>
                  </div>
                {% endif %}

              {% endif %}

            </div>
          </div>
          <hr>
          <div id="address" class="js-accordion-control vertical-padding-medium">
            <div class="flex between-xs middle-xs">
              <span class="text-medium text-uppercase vertical-middle">{{ text_your_address }}</span>
              <span class="accordion-icon text-small"><i class="fas fa-angle-down vertical-middle text-large"></i></span>
            </div>
            <div class="text-small">
              <span class="label-postcode">{{ text_postcode }},</span>
              <span class="label-address_1">{{ text_address_1 }},</span>
              <span class="label-numero">{{ text_number }},</span>
              <span class="label-city">{{ text_city }},</span>
              <span class="label-zone_id">{{ text_zone }}</span>
            </div>
          </div>
          <div class="js-accordion-content bottom-padding-medium">
            <div class="row small-space-xs js-address">
              <div class="col-xs-6">
                <div class="content-box">
                  <input type="hidden" name="company" value="{{ company }}">
                  <label class="field field-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 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" name="postcode" id="postcode" value="{{ postcode }}" placeholder="{{ text_postcode_placeholder }}" required>
                    {% if error_postcode %}
                    <span class="text-error text-small">{{ error_postcode }}</span>
                    {% endif %}
                  </label>
                </div>
              </div>
              <div class="col-xs-6 {# (postcode_visible == false) ? 'hidden' : '' #}">
                <div class="content-box">
                  <label class="field field-medium">
                    <span class="field-label">{{ text_locale }}</span>
                    <input type="text" class="field-entry" name="apelido" value="{{ apelido }}" placeholder="{{ text_apelido_placeholder }}" maxlength="80">
                    {% if error_apelido %}
                      <span class="text-error text-small">{{ error_apelido }}</span>
                    {% endif %}
                  </label>
                </div>
              </div>
              <div class="col-xs-12">
                <div class="row small-space-xs js-postcode-content {{ (postcode_visible == false) ? 'hidden' : '' }}">
                  <div class="col-xs-12">
                    <div class="content-box">
                      <label class="field field-medium">
                        <span class="field-label"><span class="required">* </span> {{ text_address_1 }}</span>
                        <input type="text" class="field-entry address_1" name="address_1" id="rua" value="{{ address_1 }}" 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 }}">
                        {% if error_address_1 %}
                          <span class="text-error text-small">{{ error_address_1 }}</span>
                        {% endif %}
                      </label>
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <div class="content-box">
                      <label class="field field-medium">
                        <span class="field-label"><span class="required">* </span>{{ text_number }}</span>
                        <input type="text" class="field-entry mask-int" name="numero" value="{{ numero }}" placeholder="{{ text_number_placeholder }}" maxlength="6" required>
                        {% if error_numero %}
                          <span class="text-error text-small">{{ error_numero }}</span>
                        {% endif %}
                      </label>
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <div class="content-box">
                      <label class="field field-medium">
                        <span class="field-label">{{ text_complement }}</span>
                        <input type="text" class="field-entry" id="complemento" name="complemento" value="{{ complemento }}" placeholder="{{ text_complemento_placeholder }}" maxlength="60">
                        {% if error_complemento %}
                          <span class="text-error text-small">{{ error_complemento }}</span>
                        {% endif %}
                      </label>
                    </div>
                  </div>
                  <div class="col-xs-12">
                    <div class="content-box">
                      <label class="field field-medium">
                        <span class="field-label">
                          <span class="required">* </span>
                          {{ text_address_2 }}
                        </span>
                        <input type="text" class="field-entry address_2" id="bairro" name="address_2" value="{{ address_2 }}" required {{ (postcode_readonly and error_address_2 == false) ? 'readonly' : '' }}>
                        {% if error_address_2 %}
                          <span class="text-error text-small">{{ error_address_2 }}</span>
                        {% endif %}
                      </label>
                    </div>
                  </div>

                  <div class="col-xs-6">
                    <div class="content-box">
                      <label class="field field-medium">
                        <span class="field-label"><span class="required">* </span>{{ text_zone }}</span>
                        <select id="estado" class="field-entry js-city-search zone_id" name="zone_id" data-codigo-municipio="{{codigo_municipio}}" required {{ (postcode_readonly and error_zone == false) ? 'readonly' : '' }}>
                          <option value="">{{ text_select }}</option>
                          {% for state in states %}
                            <option value="{{ state.zone_id }}" {{ (zone_id == state.zone_id) ? ' selected="selected"' : '' }}>{{ state.name }}</option>
                          {% endfor %}
                        </select>
                        {% if error_zone %}
                          <span class="text-error text-small">{{ error_zone }}</span>
                        {% endif %}
                      </label>
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <div class="content-box">
                      <label class="field field-medium">
                        <span class="field-label">
                          <span class="required">* </span> {{ text_city }}
                        </span>

                        <select class="field-entry codigo-municipio codigo_municipio" name="codigo_municipio" required {{ (postcode_readonly and error_city == false) ? 'readonly' : '' }}>
                        </select>

                        {% if error_city %}
                          <span class="text-error text-small">{{ error_city }}</span>
                        {% endif %}
                      </label>
                    </div>
                  </div>

                </div>
                <input type="hidden" name="country_id" value="{{ country_id }}">
              </div>
            </div>
          </div>
          {% if customer_interests_remember %}
          <hr>
          <div id="interests" class="js-accordion-control vertical-padding-medium">
            <div class="flex between-xs middle-xs">
              <span class="text-medium text-uppercase vertical-middle">{{ text_interests }}</span>
              <span class="accordion-icon text-small"><i class="fas fa-angle-down text-large"></i></span>
            </div>
            <div class="text-small">
              <span class="label-interests"></span>
            </div>
          </div>
          <div class="js-accordion-content bottom-padding-medium">
              {{ interests_categories }}
            </div>
          {% endif %}
          <div class="conclude-register hidden">
            <hr class="bottom-margin-medium">
            {% if text_agree %}
              <label class="checkbox checkbox-medium bottom-margin-medium">
                <input id="accept" class="checkbox-entry" type="checkbox" name="agree" value="1" {{ (agree) ? 'checked="checked"' : '' }}>
                <span class="checkbox-text" for="accept">{{ text_agree }}</span>
                  {% if error_agree %}
                    <span class="text-error text-small">{{ error_agree }}</span>
                  {% endif %}
              </label>
            {% endif %}

              {% if google_captcha %}
                {% if google_captcha %}
                  <div id="g-recaptcha" class="g-recaptcha" data-sitekey="{{ site_key }}">
                  </div>
                  {% if error_google_captcha %}
                    <span class="text-error text-small">{{ error_google_captcha }}</span>
                  {% endif %}
                  <script>
                    $LAB.setOptions({AllowDuplicates:true}).script('https://www.google.com/recaptcha/api.js').wait(function() {
                      grecaptcha.render('g-recaptcha', {
                        'sitekey' : '{{ site_key }}'
                      });
                    });
                  </script>
                {% endif %}
              {% else %}
                <label class="field field-medium">
                  <span class="field-label">{{ text_captcha }}</span>
                  <input type="text" class="field-entry {{ (error_captcha) ? 'field-entry-error' : '' }}" name="captcha" id="captcha" value="{{ captcha }}"  placeholder="{{ text_captcha_code_placeholder }}" {{ (debug == false) ? 'required' : '' }}>
                  {% if error_captcha %}
                    <span class="text-small text-error visible-block text-margin-x-small">{{ error_captcha }}</span>
                  {% endif %}
                  <img src="index.php?route=information/contact/captcha" alt="" class="visible-block top-margin-small">
                </label>
              {% endif %}
              <div class="buttons">
                <button id="button-register" type="submit" class="btn-default btn-medium btn-continue vertical-margin-medium" >
                  <span>{{ text_concluir }}</span>
                  <i class="fas fa-arrow-right small-space-xs-right" aria-hidden="true"></i>
                </button>
              </div>

          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  var registerHistory = {
      sessionId: '{{session_id}}',
      step: 'info-access',
      start: false,
      email: '',
      errors: []
    },
    form = document.getElementById('form-register'),
    email = form.querySelector('input[name=email]'),
    controls = form.querySelectorAll('input, select, textarea');

  email.addEventListener('focus', function(){
    registerHistory.start = true;
  });
  email.addEventListener('focusout', function(){
    registerHistory.email = email.value;
  });

  var scripts = {{ custom_scripts|json_encode() }};
  if (scripts) {
    for (var i = 0; i < scripts.length; i++) {
      if (i < scripts.length - 1) {
        $LAB.setOptions({AllowDuplicates:true}).script(scripts[i]).wait();
      } else {
        $LAB.setOptions({AllowDuplicates:true}).script(scripts[i]).wait(function() {
            window.waitEvent('scripts_document', function() {
              $('#form-register input').keypress(function (e) {
                var code = null;
                code = (e.keyCode ? e.keyCode : e.which);
                return (code == 13) ? false : true;
              });

              //validação feita pelo javascript caso o cliente n selecione o recaptcha ele não da o submit do form
              $('#form-register').on('submit', function(e){
                {% if debug == false %}
                  $('.text-error').remove();
                  if ($('textarea[name="g-recaptcha-response"]').val() == '') {
                    e.preventDefault();
                    notificationMsg('Algumas informações estão incorretas, corrija antes de prosseguir.','error');
                    $('#g-recaptcha').after('<span id="g-recapcha-error" class="svn-teste-error text-error text-small">Erro de validação no reCaptcha! Efetue a validação para continuar.</span>');
                  }
                {% endif %}
              });

              $('#form-register').validate({
                onfocusout: function(element) {
                  var validControl = $(element).valid();
                  if (!validControl) {
                    registerHistory.errors.push({
                      type: 'focusout',
                      step: null,
                      name: element.name,
                      message: element.nextSibling.textContent,
                      value: element.value,
                      time: new Date().toLocaleString()
                    });
                  }
                },
                invalidHandler: function(event, validator) {
                  var stepId = validator.currentForm.dataset.nextStep,
                    typeError = stepId ? 'nextstep' : 'submit',
                    errors = validator.errorList;

                  for (let i = 0; i < errors.length; i++) {
                    var erro = errors[i];
                    registerHistory.errors.push({
                      type: typeError,
                      step: stepId ? stepId : null,
                      name: erro.element.name,
                      message: erro.message,
                      value: erro.element.value,
                      time: new Date().toLocaleString()
                    });
                  }

                  validator.currentForm.dataset.nextStep = '';
                },
                onkeyup: function (element) {
                  if ($(element).valid()) {
                    $(element).removeClass('form-error');
                    $(element).siblings('span.form-error').remove();
                  }
                },
                onsubmit: true,
                errorElement: 'span',
                errorClass: 'form-error',
                validClass: 'form-success',
                rules: {
                  celular: {
                    celular: true
                  },
                  cpf: {
                    cpfBR: true
                  },
                  cnpj: {
                    cnpj: true
                  },
                  postcode: {
                    postalcodeBR: true
                  },
                  confirm: {
                    equalTo: '#nova_senha'
                  },
                  email: {
                      checkemail: true
                  }
                },
                messages: {
                  confirm: {
                    equalTo: 'As senhas não conferem'
                  }
                }
              });

              $('input[name="customer_group_id"]:checked').trigger('change');

              function exibeContent() {
                $('.pessoa_' + $("#juridica, #fisica").filter(':checked').attr('id')).prop('disable', false).show();
                $('.pessoa_' + $("#juridica, #fisica").filter(':not(:checked)').attr('id')).hide().find("#cpf, #rg, #cnpj, #razao_social, #inscricao_estadual").prop('disable', true).val("");
              }

              exibeContent();
              $('#juridica, #fisica').on('change', function() {
                exibeContent();
              });

              $('.colorbox').fancybox({
                width: 640,
                height: 480
              });

              $('#nova_senha').strength();
              if($('.numeric').length > 0) $('.numeric').numeric();

              /* Accordion da página de cadastro de novos usuários */
              if ($('#form-register').length > 0) {
                $('#form-register').accordionFutura({
                  onlyOneActive: true,
                  initFirstActive: true,
                  openNextOnClose: true,
                  form: $('#form-register')
                });

                function getViewportWidth() {
                  return Math.max(document.documentElement.clientWidth, window.innerWidth || 0); // Tamanho da janela do navegador sem o scrollbar
                }
                var widthViewport = getViewportWidth();

                function abasMobile($this) {
                  $('.' + $this.attr('id')).fadeIn().siblings().fadeOut();
                  $('.aba-' + $this.attr('id')).addClass('active').siblings('.aba-mobile').removeClass('active');
                }
                function abasMobileConstruct(){
                  if (getViewportWidth() >= 768) {
                    $('.aba-mobile-control').off().css({cursor: 'default'});
                    $('.aba-controlled').removeAttr('style');
                    $('.aba-mobile-control').closest('.content-box').removeClass('text-center').addClass('text-left');
                  } else {
                    let toAba = ($('[name=email]').val() != "") ? $('#register') : $('#login');
                    abasMobile(toAba);
                    $('.aba-mobile-control').closest('.content-box').removeClass('text-left').addClass('text-center');
                    $('.aba-mobile-control').css({cursor: 'pointer'}).on('click', function() {
                      abasMobile($(this));
                    });
                  }
                }
                abasMobileConstruct();

                $(window).on('resize', function() {
                  if (getViewportWidth() != widthViewport) {
                    widthViewport = getViewportWidth();
                    abasMobileConstruct();
                  }
                });

                $('#form-register .js-accordion-control:eq(' + ($('#form-register .js-accordion-control').length - 1) + ')').addClass('last-control');

                $('#form-register .js-accordion-control').on('click', function() {
                  if ($('#form-register .js-accordion-control.last-control').hasClass('active')) {
                    $('.conclude-register').removeClass('hidden');
                  } else {
                    $('.conclude-register').addClass('hidden');
                  }
                });

                $('#form-register .text-error').each(function() {
                  if ($(this).prev('input').attr('name') == 'captcha') {
                    $('#form-register .last-control + .js-accordion-content').slideDown().siblings('#form-register .js-accordion-content').slideUp();
                    $('.conclude-register').removeClass('hidden');
                    $('html, body').animate({scrollTop: $(this).offset().top}, 'slow');
                  } else {
                    $(this).closest('#form-register .js-accordion-content').slideDown().siblings('#form-register .js-accordion-content').slideUp();
                  }
                  return false;
                });

                $('.areas-interests .js-check-controlled, .areas-interests .js-check-control').on('change', function() {
                  var $elementLabel = $('.label-interests');
                  $elementLabel.text('');
                  $('.areas-interests .js-check-controlled, .areas-interests .js-check-control').each(function() {
                    var text = $(this).next('.checkbox-text').text() + ', ';
                    if ($(this).prop('checked')) {
                      $elementLabel.text($elementLabel.text() + text);
                    }
                  });
                  $elementLabel.text($elementLabel.text().substr(0, $elementLabel.text().length - 2));
                });
                $('#form-register input, #form-register select, #form-register textarea').on('change', function() {
                  var $elementLabel = $('.label-' + $(this).attr('name'));
                  var virgula = ($elementLabel.text().indexOf(',') != -1) ? ',' : '';
                  var valorInput = $(this).val();

                  if ($(this).prop('tagName') == 'SELECT') {
                    valorInput = $(this).find('option').filter(':selected').text();
                  }

                  if (($(this).attr('type') != 'undefined' && $(this).attr('type') != 'checkbox' && $(this).attr('type') != 'radio') || $(this).prop('tagName') == 'TEXTAREA') {
                    if ($(this).attr('name') == 'password') {
                      var textPassword = '';
                      for (var i = 0; i < valorInput.length; i++) {
                        textPassword += '*';
                        $elementLabel.text(textPassword + virgula);
                      }
                    } else {
                      $elementLabel.text(valorInput + virgula);
                    }
                  } else {
                    var text = ($(this).prop('checked')) ? ': Sim' : ': Não';
                    $elementLabel.text($elementLabel.text().replace(': Sim', '').replace(': Não', '') + ' ' + text);
                  }
                });
              }
            });

            window.waitEvent('scripts_document', function() {
              {% if success %}
                notificationMsg('{{ success }}','success');
              {% endif %}

              {% if error_warning %}
                notificationMsg('{{ error_warning }}','error');
              {% endif %}

              {% if customerml %}
                notificationMsg('{{ customerml }}','warning');
              {% endif %}

            });
        });
      }
    }
  }
</script>
