{% extends 'auth/base.html' %}

{% block title %}Log in{% endblock %}

{% block content %}
<main class="min-h-[100dvh] w-full flex justify-center items-start p-4 sm:p-8 md:p-12">
    <section class="w-full max-w-4xl mt-2 sm:mt-8">
        <div class="relative rounded-2xl border border-line bg-surface shadow-sm overflow-hidden flex flex-col md:flex-row">
            <div class="w-full md:w-3/5 p-8 md:px-12 md:pb-12 flex flex-col justify-center">
                <header class="mb-12 mt-8 flex items-center justify-between">
                    <a href="{{ url_for('core_bp.home') }}" class="flex items-center gap-1 text-xl font-semibold tracking-tight text-ink">
                        lombik<span class="text-brand">.</span>
                    </a>
                    <a href="{{ url_for('auth_bp.register') }}"
                       class="text-sm text-ink-muted hover:text-ink transition-colors font-medium">
                        Sign up &rarr;
                    </a>
                </header>

                <div class="space-y-1 mb-8">
                    <h2 class="text-2xl font-semibold text-ink tracking-tight">Welcome back</h2>
                    <p class="text-sm text-ink-muted">Enter your details to access your workspace.</p>
                </div>

                <form
                    method="POST"
                    action="{{ url_for('auth_bp.authenticate') }}"
                    hx-post="{{ url_for('auth_bp.authenticate') }}"
                    hx-swap="none"
                    class="space-y-6"
                >
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                    <input type="hidden" name="next" value="{{ next }}" />

                    <div class="space-y-2">
                        <label for="login-email" class="text-[13px] font-medium text-ink">Email address</label>
                        <input
                            id="login-email"
                            name="email"
                            type="email"
                            autocomplete="email"
                            required
                            placeholder="you@company.com"
                            class="w-full px-3.5 py-2.5 text-sm rounded-lg bg-raised border border-line focus:border-ink placeholder:text-ink-muted/60 text-ink transition-colors"
                        />
                    </div>

                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <label for="login-password" class="text-[13px] font-medium text-ink">Password</label>
                            <a href="{{ url_for('auth_bp.forgot_password_page') }}"
                               class="text-xs text-ink-muted hover:text-ink transition-colors">
                                Forgot password?
                            </a>
                        </div>
                        <div class="relative">
                            <input
                                id="login-password"
                                name="password"
                                type="password"
                                autocomplete="current-password"
                                required
                                placeholder="Enter your password"
                                class="w-full pl-3.5 pr-10 py-2.5 text-sm rounded-lg bg-raised border border-line focus:border-ink placeholder:text-ink-muted/60 text-ink transition-colors"
                            />
                            <button
                                type="button"
                                onclick="togglePasswordVisibility('login-password', this)"
                                class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-ink-muted hover:text-ink transition-colors"
                                tabindex="-1"
                                aria-label="Toggle password visibility"
                            >
                                <ion-icon name="eye-off-outline" class="text-[16px]"></ion-icon>
                            </button>
                        </div>
                    </div>

                    <div class="pt-2 space-y-5">
                        <div class="flex items-center gap-2.5">
                            <input
                                id="remember-me"
                                name="remember_me"
                                type="checkbox"
                                class="w-4 h-4 rounded border-line bg-raised text-ink focus:ring-0 cursor-pointer"
                            />
                            <label for="remember-me" class="text-sm text-ink-muted cursor-pointer select-none">
                                Keep me logged in
                            </label>
                        </div>

                        <button
                            type="submit"
                            class="w-full py-2.5 px-4 rounded-lg bg-ink text-canvas font-medium text-sm hover:opacity-90 active:scale-[0.99] transition-all duration-150"
                        >
                            Log in
                        </button>
                    </div>
                </form>
            </div>

            <div class="w-full md:w-2/5 bg-line/30 border-t md:border-t-0 md:border-l border-line p-8 md:p-12 flex flex-col justify-between">
                <div class="space-y-10 mt-8">
                    <div class="space-y-3">
                        <span class="inline-block text-[11px] font-semibold uppercase tracking-widest text-ink-muted">
                            From the scaffold
                        </span>
                        <h3 class="text-2xl font-medium text-ink leading-tight tracking-tight">
                            Batteries included
                        </h3>
                    </div>

                    <ul class="space-y-6">
                        <li class="space-y-1">
                            <span class="text-[11px] font-mono text-brand bg-brand/10 px-2 py-0.5 rounded">Auth</span>
                            <p class="text-[15px] font-medium text-ink mt-2">Sessions &amp; security</p>
                            <p class="text-sm text-ink-muted">Hashed passwords, CSRF protection, rate limiting and role helpers.</p>
                        </li>
                        <li class="space-y-1">
                            <span class="text-[11px] font-mono text-ink-muted bg-line px-2 py-0.5 rounded">HTMX</span>
                            <p class="text-[15px] font-medium text-ink mt-2">Hypermedia-first</p>
                            <p class="text-sm text-ink-muted">Server-rendered partials and hx-* attributes instead of a heavy SPA.</p>
                        </li>
                        <li class="space-y-1">
                            <span class="text-[11px] font-mono text-ink-muted bg-line px-2 py-0.5 rounded">CLI</span>
                            <p class="text-[15px] font-medium text-ink mt-2">Code generation</p>
                            <p class="text-sm text-ink-muted">Models, modules, relationships and full CRUD from the command line.</p>
                        </li>
                    </ul>
                </div>

                <div class="mt-12 pt-8 border-t border-line">
                    <p class="text-sm text-ink-muted">
                        Built with <a href="https://github.com/cleersoftware/lombik" class="text-ink hover:underline">lombik</a>.
                    </p>
                </div>
            </div>
        </div>
    </section>
</main>
{% endblock %}