{% extends "base.html" %}
{% block content %}

<div class="flex items-center justify-center min-h-screen px-4">

    <div class="w-full max-w-md bg-[color:var(--color-bg)] border border-[color:var(--color-border)]
                shadow rounded-xl p-8 space-y-6">

        <h1 class="text-2xl font-bold text-center text-[color:var(--color-text)]">
            Login to MTDify Local
        </h1>

        <form method="post" class="space-y-5">
            {% csrf_token %}

            <!-- Username -->
            <div>
                <label class="block text-sm font-semibold text-[color:var(--color-text-muted)] mb-1">
                    Username
                </label>

                <input type="text"
                       name="username"
                       value="{{ form.username.value|default:'' }}"
                       class="w-full border border-[color:var(--color-border)] rounded-lg p-3
                              bg-[color:var(--color-bg-muted)] text-[color:var(--color-text)]
                              focus:ring-2 focus:ring-[color:var(--color-primary)]" />

                {% for error in form.username.errors %}
                    <p class="text-red-600 text-sm">{{ error }}</p>
                {% endfor %}
            </div>

            <!-- Password -->
            <div>
                <label class="block text-sm font-semibold text-[color:var(--color-text-muted)] mb-1">
                    Password
                </label>

                <input type="password"
                       name="password"
                       class="w-full border border-[color:var(--color-border)] rounded-lg p-3
                              bg-[color:var(--color-bg-muted)] text-[color:var(--color-text)]
                              focus:ring-2 focus:ring-[color:var(--color-primary)]" />

                {% for error in form.password.errors %}
                    <p class="text-red-600 text-sm">{{ error }}</p>
                {% endfor %}
            </div>

            {% if form.non_field_errors %}
                <div class="text-red-600 text-sm">{{ form.non_field_errors }}</div>
            {% endif %}

            <!-- Submit -->
            <button type="submit"
                class="w-full py-3 rounded-lg bg-[color:var(--color-primary)]
                       text-[color:var(--color-primary-contrast)]
                       hover:bg-[color:var(--color-accent)] transition">
                Login
            </button>
        </form>

        <p class="text-center text-xs text-[color:var(--color-text-muted)] pt-4 leading-relaxed">
            This login is for your local device only.  
            No accounts, no emails, no cloud storage — your data remains offline.
        </p>

    </div>
</div>

{% endblock %}