FormPassword Forms

---
/**
 * FormPassword — wachtwoord-herstelkaart: één e-mailveld, resetknop en terug-link.
 *
 * Props:
 * - heading?: string
 * - sub?: string
 * - emailLabel?: string
 * - emailPlaceholder?: string
 * - submitLabel?: string
 * - backLabel?: string
 * - backHref?: string
 */
interface Props {
  heading?: string;
  sub?: string;
  emailLabel?: string;
  emailPlaceholder?: string;
  submitLabel?: string;
  backLabel?: string;
  backHref?: string;
}
const {
  heading = 'Wachtwoord vergeten?',
  sub = 'Vul je e-mailadres in en we sturen je een link om je wachtwoord opnieuw in te stellen.',
  emailLabel = 'E-mailadres *',
  emailPlaceholder = 'Je e-mailadres',
  submitLabel = 'Resetlink versturen',
  backLabel = '← Terug naar inloggen',
  backHref = '/inloggen',
} = Astro.props;
---

<section class="bl-section fpw">
  <div class="bl-inner fpw-inner">
    <div class="fpw-card">
      <div class="fpw-header">
        <h2 class="fpw-heading">{heading}</h2>
        <p class="fpw-subtext">{sub}</p>
      </div>
      <form class="fpw-form" novalidate>
        <div class="fpw-field">
          <label class="fpw-label" for="fpw-email">{emailLabel}</label>
          <input class="fpw-input" type="email" id="fpw-email" name="email" placeholder={emailPlaceholder} required autocomplete="email" />
        </div>
        <button class="fpw-submit" type="submit">{submitLabel}</button>
        <a class="fpw-back" href={backHref}>{backLabel}</a>
      </form>
    </div>
  </div>
</section>

<style>
.fpw-inner{display:flex;justify-content:center}
.fpw-card{width:100%;max-width:440px;padding:2.5rem;background:#fff;border:1px solid #e5e5e5;border-radius:16px;box-shadow:0 4px 30px #0000000f}
.fpw-header{text-align:center;margin-bottom:2rem}
.fpw-heading{font-size:1.5rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 .4rem}
.fpw-subtext{font-size:1rem;color:#555;margin:0;line-height:1.6}
.fpw-form{display:flex;flex-direction:column;gap:1.25rem}
.fpw-field{display:flex;flex-direction:column;gap:.4rem}
.fpw-label{font-size:.95rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.fpw-input{padding:.75rem 1rem;border:1.5px solid #ddd;border-radius:8px;font-size:1rem;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .2s;font-family:inherit;box-sizing:border-box}
.fpw-input:focus{outline:none;border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.fpw-submit{padding:.9rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.fpw-submit:hover{opacity:.88}
.fpw-back{display:block;text-align:center;font-size:.95rem;color:#555;text-decoration:none}
.fpw-back:hover{color:var(--color-accent, #6366f1)}
</style>