<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap-material-design/4.1.1/dist/css/bootstrap-material-design.min.css}">
    <title th:text="#{login}"></title>
    <style>
        body, html {
            height: 100%;
            background-color: #F1F3F4;
        }

        body {
            display: flex;
            align-items: center;
        }

        form {
            background-color: white;
            padding: 6px;
        }
    </style>
</head>
<body>
<div class="container h-100">
    <div class="row align-items-center h-100">
        <form th:action="@{login}" method="post" class="offset-lg-4 col-lg-4 offset-md-3 col-md-6 col-sm-12 mx-auto">
            <h1 class="text-center" th:text="#{signIn}"></h1>
            <div class="form-group">
                <label for="username"></label>
                <input type="text" class="form-control" id="username" name="username" th:placeholder="#{username}">
            </div>
            <div class="form-group">
                <label for="password"></label>
                <input type="password" class="form-control" id="password" name="password" th:placeholder="#{password}">
            </div>
            <button type="submit" name="submit" class="btn btn-raised btn-primary col-12" th:text="#{login}"></button>
        </form>
    </div>
</div>
<script th:src="@{/webjars/jquery/3.3.1/dist/jquery.slim.min.js}"></script>
<script th:src="@{/webjars/popper.js/1.12.5/dist/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap-material-design/4.1.1/dist/js/bootstrap-material-design.min.js}"></script>
<script>
    $(document).ready(function () {
        $('body').bootstrapMaterialDesign();
    });
</script>
</body>
</html>