{% extends "base.html" %}
{% from "_macros.html" import checkgroup, error_list, area_select with context %}
{% block content %}
<section class="hero">
  <h1>Find a nanny who fits your family</h1>
  <p>Tell us what you need. We match you with vetted nannies and explain why each one fits.</p>
</section>

{{ error_list(errors) }}

<form method="get" action="{{ url_for('search') }}" class="card form">
  <h2>Where and when</h2>
  <div class="grid">
    <div class="field">
      <label for="area">Your area</label>
      {{ area_select('area', args.get('area')) }}
    </div>
    <div class="field">
      <label for="start_date">Start date</label>
      <input type="date" id="start_date" name="start_date" min="{{ today }}" value="{{ args.get('start_date') or today }}" required>
    </div>
  </div>

  <fieldset>
    <legend>Type of nanny</legend>
    <div class="chips">
      {% for value, label in PARENT_ARRANGEMENTS.items() %}
      <label class="chip">
        <input type="radio" name="arrangement" value="{{ value }}" {% if (args.get('arrangement') or 'day') == value %}checked{% endif %}>
        <span>{{ label }}</span>
      </label>
      {% endfor %}
    </div>
  </fieldset>

  <fieldset>
    <legend>Days you need care</legend>
    {{ checkgroup('days', DAYS, args.getlist('days') or DEFAULT_DAYS) }}
  </fieldset>

  <h2>Your children</h2>
  <fieldset>
    <legend>Age groups (the nanny must be experienced with all you select)</legend>
    {{ checkgroup('age_groups', AGE_GROUPS, args.getlist('age_groups')) }}
  </fieldset>

  <h2>What matters to you</h2>
  <fieldset>
    <legend>Must-have skills</legend>
    {{ checkgroup('required_skills', SKILLS, args.getlist('required_skills')) }}
  </fieldset>
  <fieldset>
    <legend>Nice-to-have skills</legend>
    {{ checkgroup('preferred_skills', SKILLS, args.getlist('preferred_skills')) }}
  </fieldset>
  <fieldset>
    <legend>Preferred languages</legend>
    {{ checkgroup('preferred_languages', LANGUAGE_OPTIONS, args.getlist('preferred_languages')) }}
  </fieldset>

  <div class="grid">
    <div class="field">
      <label for="budget_max">Maximum monthly budget (KES)</label>
      <input type="number" id="budget_max" name="budget_max" min="1000" max="500000" step="500" inputmode="numeric" value="{{ args.get('budget_max', '') }}" placeholder="e.g. 18000" required>
    </div>
    <div class="field">
      <label for="min_experience">Minimum experience</label>
      <select id="min_experience" name="min_experience">
        {% for years, label in [(0, 'Any'), (1, '1+ year'), (2, '2+ years'), (3, '3+ years'), (5, '5+ years'), (8, '8+ years')] %}
        <option value="{{ years }}" {% if args.get('min_experience', '0') == years|string %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <button class="btn" type="submit">Find nannies</button>
</form>
{% endblock %}