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

{% block title %}Becker Login{% endblock %}

{% block stylesheets %}
    <style>
        .card-login {
            width: 600px;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        @media (min-width: 992px) {
            .card-login {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    </style>
{% endblock %}

{% block body %}
    <section>
        <div class="container">
            <div class="card card-login mt-5 mt-lg-0">
                <div class="card-header">
                    <h5 class="card-title mb-0">Becker Login</h5>
                </div>
                <div class="card-body">
                    <form action="{{ path('app_login') }}" method="post">

                        <div class="form-floating mb-3">
                            <input type="text" name="_username" class="form-control" id="username" value="{{ last_username }}" placeholder="Benutzername">
                            <label for="username" class="form-label">Benutzername</label>
                        </div>

                        <div class="form-floating mb-3">
                            <input type="password" name="_password" class="form-control" id="password" placeholder="Passwort">
                            <label for="password" class="form-label">Password</label>
                        </div>

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

                        {# If you want to control the URL the user is redirected to on success
                <input type="hidden" name="_target_path" value="/account"/> #}

                        <button type="submit" class="btn btn-primary">Anmelden</button>
                    </form>

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

{% block javascripts %}
{% endblock %}