{% extends "base.html" %}
{% import "components/macros.html" as ui %}

{% block title %}Sign In - Stick{% endblock %}

{% block content %}
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-1 bg-sky-500"></div>
        
        <div class="text-center mb-8">
            <h2 class="text-3xl font-extrabold text-slate-100 tracking-tight">Welcome Back</h2>
            <p class="mt-2 text-sm text-slate-400">Sign in to manage your tasks</p>
        </div>

        {% if let Some(err) = error %}
            <div class="mb-6 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-2.5">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 flex-shrink-0 mt-0.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
                </svg>
                <span>{{ err }}</span>
            </div>
        {% endif %}

        <form class="space-y-5" action="/auth/login" method="post">
            {{ ui::text_input(id="username", name="username", label="Username", type="text", placeholder="Enter username", required=true) }}
            
            {{ ui::text_input(id="password", name="password", label="Password", type="password", placeholder="••••••••", required=true) }}

            <div>
                {{ ui::button(label="Sign In", variant="indigo", type="submit", extra_class="w-full py-3.5 shadow-lg shadow-sky-500/10") }}
            </div>
        </form>

        <div class="mt-6 text-center text-sm text-slate-400">
            Don't have an account? 
            <a href="/auth/register" class="font-medium text-sky-400 hover:underline">Sign up now</a>
        </div>
    </div>
</div>
{% endblock %}