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

{% block title %}Inicio de Sesión{% endblock %}

{% block body %}
<form method="post">
    <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style="min-width:420px">

        <h4 class="h3 mb-3 font-weight-normal text-center">Inicio de Sesión</h4>

        {% if error %}
            <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
        {% endif %}

        <div class="form-group">
            <label for="inputUsername" class="text-normal text-dark">Usuario</label>
            <input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control"
                   required autofocus maxlength="13" pattern=".{2,}">
        </div>

        <div class="form-group">
            <label for="inputPassword" class="text-normal text-dark">Contraseña</label>
            <input type="password" name="password" id="inputPassword" class="form-control" required>
            <span toggle="#password-field" class="fa fa-eye-slash field-icon toggle-password" style="font-size: 20px;"></span>

        </div>

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

        <div class="form-group">
            <div class="d-flex justify-content-between align-items-center">
                    <button class="btn btn-lg btn-primary" type="submit">
                        Ingresar
                    </button>
                    <a href="{{ path('val_mail_pass') }}" >
                        Recuperar Contraseña
                    </a>

            </div>
        </div>

        <hr class="my-4">

        <div class="text-center">
            <p><strong><i class="fas fa-info-circle"></i> Información y ventas</strong></p>
            <p><strong>COUNTELSEG S.A.S.</strong></p>
            <p><i class="fas fa-map-marker-alt"></i> Quito - Ecuador</p>
            <p>
                <i class="fab fa-whatsapp"></i> <strong>WhatsApp:</strong>
                <a href="https://wa.me/593998000795" target="_blank">0998000795</a> -
                <a href="https://wa.me/593999004924" target="_blank">0999004924</a>
            </p>
            <p>
                <i class="fas fa-envelope"></i> <strong>Email:</strong>
                <a href="mailto:ventas@countelseg.com">ventas@countelseg.com</a>
            </p>
        </div>

    </div>
</form>

    <script src=" {{ asset("core/vendor/jquery-2.2.3.min.js") }}"></script>
    <script>
        $(document).ready(function () {
            $body = $("body");
            var input = $("#inputPassword");
            input.attr("type", "password");

            $(".toggle-password").click(function () {
                $(this).toggleClass("fa-eye fa-eye-slash");
                var input = $("#inputPassword");
                if (input.attr("type") === "password") {
                    input.attr("type", "text");
                } else {
                    input.attr("type", "password");
                }


            });


        });
    </script>
{% endblock %}