<!--

    Queue - A Queueing system that can be used to handle labs in higher education
    Copyright (C) 2016-2020  Delft University of Technology

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{container}">
    <body>
        <main layout:fragment="content">
            <div th:if="${param.error}" class="banner mb-3" data-type="error">
                <span>Invalid username and password.</span>
            </div>

            <div th:if="${param.logout}" class="banner mb-3" data-type="warning">
                <p>You have been logged out.</p>
            </div>

            <h1 class="font-800">Log in</h1>

            <form class="flex vertical" th:action="@{/perform-login}" method="post" id="login-form">
                <div class="grid col-2 gap-3 align-center" style="--col-1: 5rem; --col-2: 15rem">
                    <label for="username">Username</label>
                    <input type="text" class="textfield" id="username" name="username" />
                    <label for="password">Password</label>
                    <input type="password" class="textfield" id="password" name="password" />
                </div>

                <div>
                    <button class="button" type="submit">Log in</button>
                </div>
            </form>
        </main>
    </body>
</html>
