<!DOCTYPE html>
<html lang="fa" dir="rtl" class="h-full">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %> | مایا اسلامی</title>
  <link href="/css/output.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body class="h-full bg-gradient-to-br from-primary-50 via-white to-primary-100 dark:from-gray-900 dark:via-black dark:to-gray-800">
  <div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
      <div class="text-center">
        <div class="mx-auto h-20 w-20 bg-primary-600 dark:bg-primary-500 rounded-full flex items-center justify-center shadow-lg dark:shadow-glow">
          <i class="fas fa-crown text-3xl text-white"></i>
        </div>
        <h2 class="mt-6 text-3xl font-bold text-gray-900 dark:text-white">
          پنل مدیریت
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
          برای ورود به پنل مدیریت، اطلاعات خود را وارد کنید
        </p>
      </div>

      <% if (error) { %>
        <div class="bg-red-50 dark:bg-red-900/30 border border-red-300 dark:border-red-700 text-red-800 dark:text-red-200 px-4 py-3 rounded-lg">
          <div class="flex items-center">
            <i class="fas fa-exclamation-triangle ml-2"></i>
            <span>نام کاربری یا رمز عبور اشتباه است</span>
          </div>
        </div>
      <% } %>

      <form class="mt-8 space-y-6" action="/admin/auth" method="POST">
        <div class="space-y-4">
          <div>
            <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              <i class="fas fa-user ml-1"></i>
              نام کاربری
            </label>
            <input
              id="username"
              name="username"
              type="text"
              required
              class="input-field"
              placeholder="نام کاربری خود را وارد کنید"
              autocomplete="username"
            >
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              <i class="fas fa-lock ml-1"></i>
              رمز عبور
            </label>
            <input
              id="password"
              name="password"
              type="password"
              required
              class="input-field"
              placeholder="رمز عبور خود را وارد کنید"
              autocomplete="current-password"
            >
          </div>
        </div>

        <div>
          <button
            type="submit"
            class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-primary-400 transition-all duration-200 shadow-lg dark:shadow-glow hover:shadow-xl"
          >
            <span class="absolute right-0 inset-y-0 flex items-center pr-3">
              <i class="fas fa-sign-in-alt h-5 w-5 text-primary-500 group-hover:text-primary-400"></i>
            </span>
            ورود به پنل مدیریت
          </button>
        </div>

        <div class="text-center">
          <a href="/" class="text-sm text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 transition-colors duration-200">
            <i class="fas fa-arrow-right ml-1"></i>
            بازگشت به سایت اصلی
          </a>
        </div>
      </form>

      <div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-lg">
        <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">
          <i class="fas fa-info-circle ml-1"></i>
          اطلاعات ورود آزمایشی
        </h3>
        <div class="text-xs text-blue-700 dark:text-blue-300 space-y-1">
          <div><strong>نام کاربری:</strong> admin</div>
          <div><strong>رمز عبور:</strong> admin123</div>
        </div>
      </div>
    </div>
  </div>

  <script src="/js/theme.js"></script>
</body>
</html>