{% extends 'base.html' %}

{% block stylesheets %}
    <style>
        body .container{
            padding-top: 100px;
            height: 100%;
            flex: 1 0;
        }
    </style>
{% endblock %}
{% block body %}

    <div id="sign-in" class="row justify-content-center">
        <div class="col col-lg-4 align-self-center">
            <div class="card">
                <form method="post" class="form-signin" action="{% url 'login' %}">
                    {% csrf_token %}
                    <div class="card-header text-center bg-primary text-white">
                        <h5 class="card-title">Iniciar Sesión</h5>
                    </div>
                    <div class="card-body">
                        <input type="hidden" name="_csrf_token">

                        <fieldset class="form-group bdm-form-group">
                            <label class="bmd-label-floating" for="inputUsername">Usuario</label>
                            <input class="form-control" type="text" name="username" id="inputUsername" autofocus>
                        </fieldset>
                        <fieldset class="form-group bdm-form-group">
                            <label for="inputPassword" class="bmd-label-floating">Contraseña</label>
                            <input class="form-control" type="password" name="password" id="inputPassword">
                        </fieldset>

                        {% if errorLogin %}
                            <div class="alert alert-danger">Los datos introducidos no son correctos.</div>
                        {% endif %}

                        <div class="row justify-content-center">
                            <button class="btn btn-primary" id="login" type="submit">Entrar</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts%}
    <script type="text/javascript">
        $(document).ready(function () {
            setTimeout(function () {
                var $pwdInput = $('input[type="password"]:-webkit-autofill');
                $pwdInput.closest("md-input-container").addClass('md-input-has-value');
            }, 500);
        });
    </script>
{% endblock %}