@{
    Layout = "_AuthLayout";
    ViewData["Title"] = "Login";
}

<div class="flex max-w-2xl mx-auto min-h-screen items-center justify-center bg-gradient-to-br from-secondary/40 via-background to-accent/20 px-4 py-12">
    <div class="w-full max-w-md">

        <a asp-controller="Home" asp-action="Index" class="mb-8 flex items-center justify-center gap-2.5">
            <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-white text-primary-foreground shadow-sm">
                <img src="https://adiwiyata.dinaslhdki.id/assets/logo-dinas.ico" alt="" width="35">
            </span>

            <span class="flex flex-col leading-tight">
                <span class="font-serif text-lg font-semibold text-foreground">
                    Keanekaragaman Hayati
                </span>

                <span class="text-[10px] uppercase tracking-widest text-muted-foreground">
                    Panel Admin
                </span>
            </span>
        </a>

        <div class="rounded-2xl border border-border bg-card p-8 shadow-lg mt-3">

            <h1 class="font-serif text-2xl text-foreground">
                Masuk Admin
            </h1>

            <p class="mt-1 text-sm text-muted-foreground">
                Masukkan kredensial admin Anda untuk melanjutkan.
            </p>

            <form asp-action="Login" asp-controller="Auth" method="post" class="mt-6 space-y-4">
                <div class="mb-2">
                    <label class="text-sm font-medium text-foreground">
                        Email
                    </label>
                    <input
                        type="email"
                        name="Email"
                        class="mt-1.5 w-full rounded-lg border border-input bg-background px-3.5 py-2.5 text-sm outline-none focus:ring-2 ring-ring/50"
                        placeholder="admin@dlh.jakarta.go.id"
                        required />
                </div>
                <div class="mb-2">
                    <label class="text-sm font-medium text-foreground">
                        Kata Sandi
                    </label>
                    <input
                        type="password"
                        name="Password"
                        class="mt-1.5 w-full rounded-lg border border-input bg-background px-3.5 py-2.5 text-sm outline-none focus:ring-2 ring-ring/50"
                        placeholder="••••••••"
                        minlength="6"
                        required />
                </div>
                <button
                    type="submit"
                    class="flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90">
                    <i data-lucide="log-in" class="h-4 w-4"></i>
                    Masuk
                </button>
            </form>

            @* <div class="mt-6 text-center text-sm text-muted-foreground">
                Belum punya akun?
                <a asp-action="Register"
                   asp-controller="Auth"
                   class="font-medium text-primary hover:underline">
                    Daftar
                </a>
            </div> *@

        </div>

        <p class="mt-6 text-center text-xs text-muted-foreground">
            <a asp-controller="Home"
               asp-action="Index"
               class="hover:text-foreground">
                ← Kembali ke situs
            </a>
        </p>

    </div>
</div>