<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#ffffff" />
  <title><%= settings.name %></title>
  
  <% if (settings.description) { %>
  <meta name="description" content="<%= settings.description %>">
  <% } %>
  
  <% if (settings.logoUrl) { %>
  <link rel="icon" type="image/jpeg" href="<%= settings.logoUrl %>">
  <% } %>
  
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">  
  <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
  <script>
    tailwind.config = { 
      theme: { 
        extend: { 
          fontFamily: { 
            'sans': ['Inter', 'sans-serif']
          }
        } 
      } 
    }
  </script>
  <style>
    :root {
      --cream-top: #f8e3e0;
      --blue-500: #3b82f6;
      --green-600: #16a34a;
    }
    body { 
      background: #ffffff; 
      color: #1f2937;
      font-family: 'Open Sans', sans-serif !important;
      margin: 0;
    }
  </style>
</head>
<body class="min-h-screen flex flex-col">

  <!-- Konten utama -->
  <div class="flex-1 flex flex-col justify-center items-center px-6 py-16 bg-white">

    <!-- Card Login -->
    <div class="bg-white border border-[#dddddd] rounded-[2px] px-6 py-10 w-full max-w-md flex flex-col gap-6 shadow-sm">
      
      <!-- Logo (jika ada) -->
      <% if (settings.logoUrl) { %>
        <div class="text-center">
          <img src="<%= settings.logoUrl %>" alt="Logo" class="h-12 w-auto object-contain mx-auto mb-2">
          <h2 class="text-base font-medium text-gray-800">Login Dashboard</h2>
        </div>
      <% } %>


      <!-- Alert Error -->
      <% if (typeof error !== 'undefined' && error) { %>
        <div class="bg-[#fef2f2] border border-[#fecaca] text-[#dc2626] px-5 py-4 rounded-[2px] text-[12.5px] font-medium">
          <%= error %>
        </div>
      <% } %>
      
      <!-- Alert Success -->
      <% if (typeof success !== 'undefined' && success) { %>
        <div class="bg-[#f0fdf4] border border-[#bbf7d0] text-[#16a34a] px-5 py-4 rounded-[2px] text-[12.5px] font-medium">
          <%= success %>
        </div>
      <% } %>

      <!-- Form Login -->
      <form method="POST" action="/login" class="flex flex-col gap-4">
        
        <!-- Email/Username -->
        <div>
          <label class="block text-[12.5px] font-medium text-gray-800 mb-2 px-1">Email atau Username</label>
          <input name="login" type="text" placeholder="username" 
                 class="w-full bg-[#f9f9f9] border border-[#dddddd] rounded-[2px] px-4 py-3 text-[12.5px] font-medium text-gray-800 outline-none transition-all focus:border-blue-500 focus:ring-1 focus:ring-blue-500 placeholder:text-[12.5px] placeholder:font-medium placeholder:text-gray-400" 
                 required autocomplete="username"
                 oninput="this.value = this.value.toLowerCase()">
        </div>
        
        <!-- Password -->
        <div>
          <div class="flex items-center justify-between mb-2 px-1">
            <label class="text-[12.5px] font-medium text-gray-800">Password</label>
            <a href="/forgot-password" class="text-[12.5px] font-medium text-blue-500 hover:underline transition-colors">Lupa Password?</a>
          </div>
          <div class="flex items-center bg-[#f9f9f9] border border-[#dddddd] rounded-[2px] transition-all focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500">
            <input id="passwordInput" name="password" type="password" placeholder="••••••••" 
                   class="flex-1 bg-transparent px-4 py-3 text-[12.5px] font-medium text-gray-800 outline-none w-full placeholder:text-[12.5px] placeholder:font-medium placeholder:text-gray-400" 
                   required autocomplete="current-password">
            <button type="button" onclick="togglePassword()" class="w-9 h-9 text-gray-400 hover:text-gray-600 transition-all flex items-center justify-center shrink-0 mr-1">
              <i id="toggleIcon" class="far fa-eye text-[12.5px]"></i>
            </button>
          </div>
        </div>

        <!-- Tombol Masuk -->
        <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white w-full py-3 rounded-[2px] text-[12.5px] font-medium shadow-sm transition-all flex items-center justify-center mt-2">
          Masuk
        </button>
      </form>

      <!-- Link Daftar -->
      <p class="text-center text-[12.5px] font-medium text-gray-700">
        Belum punya akun? 
        <a href="/register" class="text-blue-500 font-medium hover:underline transition-colors">Daftar sekarang</a>
      </p>
    </div>

    <!-- Link bawah -->
    <div class="mt-8 text-center flex flex-col gap-6">
      <a href="/" class="text-[12.5px] font-medium text-blue-600 transition-colors flex items-center justify-center gap-1">
        <i class="fas fa-arrow-left text-[12.5px]"></i> Ke Beranda
      </a>
      
      <div class="text-center flex gap-1">
        <p class="text-[12.5px] text-gray-800 font-medium">Butuh bantuan?</p>
        <a href="<%= settings.contactDeveloper || '#' %>" class="text-[12.5px] font-medium text-blue-600 underline transition-colors flex items-center justify-center gap-1">
          Hubungi tim Support
        </a>
      </div>
    </div>

  </div>

  <script>
    function togglePassword() {
      const passwordInput = document.getElementById('passwordInput');
      const toggleIcon = document.getElementById('toggleIcon');
      if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleIcon.classList.replace('fa-eye', 'fa-eye-slash');
      } else {
        passwordInput.type = 'password';
        toggleIcon.classList.replace('fa-eye-slash', 'fa-eye');
      }
    }
  </script>

</body>
</html>