{% extends "base/base-front-general.html.twig" %}
{% block title %}{% trans into locale %}Sign in{% endtrans %} | Cershop{% endblock %}
{% block metadescription %}{% endblock %}
{% block robots %}noindex,follow{% endblock %}
{% block stylesheet %}
    {{ parent() }}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
{% endblock %}

{% block contenido %}

<div class="page-content pt-6 pb-6">
    <!-- Migas de pan -->
    <nav class="breadcrumb-nav">
        <div class="container pb-0">
            <ul class="breadcrumb">
                <li><a href="{{ path('home.'~locale) }}"><i class="d-icon-home"></i></a></li>
                <li class="active">{% trans into locale %}Login{% endtrans %}</li>
            </ul>
        </div>
    </nav>
    <!-- ./migas de pan -->

    <div class="container">
        <div class="tab tab-nav-simple tab-nav-center tab-nav-boxed">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link{% if not app.request.get('registro') %} active{% endif %}" href="#login-tab">{% trans into locale %}Login{% endtrans %}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link{% if app.request.get('registro') %} active{% endif %}" href="#registro-tab">{% trans into locale %}New account{% endtrans %}</a>
                </li>
            </ul>
            <div class="tab-content">
                <!-- Formulario de acceso -->
                <div class="tab-pane{% if not app.request.get('registro') %} active{% endif %}" id="login-tab">
                    <h3 class="mb-3 text-center">{% trans into locale %}Login{% endtrans %}</h3>
                    {% if error %}
                        <div class="alert alert-danger alert-dark alert-inline mt-2 mb-3" role="alert">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                    {% endif %}

                    <form name="login" action="{{ path('loginCheck.'~locale) }}" method="post">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    <input type="text" id="usuario" class="form-control" name="_username" placeholder="{% trans into locale %}User name{% endtrans %}" value="{{ last_username }}" required autofocus>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <input type="password" id="password" class="form-control" name="_password" placeholder="{% trans into locale %}Password{% endtrans %}" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-footer">
                            <div class="form-checkbox">
                                <input type="checkbox" id="_remember_me" name="_remember_me" class="custom-checkbox">
                                <label class="form-control-label" for="_remember_me">{% trans into locale %}Remember me{% endtrans %}</label>                        
                            </div>
                        </div>
                        <input type="hidden" name="_target_path" value="{{ path('inicio') }}" />
                        <button class="btn btn-dark btn-block mb-3 mt-3" type="submit">{% trans into locale %}Sign in{% endtrans %}</button>
                    </form>
                    <a class="small" href="{{ path('recuperarPassword.'~locale) }}">{% trans into locale %}Lost your password?{% endtrans %}</a>
                </div>
                <!-- /formulario de acceso -->

                <!-- Formulario de registro -->
                <div class="tab-pane{% if app.request.get('registro') %} active{% endif %}" id="registro-tab">
                    <h3 class="mb-3 text-center">{% trans into locale %}New account{% endtrans %}</h3>
                    {% if form_errors(form) %}
                        <div class="alert alert-danger alert-dark alert-inline mt-2 mb-3" role="alert">{{ form_errors(form) }}</div>
                    {% endif %}
                    {% for flash_message in app.session.flashbag.get('success') %}
                        <div class="alert alert-success alert-dark alert-inline mt-2 mb-3" role="alert">{{ flash_message }}</div>
                    {% endfor %}
                    {% for flash_message in app.session.flashbag.get('danger') %}
                        <div class="alert alert-danger alert-dark alert-inline mt-2 mb-3" role="alert">{{ flash_message }}</div>
                    {% endfor %}
                    
                    {{ form_start(form, {'action':path('login.'~locale), 'method':'POST'}) }}
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    {{form_widget(form.nombre)}}
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    {{form_widget(form.apellidos)}}
                                </div>
                            </div>
                        </div>                    
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group mb-3">
                                    {{form_widget(form.usuario)}}
                                </div> 
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group mb-3">
                                    {{form_widget(form.email)}}
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group mb-3">
                                    {{form_widget(form.zip)}}
                                </div>
                            </div>
                        </div> 
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group mb-3">
                                    {{ form_widget(form.plainPassword.first) }}
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    {{ form_widget(form.plainPassword.second) }}
                                </div>
                            </div>
                        </div>
                        <div class="form-footer">
                            <div class="g-recaptcha" data-sitekey="{{ data_site_key_gcaptcha }}"></div>
                            <div class="form-checkbox">
                                <input type="checkbox" id="condiciones" name="condiciones" class="custom-checkbox">
                                <label class="form-control-label" for="condiciones">{% trans into locale %}conditions{% endtrans %}</label>
                            </div>
                            <div class="form-checkbox">
                                <input type="checkbox" id="comunicaciones" name="newsletter" class="custom-checkbox">
                                <label class="form-control-label" for="comunicaciones">{% trans into locale %}I agree to receive commercial communications.{% endtrans %}</label>                        
                            </div>
                        </div>
                        {{ form_widget(form.save) }}
                    {{ form_end(form) }}
                </div>
                <!-- /formulario de registro -->
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascript %}
    {{ parent() }}
{% endblock %}