<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">Reset Password</h2>
    <p class="form-subtitle" data-anim="up" data-delay="3">Buat password baru untuk 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/reset-password" method="POST" data-anim="up" data-delay="4">
      <input type="hidden" name="uid" value="<%= uid %>">
      <div class="form-group">
        <label class="form-label" for="password">Password Baru</label>
        <input type="password" id="password" name="password" class="form-input" minlength="6" required>
      </div>

      <div class="form-group" style="margin-bottom: 25px;">
        <label class="form-label" for="confirmPassword">Ulangi Password Baru</label>
        <input type="password" id="confirmPassword" name="confirmPassword" class="form-input" minlength="6" required>
      </div>

      <button type="submit" class="btn btn-primary form-btn">Simpan Password</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>
