<!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>
  <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 Lupa Password -->
    <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">Lupa Password</h2>
        </div>
      <% } else { %>
        <div class="text-center">
          <h2 class="text-base font-medium text-gray-800">Lupa Password</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 Lupa Password -->
      <form method="POST" action="/forgot-password" class="flex flex-col gap-4" id="forgotPasswordForm">
        <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 atau email" 
                 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
                 oninput="this.value = this.value.toLowerCase()">
        </div>

        <button type="submit" id="forgotPasswordBtn" 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">
          <span id="forgotBtnText">Kirim Link Reset</span>
          <i id="forgotBtnSpinner" class="fas fa-spinner fa-spin text-[12.5px] hidden ml-2"></i>
        </button>
      </form>

      <!-- Link Kembali ke Login -->
      <p class="text-center text-[12.5px] font-medium text-gray-700">
        Ingat password Anda? 
        <a href="/login" class="text-blue-500 font-medium hover:underline transition-colors">Masuk di sini</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 untuk mencegah double submit -->
  <script>
    (function() {
      const form = document.getElementById('forgotPasswordForm');
      const btn = document.getElementById('forgotPasswordBtn');
      const btnText = document.getElementById('forgotBtnText');
      const btnSpinner = document.getElementById('forgotBtnSpinner');

      if (!form || !btn) return;

      let isSubmitting = false;

      form.addEventListener('submit', function(e) {
        // Jika sedang dalam proses, cegah submit lagi
        if (isSubmitting) {
          e.preventDefault();
          return false;
        }

        // Tandai sedang mengirim
        isSubmitting = true;

        // Disable tombol dan ubah tampilannya
        btn.disabled = true;
        btn.classList.add('opacity-70', 'cursor-not-allowed');
        btnText.textContent = 'Mengirim...';
        btnSpinner.classList.remove('hidden');
      });

      // Jika pengguna kembali ke halaman (misal dari cache), reset tombol
      window.addEventListener('pageshow', function(event) {
        if (event.persisted) {
          isSubmitting = false;
          btn.disabled = false;
          btn.classList.remove('opacity-70', 'cursor-not-allowed');
          btnText.textContent = 'Kirim Link Reset';
          btnSpinner.classList.add('hidden');
        }
      });
    })();
  </script>

</body>
</html>