{% extends "@DWGinger/base.html.twig" %}

{% block title %}Login erforderlich{% endblock %}

{% block body %}
    <div class="row justify-content-center">
        <div class="col-4">
            <form method="post">
                {% if error %}
                    <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                {% endif %}

                {% if app.user %}
                    <div class="mb-3">
                        Sie sind angemedet als {{ app.user.username }}, <a href="{{ path('ginger_logout') }}">Abmelden</a>
                    </div>
                {% endif %}

                <h1 class="my-3 font-weight-normal">Anmeldung</h1>
                <label for="inputUsername">Benutzername</label>
                <input type="text" value="{{ last_username }}" name="username" id="inputUsername"
                       class="form-control mb-3" required autofocus>

                <div class="form-group">
                    <label for="inputPassword">Passwort</label>
                    <div class="input-group mb-3" id="show_hide_password">
                        <input type="password" name="password" id="inputPassword" class="form-control" required>
                        <div class="input-group-append">
                            <span class="input-group-text"><a href="#"><i class="fas fa-eye-slash"
                                                                          aria-hidden="true"></i></a></span>
                        </div>
                    </div>
                </div>

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

                <button class="btn btn-lg btn-primary btn-block mb-3" type="submit">
                    Anmelden
                </button>
            </form>
            <a href="{{ path('ginger_forgot_password_request') }}">Passwort vergessen?</a>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            $("#show_hide_password a").on("click", function(event) {
                event.preventDefault();
                if ($('#show_hide_password input').attr("type") == "text") {
                    $('#show_hide_password input').attr("type", "password");
                    $('#show_hide_password i').removeClass( "fa-eye" ).addClass( "fa-eye-slash" );
                } else if ($('#show_hide_password input').attr("type") == "password") {
                    $('#show_hide_password input').attr("type", "text");
                    $('#show_hide_password i').removeClass( "fa-eye-slash" ).addClass( "fa-eye" );
                }
            });
        });
    </script>
{% endblock %}