{% extends "layoutOffLine.html.twig" %}

{% block title "Login" %}
    {% block stylesheets %}{% endblock %}
    {% block body %}
        <div class="container" style="background: -webkit-linear-gradient(left, rgba(20,165,222,65) 1%,rgb(157 52 52) 100%);margin-top: 1%;border: 1px solid #ccc;border-radius: 5px;">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="text-center" style="color:#fff!important;">Umalis - Système de gestion des présences</h3>
                    <hr/>
                </div>
                <div class="col-lg-4 col-lg-offset-4 padd-t-lg" style="border: 1px solid #ccc;border-radius: 5px;margin-bottom: 25px;background: #903e43;" >

                    <div>
                        <img class="img-thumbnail animation" src="{{ asset('frontEnd/assets/images/logoSite.jpg') }}" style="margin: 0 auto;height: 100px;object-fit: contain;object-position: 50% 50%!important;" width="100%">
                    </div>
                    <hr class="clean">
                    {% if error %}
                        <div class="alert alert-danger text-center">
                            <h4>{{ error.messageKey|trans(error.messageData, 'security') }}</h4>
                        </div>
                    {% endif %}
                    <p class="text-center" style="color:#fff!important;">Connectez-vous</p>
                    <form role="form" action="{{ path("security_check") }}" method="post" style="width: 85%;margin: 0 auto;">
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input type="text" class="form-control"  placeholder="Nom d'utilisateur" name="_username" value="{{ last_username }}" required>
                        </div>
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="fa fa-key"></i></span>
                            <input type="password" class="form-control"  placeholder="Mot de passe" name="_password" required>
                        </div>
                        <div align="center" class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="6Le21jUqAAAAAKMtMAg6qvqBtfJdYteJqYbu7M7I"></div>
                        <br/>
                        <button id="sbmtBtn" type="submit" class="btn btn-purple btn-block" disabled>Connexion</button>
                    </form>
                    <hr>
                    <div align="center">
                        <a href="{{ path('forgot_password') }}" class="btn btn-link" style="color:#fff!important;">Mot de passe oubliée </a>
                    </div>
                    <br/><br/>
                </div>
            </div>
        </div>
    {% endblock %}

{% block javascripts %}

    <script>
        function recaptchaCallback() {
            $('#sbmtBtn').removeAttr('disabled');
        }

    </script>{% endblock %}