<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RSCM-101 | Вход</title>
    <link rel="stylesheet" type="text/css" href="/style.css">
    <style>
        #form-wrapper {
            overflow: hidden;
            max-width: 27em;
            margin: 5em auto;
            height: auto;
            text-align: center;
        }

        .form-row {
            padding: 4px 0;
            margin: 1.5em;
        }

        .form-row * {
            font-size: 1em;
            text-align: left;
            display: block;
        }

        .form-row label {
            line-height: 2em;
            font-weight: bolder;
        }

        .form-row input {
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
            border: none;
            border-bottom: var(--brand-bg) 2px solid;
            background-color: var(--bg-color);
            text-overflow: ellipsis;
            min-height: 2em;
        }

        .form-row input:focus {
            outline: none;
            border: none;
            border-bottom: var(--brand-text) 2px solid;
            background-color: var(--bg-selected);
        }

        #submit {
            border: none;
            font-weight: bolder;
            background: var(--bg-action);
            text-align: center;
        }

    </style>
</head>
<body>

<div id="form-wrapper">
    <h1> Вход </h1>
    <form method="POST" id="login-form">
<!--        {% csrf_token %}-->
<!--        {% if message %}-->
<!--        <div class="form-row value-bad">-->
<!--            {{ message }}-->
<!--        </div>-->
<!--        {% endif %}-->

        <div class="form-row">
            <label for="username">Имя пользователя</label>
            <input type="text" name="username" id="username" required/>
        </div>

        <div class="form-row">
            <label for="password">Пароль</label>
            <input type="password" name="password" id="password" required/>
        </div>

        <div class="form-row">
            <input id="submit" type="submit" value="Войти">
        </div>
    </form>
</div>

<script>
    document.getElementById("username").onkeydown = (e) => {
        if (e.key === 'Enter') {
            document.getElementById("password").focus()
        }
    }

    document.getElementById("password").onkeydown = (e) => {
        if (e.key === 'Enter') {
            document.getElementById("login-form").submit()
        }
    }
</script>
</body>
</html>