FormSettings Forms

---
/**
 * FormSettings
 * Account-instellingen formulier
 */
interface Props {
  headline?: string;
}
const {
  headline = 'Accountinstellingen',
} = Astro.props;
---

<section class="fst">
  <div class="fst__inner">
    <h1 class="fst__headline">{headline}</h1>

    <div class="fst__card">
      <h2 class="fst__card-title">Persoonlijke gegevens</h2>
      <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="Marc" />
          </div>
          <div class="fst__field">
            <label class="fst__label" for="fst-achternaam">Achternaam</label>
            <input class="fst__input" id="fst-achternaam" type="text" placeholder="Janssen" />
          </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="marc@bedrijf.nl" />
        </div>
        <div class="fst__field">
          <label class="fst__label" for="fst-tel">Telefoonnummer</label>
          <input class="fst__input" id="fst-tel" type="tel" placeholder="+31 6 12 34 56 78" />
        </div>
        <div class="fst__actions">
          <button class="fst__btn" type="submit">Opslaan</button>
        </div>
      </form>
    </div>

    <div class="fst__card">
      <h2 class="fst__card-title">Wachtwoord wijzigen</h2>
      <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="••••••••" />
        </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="••••••••" />
          </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="••••••••" />
          </div>
        </div>
        <div class="fst__actions">
          <button class="fst__btn" type="submit">Wachtwoord bijwerken</button>
        </div>
      </form>
    </div>

    <div class="fst__card">
      <h2 class="fst__card-title">Notificaties</h2>
      <div class="fst__toggles">
        {[
          { id: 'fst-t1', label: 'Wekelijkse rapportages per e-mail', checked: true },
          { id: 'fst-t2', label: 'Nieuwe campagne-inzichten', checked: true },
          { id: 'fst-t3', label: 'Factuurbeheer-meldingen', checked: false },
          { id: 'fst-t4', label: 'Marketing-nieuwsbrief', checked: false },
        ].map(t => (
          <label class="fst__toggle" for={t.id}>
            <span class="fst__toggle-label">{t.label}</span>
            <span class="fst__toggle-track">
              <input class="fst__toggle-input" id={t.id} type="checkbox" checked={t.checked} />
              <span class="fst__toggle-thumb"></span>
            </span>
          </label>
        ))}
      </div>
    </div>
  </div>
</section>

<style>
  .fst {
    background: #f9f9fb;
    padding: 3rem 1.5rem;
    min-height: 100vh;
  }
  .fst__inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .fst__headline {
    font-size: 1.75rem;
    font-weight: 700;
    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: 1rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
  }
  .fst__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .fst__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .fst__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .fst__label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666;
  }
  .fst__input {
    padding: 0.65rem 0.9rem;
    border: 1.5px solid #e0e0e0;
    border-radius: 7px;
    font-size: 0.93rem;
    color: var(--color-primary, #0a0a0a);
    background: #fafafa;
    outline: none;
    font-family: inherit;
    transition: border-color 0.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: 0.7rem 1.5rem;
    background: var(--color-accent, #6366f1);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: inherit;
  }
  .fst__btn:hover { opacity: 0.88; }
  .fst__toggles {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .fst__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    cursor: pointer;
    gap: 1rem;
  }
  .fst__toggle-label {
    font-size: 0.9rem;
    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: #e0e0e0;
    border-radius: 99px;
    transition: background 0.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 0.2s;
  }
  .fst__toggle-input:checked + .fst__toggle-thumb {
    background: var(--color-accent, #6366f1);
  }
  .fst__toggle-input:checked + .fst__toggle-thumb::after {
    transform: translateX(18px);
  }
  @media (max-width: 480px) {
    .fst__row { grid-template-columns: 1fr; }
  }
</style>