@args (String message, Integer counter)

@js => {
<script>const counter = @counter;</script>
<script src="/js/login.js"></script>
}

@layout.template("Login", RockerContent.NONE, js) -> {
<div class="flex">
    <h1>Login</h1>

    <form action="/user/login" method="post">
        <div>
            <label for="username">Username:</label>
            <input autocomplete="off" autofocus id="username" name="username" required type="text"/>
        </div>
        <div>
            <label for="password">Password:</label>
            <input id="password" name="password" required type="password"/>
        </div>

        <div>
            @if(message.length() > 0) {
            <small>@message</small>
            }

            @if(counter > 0) {
            <small id="tryAgain">Please try again in <span id="counter">@counter</span> seconds.</small>
            }
        </div>

        <div>
            <button type="submit">Login</button>
        </div>
    </form>
</div>
}