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

{% block content %}
<div class="min-h-screen flex items-center justify-center px-4">
    <div class="w-full max-w-sm slide-up">
        <div class="text-center mb-10">
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl glass glow-border mb-5">
                <svg class="w-7 h-7 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                </svg>
            </div>
            <h1 class="text-3xl font-bold gradient-text tracking-tight">Dove</h1>
            <p class="mt-2 text-sm text-zinc-500">Local Infrastructure Service for Peaceful Development Experience.</p>
        </div>

        {% if ErrorMessage %}
        <div class="mb-6 rounded-xl bg-red-500/5 border border-red-500/15 px-4 py-3 text-sm text-red-400 fade-in">
            {{ ErrorMessage }}
        </div>
        {% endif %}

        <div class="glass rounded-2xl p-6 glow-border">
            <form method="POST" action="/auth/login" class="space-y-4">
                <div>
                    <label class="block text-xs font-medium text-zinc-400 mb-1.5 ml-1">Username</label>
                    <input type="text" name="username" required autocomplete="username" class="input-field">
                </div>
                <div>
                    <label class="block text-xs font-medium text-zinc-400 mb-1.5 ml-1">Password</label>
                    <input type="password" name="password" required autocomplete="current-password" class="input-field">
                </div>
                <div class="pt-2">
                    <button type="submit" class="btn-primary">Sign in</button>
                </div>
            </form>
        </div>

        <p class="mt-6 text-center text-xs text-zinc-600">Credentials are configured in config.toml</p>
    </div>
</div>
{% endblock %}