{% extends "static/base.html" %}
{% block content %}
<header class="container">
    <hgroup>
        <h1>{{ name }}</h1>
        <p>{{ description }}</p>
        <nav>
            <ul>
                <li><a href="/">🏠 Home</a></li>
                <li><a href="/docs">💻 API Documentation</a></li>
            </ul>
        </nav>
    </hgroup>
</header>
<main class="container">
    <article>
        <h1>Login</h1>
        <form id="login-form" onsubmit="login(event)">
            <label for="username">
                Username
                <input type="text" id="username" name="username" placeholder="Enter your username" required />
            </label>
            <label for="password">
                Password
                <input type="password" id="password" name="password" placeholder="Enter your password" required />
            </label>
            <div class="button-group">
                <button class="primary">🔑 Login</button>
                <button class="secondary" onclick="window.history.back()">🔙 Cancel</button>
            </div>
        </form>
        <p id="error-message"></p>
    </article>
</main>
{% endblock %}
{% block extra_scripts %}
<script src="/static/login/event.js"></script>
{% endblock %}