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

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

{% block head %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
{% endblock %}

{% block body %}
    <main>
        <div class="container">
            <a class="button mt-24" href="{{ path('app_index') }}">Go back</a>
            <h3>Enter Information</h3>
            <div class="bg-card-secondary" style="padding: 1rem; border-radius: 10px">
                {% if error %}
                    <div class="error">
                        {{ error.messageKey|trans(error.messageData, 'security') }}
                    </div>
                {% endif %}
                <form action="{{ path('app_login') }}" method="POST" id="registerForm">
                    <label for="username"><i class="fa-solid fa-user"></i> Username</label>
                    <input class="textField" autocomplete="autocomplete" required="required" type="text"
                           name="_username" placeholder="Enter username" id="username" value="{{ last_username }}">

                    <label for="password"><i class="fa-solid fa-lock"></i> Password</label>
                    <input class="textField" autocomplete="autocomplete" required="required" type="password"
                           name="_password" placeholder="Enter password" id="password"/>

                    <input class="button" type="submit" id="loginButton" name="login" value="Login">
                </form>
            </div>
        </div>
    </main>
{% endblock %}