{% extends "layouts/base.html" %}

{% block title %}Admin Login - Sneaky Klaus{% endblock %}

{% block content %}
<article style="max-width: 600px; margin: 4rem auto;">
    <header>
        <h1>Admin Login</h1>
        <p>Sign in to manage your gift exchanges.</p>
    </header>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div role="alert" style="margin-bottom: 1rem; {% if category == 'error' %}color: var(--pico-form-element-invalid-border-color);{% else %}color: var(--pico-primary);{% endif %}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <form method="POST" action="{{ url_for('admin.login') }}">
        {{ form.hidden_tag() }}

        <div>
            <label for="email">
                {{ form.email.label.text }}
                {{ form.email(required=True) }}
            </label>
            {% if form.email.errors %}
                <small style="color: var(--pico-form-element-invalid-border-color);">
                    {{ form.email.errors[0] }}
                </small>
            {% endif %}
        </div>

        <div>
            <label for="password">
                {{ form.password.label.text }}
                {{ form.password(required=True) }}
            </label>
            {% if form.password.errors %}
                <small style="color: var(--pico-form-element-invalid-border-color);">
                    {{ form.password.errors[0] }}
                </small>
            {% endif %}
        </div>

        <div>
            <label>
                {{ form.remember_me() }}
                {{ form.remember_me.label.text }}
            </label>
        </div>

        <button type="submit">Login</button>
    </form>
</article>
{% endblock %}