{% extends 'base.html.twig' %}

{% block title %}{% trans %}Log in{% endtrans %}{% endblock %}

{% block body %}

    <form method="post" class="form-init">
        {% if error %}
            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData) }}</div>
        {% endif %}

        {% if app.user %}
            <div class="mb-3">
                {{ 'You are logged in as'|trans }} {{ app.user.username }}, <a href="{{ path('app_logout') }}">{{ 'Log out'|trans }}</a>
                {{ 'or'|trans }}
                <a href="{{ path('dashboard') }}">{{ 'go to dashboard'|trans }}</a>
            </div>
        {% endif %}

        {# <div class="new_ini">
            <div class="form-group has-icon"><i class="icon-envelope-o"></i>
                <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control form-control-lg" required autofocus
                    placeholder="{% trans %}Email{% endtrans %}">
            </div>

            <div class="form-group has-icon"><i class="icon-envelope-o"></i>
                <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control form-control-lg" required autofocus
                    placeholder="{% trans %}Email{% endtrans %}">
            </div>
        </div> #}

        <div id="ini_old" class="">
            <div id="view_email" class="form-group has-icon d-none">
                <i class="icon-envelope-o"></i>
                <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control form-control-lg" 
                    placeholder="{% trans %}Email{% endtrans %}">
            </div>

            <div id="view_phone" class="form-group has-icon row">
                <div class="col-4 field-text ">
                    <select name="codePhone" id="inputcodePhone" class="form-control" data-widget="select2">
                        <option selected value=''> {% trans %}Country{% endtrans %} (+00)</option>
                        {# {% for category in listCategory %}
                            <option value={{category.id}}>{{category.name}}</option>
                        {% endfor %} #}
                    </select>
                    {# <input type="text" value="" name="codePhone" id="inputcodePhone" class="form-control form-control-lg" 
                        placeholder="{% trans %}Country{% endtrans %}"> #}
                </div>
                <div class="col-8">
                    <i class="icon-envelope-o"></i>
                    <input type="number" value="" name="phone" id="inputPhone" class="form-control form-control-lg" 
                        placeholder="{% trans %}Phone{% endtrans %}">
                </div>
            </div>

            <div id="view_password" class="form-group has-icon d-none"><i class="icon-user-secret"></i>
                <input id="password-field" type="password" name="password" id="inputPassword" class="form-control form-control-lg" 
                    placeholder="{% trans %}Password{% endtrans %}">
                <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
            </div>

            <div id="view_code_mail" class="form-group has-icon row d-none">
                <div class="col-12">
                    <i id="btn_atras" class="fa fa-fw fa-angle-left treeview-icon text-primary pointer"></i>
                    <br><br>
                    <h5>{{'codigoValidacion' | trans}}</h5>
                </div>
                <div id="title_code_send" class="col-12 mb-3">
                    <h3>{{'messageCodigoEnviadoCel' | trans}}</h3>
                </div>
                <div class="col-3">
                    <input type="text" maxlength="1" onkeyup="validar(event,this)" value="" name="codePhone_1" id="inputcodePhone_1" class="form-control form-control-lg input-number">
                </div>
                <div class="col-3">
                    <input type="text" maxlength="1" onkeyup="validar(event,this)" value="" name="codePhone_2" id="inputcodePhone_2" class="form-control form-control-lg input-number">
                </div>
                <div class="col-3">
                    <input type="text" maxlength="1" onkeyup="validar(event,this)" value="" name="codePhone_3" id="inputcodePhone_3" class="form-control form-control-lg input-number">
                </div>
                <div class="col-3">
                    <input type="text" maxlength="1" onkeyup="validar(event,this)" value="" name="codePhone_4" id="inputcodePhone_4" class="form-control form-control-lg input-number">
                </div>
            </div>

        </div>


        <input type="hidden" name="_csrf_token"
            value="{{ csrf_token('authenticate') }}"
        >

        {#
            Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
            See https://symfony.com/doc/current/security/remember_me.html
        |#}
        
        <div align="right" class="checkbox mt-3 btn_enlaces">
            <label>
                {% trans %}Ingrese{% endtrans %}
                <strong id="btn_ingresar" class="btn-ingresar">
                    {% trans %}Email{% endtrans %}
                </strong> 
            </label>
        </div>
        <div align="right" class="checkbox mt-3 btn_enlaces d-none" id='initPassword'>
            <label>
                <strong>
                    <a id="btn_view_pass" class="link-remember-me" href="#!">
                        {% trans %}OldLogin{% endtrans %}
                    </a>
                </strong> 
            </label>
        </div>
        <div align="right" class="checkbox mt-3 d-none" id='_remenber'>
            <label>
                <strong>
                    <a class="link-remember-me" href="{{ path('app_reset_pass') }}">
                        {% trans %}Remember me{% endtrans %}
                    </a>
                </strong> 
            </label>
        </div>

        <div class="g-recaptcha" data-sitekey="6LebgqorAAAAAP5i4Zas3y5MmKStJbm5_MnVHkzn"></div>

        <button class="btn btn-primary btn-lg btn-block mt-3" id="btn_ini" type="submit">
            {% trans %}Enter{% endtrans %}
            <div class="spinner-border d-none" id="spinner_login" role="status" >
                <span class="sr-only">Loading...</span>
            </div>
        </button>
        {# <p><a href="#">{% trans %}Did you forget your password?{% endtrans %}</a></p> #}

        <div align="right" class="checkbox mt-3" id=''>
            <label>
                {% trans %}New in piola{% endtrans %} 
                <strong class="btn-ingresar" onclick='handleSelectTypeUser(2)'>
                    {% trans %}Sign in{% endtrans %}
                </strong> 
            </label>
        </div>
    </form>

    {% include "/security/login_css.html.twig" %} 
{% endblock %}


{% block body_barra %}
    {% include "/security/new_register.html.twig" %} 
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {% include "/security/country_json.html.twig" %} 
    {% include "/security/login_js.html.twig" %} 
    
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

{% endblock %}