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


{% block title %}
    Log in!
{% endblock %}

{% block body %}

    <section class="vh-100 d-flex align-items-center justify-content-center">
        <div class="container mx-auto col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
            <div class="d-flex mx-auto align-items-center">
                <img class="img-fluid w-50 mx-auto" src="{{ asset('assets/images/logo.png') }}" alt="Logo">
            </div>

                    <div class="text-center m-3">

                        <h1 class="fs-2 fw-bold">{{ appname }}</h1>
                    </div>
                    <div class="card shadow-lg">
                        {% 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 %}
                        <div class="card-body p-5">
                            <h1 class="fs-4 card-title fw-bold mb-4">Login</h1>
                            <form method="POST" class="needs-validation" novalidate="" autocomplete="off">
                                <div class="mb-3">
                                    <label class="mb-2 text-muted form-label" for="inputEmail">
                                        Username
                                    </label>
                                    <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="form-control" autocomplete="email" required autofocus>

                                </div>

                                <div class="mb-3">
                                    <div class="mb-2 w-100">
                                        <label class="text-muted form-label" for="inputPassword">
                                            Password
                                        </label>

                                    </div>
                                    <input type="password" name="password" id="inputPassword" class="form-control" autocomplete="current-password" required>

                                </div>

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

                                <div class="d-flex align-items-center justify-content-evenly">

                                    <button class="btn btn-primary" type="submit">
                                        Sign in
                                    </button>
                                    <a href="{{ path('app_forgot_password_request') }}">Forgot Password?</a>
                                </div>
                            </form>
                        </div>

                    </div>
                    <div class="text-center mt-5 text-muted">
                        Copyright &copy; {{ "now"|date("Y") }} &mdash; <strong>{{ appname }}</strong>
                    </div>
                </div>


    </section>


{% endblock %}