FormProfile Forms

---
interface Props {
  heading?: string;
  submitLabel?: string;
  defaultValues?: {
    first_name?: string;
    last_name?: string;
    email?: string;
    phone?: string;
    company?: string;
    role?: string;
    bio?: string;
  };
}

const {
  heading = "Profiel bewerken",
  submitLabel = "Wijzigingen opslaan",
  defaultValues = {
    first_name: "Jan",
    last_name: "de Vries",
    email: "jan@bedrijf.nl",
    phone: "+31 6 12 34 56 78",
    company: "Bedrijf BV",
    role: "Marketing Manager",
    bio: "Marketing professional met 10+ jaar ervaring in e-commerce en B2B.",
  },
} = Astro.props;
---

<div class="fpr-wrap">
  <h2 class="fpr-heading">{heading}</h2>
  <form class="fpr-form" onsubmit="return false;" novalidate>
    <div class="fpr-avatar-section">
      <div class="fpr-avatar" aria-hidden="true">
        {defaultValues.first_name?.[0]}{defaultValues.last_name?.[0]}
      </div>
      <div>
        <p class="fpr-avatar-name">{defaultValues.first_name} {defaultValues.last_name}</p>
        <button class="fpr-avatar-btn" type="button">Foto wijzigen</button>
      </div>
    </div>
    <div class="fpr-section">
      <h3 class="fpr-section-title">Persoonlijke gegevens</h3>
      <div class="fpr-row">
        <div class="fpr-field">
          <label class="fpr-label" for="fpr-first">Voornaam</label>
          <input class="fpr-input" type="text" id="fpr-first" name="first_name" value={defaultValues.first_name} autocomplete="given-name" />
        </div>
        <div class="fpr-field">
          <label class="fpr-label" for="fpr-last">Achternaam</label>
          <input class="fpr-input" type="text" id="fpr-last" name="last_name" value={defaultValues.last_name} autocomplete="family-name" />
        </div>
      </div>
      <div class="fpr-row">
        <div class="fpr-field">
          <label class="fpr-label" for="fpr-email">E-mailadres</label>
          <input class="fpr-input" type="email" id="fpr-email" name="email" value={defaultValues.email} autocomplete="email" />
        </div>
        <div class="fpr-field">
          <label class="fpr-label" for="fpr-phone">Telefoonnummer</label>
          <input class="fpr-input" type="tel" id="fpr-phone" name="phone" value={defaultValues.phone} autocomplete="tel" />
        </div>
      </div>
    </div>
    <div class="fpr-section">
      <h3 class="fpr-section-title">Professionele gegevens</h3>
      <div class="fpr-row">
        <div class="fpr-field">
          <label class="fpr-label" for="fpr-company">Bedrijf</label>
          <input class="fpr-input" type="text" id="fpr-company" name="company" value={defaultValues.company} autocomplete="organization" />
        </div>
        <div class="fpr-field">
          <label class="fpr-label" for="fpr-role">Functietitel</label>
          <input class="fpr-input" type="text" id="fpr-role" name="role" value={defaultValues.role} autocomplete="organization-title" />
        </div>
      </div>
      <div class="fpr-field">
        <label class="fpr-label" for="fpr-bio">Biografie</label>
        <textarea class="fpr-textarea" id="fpr-bio" name="bio" rows="3">{defaultValues.bio}</textarea>
      </div>
    </div>
    <div class="fpr-actions">
      <button class="fpr-cancel" type="button">Annuleren</button>
      <button class="fpr-submit" type="submit">{submitLabel}</button>
    </div>
  </form>
</div>

<style>
  .fpr-wrap { max-width: 640px; padding: 2rem 0; }
  .fpr-heading { font-size: 1.75rem; font-weight: 800; color: var(--color-primary, #0a0a0a); margin: 0 0 2rem; }
  .fpr-form { display: flex; flex-direction: column; gap: 2rem; }
  .fpr-avatar-section { display: flex; align-items: center; gap: 1.25rem; }
  .fpr-avatar {
    width: 64px; height: 64px; border-radius: 50%; background: var(--color-accent, #6366f1);
    color: #fff; font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; letter-spacing: 0.05em;
  }
  .fpr-avatar-name { font-size: 1rem; font-weight: 700; color: var(--color-primary, #0a0a0a); margin: 0 0 0.35rem; }
  .fpr-avatar-btn { font-size: 0.8rem; color: var(--color-accent, #6366f1); background: none; border: none; cursor: pointer; padding: 0; font-weight: 600; }
  .fpr-section { display: flex; flex-direction: column; gap: 1.1rem; }
  .fpr-section-title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #999; margin: 0; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e5e5; }
  .fpr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  @media (max-width: 520px) { .fpr-row { grid-template-columns: 1fr; } }
  .fpr-field { display: flex; flex-direction: column; gap: 0.35rem; }
  .fpr-label { font-size: 0.82rem; font-weight: 600; color: var(--color-primary, #0a0a0a); }
  .fpr-input, .fpr-textarea {
    padding: 0.7rem 0.9rem; border: 1.5px solid #ddd; border-radius: 8px;
    font-size: 0.925rem; color: var(--color-primary, #0a0a0a); background: #fff;
    transition: border-color 0.2s; font-family: inherit; box-sizing: border-box; width: 100%;
  }
  .fpr-input:focus, .fpr-textarea:focus { outline: none; border-color: var(--color-accent, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
  .fpr-textarea { resize: vertical; min-height: 80px; }
  .fpr-actions { display: flex; gap: 0.75rem; justify-content: flex-end; padding-top: 0.5rem; border-top: 1px solid #e5e5e5; }
  .fpr-cancel { padding: 0.8rem 1.5rem; background: #f5f5f5; color: #555; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
  .fpr-submit { padding: 0.8rem 1.75rem; background: var(--color-accent, #6366f1); color: #fff; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
  .fpr-submit:hover { opacity: 0.88; }
</style>