{% extends 'base.html.twig' %} {% block title %}Log in!{% endblock %} {% block
body %}
<style>
    main#login > form {
        display: flex;
        flex-direction: column;
        gap: var(--size-max);
        justify-content: center;
        align-items: center;
        min-width: 300px;
        max-width: 10rem;
        justify-content: center;
        align-items: center;
        & > label {
            display: none;
        }
        & > :is(input[type="text"], input[type="password"]) {
            height: var(--size-max);
            border-radius: var(--radius);
            padding: calc(var(--size-max) / 2) var(--size-max);
            border: none;
            background: var(--grey);
            width: 80%;
        }
        & > input[type="submit"] {
            cursor: pointer;
            background: var(--light);
            border: none;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            color: var(--dark);
            padding: calc(var(--size-max) - 8px) 0;
            width: 70%;
            height: 20%;
            transition: all ease-out 0.2s;
            &:hover {
                box-shadow: var(--shadow-hover);
            }
        }
    }
</style>
<main id="login">
    <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">
            You are logged in as {{ app.user.userIdentifier }},
            <a href="{{ path('app_logout') }}">Logout</a>
        </div>
        {% endif %}

        <h2>Login</h2>
        <label for="username">Username</label>
        <input
            type="text"
            value="{{ last_username }}"
            name="username"
            id="username"
            class="form-control"
            autocomplete="username"
            placeholder="Username"
            required
            autofocus
        />
        <label for="password">Password</label>
        <input
            type="password"
            name="password"
            id="password"
            class="form-control"
            autocomplete="current-password"
            placeholder="Password"
            required
        />

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

        {# Uncomment this section and add a remember_me option below your
        firewall to activate remember me functionality. See
        https://symfony.com/doc/current/security/remember_me.html

        <div class="checkbox mb-3">
            <label>
                <input type="checkbox" name="_remember_me" /> Remember me
            </label>
        </div>
        #}

        <input type="submit" value="Sign in" />
        <p>
            If you don't have an account:
            <a href="{{url('app_register')}}">register</a>.
        </p>
    </form>
</main>
{% endblock %}