{% extends "layouts/default.html" %}
{% block head %}
{% with title = "Login" %}
    {% include "includes/head.html" %}
{% endwith %}
{% endblock %}
{% block content %}
<div class="login-form-container">
<h1>Login</h1>
<form hx-post="{{ config.api_prefix }}/login" class="form login-form enter-trigger" id="login-form"
      hx-trigger="enterKeyUp">
    <div class="form-item">
        <label for="username" class="form-label">Username</label>
        <div class="form-input-group">
            <input id="username" name="username" type="text">
            <div class="constraint-gutter">
                <span class="error-feedback"></span>
            </div>
        </div>
    </div>
    <div class="form-item">
        <label for="password" class="form-label">Password</label>
        <div class="form-input-group">
            <input id="password" name="password" type="password">
            <div class="constraint-gutter">
                <span class="error-feedback"></span>
            </div>
        </div>
    </div>
</form>
<div class="form-row login-buttons">
    <button
        id="register-button"
        class="form-button"
        type="submit"
        name="account"
        hx-post="{{ config.api_prefix }}/register"
        hx-include="#login-form"
        hx-target="#login-form"
    >Register</button>
    <button
        id="login-button"
        class="form-button"
        type="submit"
        name="account"
        hx-post="{{ config.api_prefix }}/login"
        hx-include="#login-form"
        hx-target="#login-form"
    >Login</button>
</div>
<div class="aside">
Passwords must
<ul>
    <li>Have at least 12 characters</li>
    <li>Have at least 2 digits (0-9)</li>
    <li>Have 2 non-digit characters</li>
</ul>
</div>
</div>
{% endblock %}
