{% extends "base.html" %}
{% from "_macros.html" import checkgroup, error_list, area_select with context %}
{% block title %}Become a nanny{% endblock %}
{% block content %}
<div class="auth-layout auth-layout-signup">
  <aside class="auth-intro">
    <span class="auth-kicker">Build your nanny profile</span>
    <h1>Show families the experience and care you bring.</h1>
    <p>Share your skills, availability, and the kind of role you’re looking for. Our team reviews each profile before it appears to families.</p>
    <ul class="auth-benefits">
      <li><span aria-hidden="true">✓</span><span><strong>Tell your story</strong><small>Help families understand your experience and strengths.</small></span></li>
      <li><span aria-hidden="true">✓</span><span><strong>Choose what suits you</strong><small>Set your work arrangement, days, and expected pay.</small></span></li>
      <li><span aria-hidden="true">✓</span><span><strong>Keep details private</strong><small>Your phone number and email aren’t shown in public search.</small></span></li>
    </ul>
    <p class="auth-trust"><span aria-hidden="true">●</span> Profiles are reviewed before families can find you</p>
  </aside>

  <div class="nanny-signup-content">
  <div class="alert">
    <strong>Important fee information:</strong> Employers pay KSh 3,000 for a nanny search. An
    employer may deduct KSh 1,500 from a nanny's wages only where Kenyan law permits and the nanny
    has separately agreed in writing. NannyMatch does not make or authorize that wage deduction.
  </div>

  {{ error_list(errors) }}

  <form method="post" enctype="multipart/form-data" class="card form">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <div class="hp" aria-hidden="true"><label>Website <input name="website" tabindex="-1" autocomplete="off"></label></div>

  <h2>About you</h2>
  <div class="grid">
    <div class="field">
      <label for="full_name">Full name</label>
      <input id="full_name" name="full_name" maxlength="80" autocomplete="name" value="{{ form.get('full_name', '') }}" required>
    </div>
    <div class="field">
      <label for="phone">Mobile number</label>
      <input id="phone" name="phone" type="tel" inputmode="tel" autocomplete="tel" placeholder="0712 345 678" value="{{ form.get('phone', '') }}" required>
    </div>
    <div class="field">
      <label for="email">Email</label>
      <input id="email" name="email" type="email" maxlength="120" autocomplete="email" value="{{ form.get('email', '') }}" required>
    </div>
    <div class="field">
      <label for="area">Where you live</label>
      {{ area_select('area', form.get('area')) }}
    </div>
    <div class="field">
      <label for="profile_image">Clear profile picture</label>
      <input id="profile_image" name="profile_image" type="file" accept="image/jpeg,image/png,image/webp" capture="user" required>
      <small class="muted">Use a recent, well-lit photo of yourself. JPG, PNG or WebP; at least 256 × 256 pixels and no larger than 5 MB. Families see your photo after your profile is approved.</small>
    </div>
    <div class="field">
      <label for="password">Password</label>
      <input id="password" name="password" type="password" autocomplete="new-password" minlength="8" required>
    </div>
    <div class="field">
      <label for="confirm_password">Confirm password</label>
      <input id="confirm_password" name="confirm_password" type="password" autocomplete="new-password" minlength="8" required>
    </div>
  </div>

  <h2>The work you want</h2>
  <fieldset>
    <legend>Arrangement</legend>
    <div class="chips">
      {% for value, label in NANNY_ARRANGEMENTS.items() %}
      <label class="chip"><input type="radio" name="arrangement" value="{{ value }}" {% if form.get('arrangement') == value %}checked{% endif %} required><span>{{ label }}</span></label>
      {% endfor %}
    </div>
  </fieldset>
  <label class="check"><input type="checkbox" name="willing_to_relocate" value="1" {% if form.get('willing_to_relocate') %}checked{% endif %}> I am willing to relocate for a live-in job</label>
  <fieldset>
    <legend>Days you can work</legend>
    {{ checkgroup('days', DAYS, form.getlist('days') or DEFAULT_DAYS) }}
  </fieldset>
  <div class="grid">
    <div class="field">
      <label for="expected_salary">Expected pay per month (KES)</label>
      <input id="expected_salary" name="expected_salary" type="number" inputmode="numeric" min="3000" max="200000" step="500" value="{{ form.get('expected_salary', '') }}" required>
    </div>
    <div class="field">
      <label for="available_from">Available from</label>
      <input id="available_from" name="available_from" type="date" value="{{ form.get('available_from') or today }}" required>
    </div>
  </div>

  <h2>Your experience</h2>
  <div class="field narrow">
    <label for="years_experience">Years as a nanny</label>
    <input id="years_experience" name="years_experience" type="number" min="0" max="50" value="{{ form.get('years_experience', '') }}" required>
  </div>
  <fieldset>
    <legend>Age groups you have cared for</legend>
    {{ checkgroup('age_groups', AGE_GROUPS, form.getlist('age_groups')) }}
  </fieldset>
  <fieldset>
    <legend>Skills</legend>
    {{ checkgroup('skills', SKILLS, form.getlist('skills')) }}
  </fieldset>
  <fieldset>
    <legend>Languages you speak</legend>
    {{ checkgroup('languages', LANGUAGE_OPTIONS, form.getlist('languages')) }}
  </fieldset>
  <div class="field">
    <label for="bio">A short introduction (optional)</label>
    <textarea id="bio" name="bio" rows="4" maxlength="600">{{ form.get('bio', '') }}</textarea>
  </div>

  <label class="check"><input type="checkbox" name="is_adult" value="1" {% if form.get('is_adult') %}checked{% endif %} required> I am 18 years or older</label>
  <label class="check"><input type="checkbox" name="consent" value="1" {% if form.get('consent') %}checked{% endif %} required> I agree that NannyMatch may verify my ID, police clearance and references, and share my profile (without contact details) with families</label>
  <label class="check"><input type="checkbox" name="fee_notice_acknowledged" value="1" {% if form.get('fee_notice_acknowledged') %}checked{% endif %} required> I have read the fee arrangement above. Any wage deduction requires a separate written agreement and must be permitted by law.</label>

  <button class="btn" type="submit">Submit my profile</button>
</form>
</div>
</div>
{% endblock %}