FormSettings Forms

---
/**
 * FormSettings — accountinstellingen in losse kaarten: persoonlijke gegevens,
 * wachtwoord wijzigen en notificatie-toggles.
 *
 * Props:
 * - heading?: string
 * - toggles?: { label: string; on?: boolean }[]
 */
interface Props {
  heading?: string;
  toggles?: { label: string; on?: boolean }[];
}
const {
  heading = 'Accountinstellingen',
  toggles = [
    { label: 'Wekelijkse rapportages per e-mail', on: true },
    { label: 'Nieuwe campagne-inzichten', on: true },
    { label: 'Factuurbeheer-meldingen', on: false },
    { label: 'Marketing-nieuwsbrief', on: false },
  ],
} = Astro.props;
---

<section class="bl-section fst">
  <div class="bl-inner bl-inner--narrow fst-inner">
    <h2 class="fst__headline">{heading}</h2>
    <div class="fst__card">
      <h3 class="fst__card-title">Persoonlijke gegevens</h3>
      <form class="fst__form" novalidate>
        <div class="fst__row">
          <div class="fst__field">
            <label class="fst__label" for="fst-voornaam">Voornaam</label>
            <input class="fst__input" id="fst-voornaam" type="text" placeholder="Voornaam" />
          </div>
          <div class="fst__field">
            <label class="fst__label" for="fst-achternaam">Achternaam</label>
            <input class="fst__input" id="fst-achternaam" type="text" placeholder="Achternaam" />
          </div>
        </div>
        <div class="fst__field">
          <label class="fst__label" for="fst-email">E-mailadres</label>
          <input class="fst__input" id="fst-email" type="email" placeholder="Je e-mailadres" />
        </div>
        <div class="fst__field">
          <label class="fst__label" for="fst-tel">Telefoonnummer</label>
          <input class="fst__input" id="fst-tel" type="tel" placeholder="Je telefoonnummer" />
        </div>
        <div class="fst__actions"><button class="fst__btn" type="submit">Opslaan</button></div>
      </form>
    </div>
    <div class="fst__card">
      <h3 class="fst__card-title">Wachtwoord wijzigen</h3>
      <form class="fst__form" novalidate>
        <div class="fst__field">
          <label class="fst__label" for="fst-pw-huidig">Huidig wachtwoord</label>
          <input class="fst__input" id="fst-pw-huidig" type="password" placeholder="Huidig wachtwoord" />
        </div>
        <div class="fst__row">
          <div class="fst__field">
            <label class="fst__label" for="fst-pw-nieuw">Nieuw wachtwoord</label>
            <input class="fst__input" id="fst-pw-nieuw" type="password" placeholder="Nieuw wachtwoord" />
          </div>
          <div class="fst__field">
            <label class="fst__label" for="fst-pw-bevestig">Bevestig wachtwoord</label>
            <input class="fst__input" id="fst-pw-bevestig" type="password" placeholder="Bevestig wachtwoord" />
          </div>
        </div>
        <div class="fst__actions"><button class="fst__btn" type="submit">Wachtwoord bijwerken</button></div>
      </form>
    </div>
    <div class="fst__card">
      <h3 class="fst__card-title">Notificaties</h3>
      <div class="fst__toggles">
        {toggles.map((t, i) => (
          <label class="fst__toggle" for={`fst-t${i}`}>
            <span class="fst__toggle-label">{t.label}</span>
            <span class="fst__toggle-track">
              <input class="fst__toggle-input" id={`fst-t${i}`} type="checkbox" checked={t.on} />
              <span class="fst__toggle-thumb"></span>
            </span>
          </label>
        ))}
      </div>
    </div>
  </div>
</section>

<style>
.fst{background:#f9f9fb}
.fst-inner{display:flex;flex-direction:column;gap:1.5rem}
.fst__headline{font-size:1.75rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0}
.fst__card{background:#fff;border:1px solid #ececec;border-radius:12px;padding:1.75rem}
.fst__card-title{font-size:1.05rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 1.25rem;padding-bottom:.75rem;border-bottom:1px solid #f0f0f0}
.fst__form{display:flex;flex-direction:column;gap:1rem}
.fst__row{display:grid;grid-template-columns:1fr;gap:1rem}
.fst__field{display:flex;flex-direction:column;gap:.35rem}
.fst__label{font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#555}
.fst__input{padding:.7rem .9rem;border:1.5px solid #e0e0e0;border-radius:7px;font-size:1rem;color:var(--color-primary, #0a0a0a);background:#fafafa;outline:none;font-family:inherit;transition:border-color .2s;width:100%;box-sizing:border-box}
.fst__input:focus{border-color:var(--color-accent, #6366f1);background:#fff}
.fst__actions{display:flex;justify-content:flex-end}
.fst__btn{padding:.7rem 1.5rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:7px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s;font-family:inherit}
.fst__btn:hover{opacity:.88}
.fst__toggles{display:flex;flex-direction:column;gap:.5rem}
.fst__toggle{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;cursor:pointer;gap:1rem}
.fst__toggle-label{font-size:1rem;color:var(--color-primary, #0a0a0a)}
.fst__toggle-track{position:relative;width:42px;height:24px;flex-shrink:0}
.fst__toggle-input{opacity:0;width:0;height:0;position:absolute}
.fst__toggle-thumb{position:absolute;inset:0;background:#d4d4d4;border-radius:99px;transition:background .2s;cursor:pointer}
.fst__toggle-thumb:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s}
.fst__toggle-input:checked+.fst__toggle-thumb{background:var(--color-accent, #6366f1)}
.fst__toggle-input:checked+.fst__toggle-thumb:after{transform:translate(18px)}
@media(min-width:600px){.fst__row{grid-template-columns:1fr 1fr}}
</style>