<section class="sign register" style="display: none">
    <div class="background"></div>
    <div class="form">
        <div class="conteudo">
            {% include '_templates/includes/logo.twig' %}
            <form method="post" action="javascript:void(0)" data-b2c-action="usuario/aj/cadastrar"
                  data-b2c-el="name='frmCadastro'" name="frmCadastro" data-b2c-ajax-form-user-acesso>
                <input type="hidden" data-b2c-input="tp" value="L"/>
                <h1>{{ __('facaSeuCadastro') }}</h1>

                <div class="form-group">
                    <label for="">
                        <i class="fas fa-user"></i>
                    </label>
                    <input class="icon" name="nome" type="txt" data-b2c-input="nome" placeholder="{{ __('nome') }}" required/>
                </div>

                <div class="form-group">
                    <label for="">
                        <i class="fas fa-user"></i>
                    </label>
                    <input class="icon" name="sobrenome" type="txt" data-b2c-input="sobrenome" placeholder="{{ __('sobrenome') }}"
                           required/>
                </div>

                <div class="form-group">
                    <label for="">
                        <i class="fas fa-at"></i>
                    </label>
                    <input class="icon" name="email" type="email" data-b2c-input="email" placeholder="{{ __('email') }}" required/>
                </div>

                <div class="form-group">
                    <label for="">
                        <i class="fas fa-lock"></i>
                    </label>
                    <input class="icon" name="password" type="password" data-b2c-input="senha" placeholder="{{ __('senha') }}"
                           required/>
                </div>

                <button type="submit" class="button"
                        data-b2c-success-command="window.location.href = site_url('perfil');">
                    <span class="text">
                        {{ __('cadastrar') }}
                    </span>
                    <span class="spinner">
                        <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
                    </span>
                </button>
            </form>

            {% if getGoogleConfig().ativo or getFacebookConfig().ativo %}
                <hr class="divider">

                <div class="social-login">
                    {% if not getUsuario() and getGoogleConfig().ativo %}
                        <a href="javascript:void(0)" data-b2c-btn-google id="btnGoogleLogin" class="google">
                            <span class="text">
                                <i class="fab fa-google"></i>
                            </span>
                            <span class="spinner">
                                <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
                            </span>
                        </a>
                    {% endif %}
                    {% if not getUsuario() and getFacebookConfig().ativo %}
                        <a href="javascript:void(0)" class="facebook" data-b2c-btn-facebook id="btnFacebookLogin">
                            <span class="text">
                                <i class="fab fa-facebook-f"></i>
                            </span>
                            <span class="spinner">
                                <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
                            </span>
                        </a>
                    {% endif %}
                </div>
            {% endif %}

            <a class="btn-togo" href="#login" onclick="window.history.back(-1);return false;">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
                     stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <line x1="19" y1="12" x2="5" y2="12"></line>
                    <polyline points="12 19 5 12 12 5"></polyline>
                </svg>
                {{ __('voltarParaLogin') }}
            </a>

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