<!DOCTYPE html>
<html lang="tr">
<head>
  <%- include('../partials/head') %>
  <title>Admin Girişi — LexaClip</title>
</head>
<body class="flex min-h-screen items-center justify-center bg-slate-950 text-slate-100 antialiased">

  <div class="w-full max-w-sm px-6">
    <div class="mb-8 text-center">
      <span class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-500 text-xl font-bold text-white">T</span>
      <h1 class="text-2xl font-bold">LexaClip Admin</h1>
      <p class="mt-1 text-sm text-slate-400">Yönetim paneline giriş yapın</p>
    </div>

    <% if (error) { %>
      <div class="mb-4 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-300">
        <%= error %>
      </div>
    <% } %>

    <form method="POST" action="/admin/login" class="space-y-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-6">
      <div>
        <label for="username" class="mb-1 block text-sm font-medium text-slate-300">Kullanıcı Adı</label>
        <input type="text" id="username" name="username" required autofocus
          class="w-full rounded-lg border border-slate-700 bg-slate-950 px-4 py-2.5 text-slate-100 outline-none transition focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500" />
      </div>
      <div>
        <label for="password" class="mb-1 block text-sm font-medium text-slate-300">Şifre</label>
        <input type="password" id="password" name="password" required
          class="w-full rounded-lg border border-slate-700 bg-slate-950 px-4 py-2.5 text-slate-100 outline-none transition focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500" />
      </div>
      <button type="submit"
        class="w-full rounded-lg bg-indigo-500 py-2.5 font-semibold text-white transition hover:bg-indigo-400">
        Giriş Yap
      </button>
    </form>
  </div>

</body>
</html>
