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

{% block title %}Sign in · Money Tracker{% endblock %}

{% block content %}
<section aria-labelledby="login-title" class="mx-auto mt-10 max-w-md">
    <div class="rounded-lg border border-line bg-paper p-6 shadow-panel sm:p-8">
        <p class="text-sm font-semibold uppercase text-muted">Household ledger</p>
        <h1 id="login-title" class="mt-2 text-2xl font-semibold">Sign in</h1>
        <p class="mt-2 text-sm text-muted">Enter the household web password to continue.</p>
        {% if error %}
        <p id="login-error" class="mt-5 rounded-md bg-coral-pale px-3 py-2 text-sm text-coral" role="alert">{{ error
            }}</p>
        {% endif %}
        <form action="{{ url_for('web_auth.login') }}" class="mt-6 space-y-4" method="post">
            <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
            <div>
                <label class="mb-1 block text-sm font-medium" for="password">Web password</label>
                <input autocomplete="current-password"
                    class="w-full rounded-md border border-line bg-paper px-3 py-2.5 text-base outline-none focus:border-forest-bright focus:ring-2 focus:ring-forest-bright/20"
                    id="password" name="password" type="password" {% if error %}aria-describedby="login-error"
                    aria-invalid="true" {% endif %} required>
            </div>
            <button
                class="w-full rounded-md bg-forest px-4 py-3 font-semibold text-white hover:bg-forest-bright focus:outline-none focus:ring-2 focus:ring-forest focus:ring-offset-2"
                type="submit">Sign in</button>
        </form>
    </div>
</section>
{% endblock %}