<section class="section container" style="display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 200px);" data-anim="fade" data-delay="1">
  <div class="form-container" style="max-width: 520px;" data-anim="scale" data-delay="2">
    <h2 class="form-title" data-anim="up" data-delay="2">Lupa Password</h2>
    <p class="form-subtitle" data-anim="up" data-delay="3">Pilih metode pemulihan (WhatsApp atau Email) untuk reset password akun Anda.</p>

    <div id="error-alert" class="alert alert-danger" style="display: <%= typeof error !== 'undefined' && error ? 'flex' : 'none' %>;" data-anim="up" data-delay="4">
      <i class="fa-solid fa-triangle-exclamation"></i> <span><%= typeof error !== 'undefined' && error ? error : '' %></span>
    </div>

    <form action="/auth/forgot-password" method="POST" data-anim="up" data-delay="4" onsubmit="const b=this.querySelector('button[type=submit]');b.disabled=true;b.textContent='Memproses...';">
      <div class="form-group">
        <label class="form-label" for="mlId">ID Mobile Legends</label>
        <input type="text" id="mlId" name="mlId" class="form-input" placeholder="Contoh: 123456789" required>
      </div>

      <div class="form-group" style="margin-bottom: 25px;">
        <label class="form-label" for="mlServer">Server</label>
        <input type="text" id="mlServer" name="mlServer" class="form-input" placeholder="Contoh: 2345" required>
      </div>

      <div class="form-group" style="margin-bottom: 25px;">
        <label class="form-label" for="method">Metode Pemulihan</label>
        <select id="method" name="method" class="form-input" required>
          <option value="email" selected>Email (Link Reset)</option>
          <option value="whatsapp" disabled>WhatsApp (OTP) - Sedang Gangguan</option>
        </select>
      </div>

      <button type="submit" class="btn btn-primary form-btn">Kirim Permintaan</button>
    </form>

    <div class="form-footer" style="margin-top: 16px;">
      Kembali ke <a href="/auth/login" class="form-link">Halaman Login</a>
    </div>
  </div>
</section>
