{% extends "base.html" %}
{% from "_macros.html" import error_list %}
{% block title %}{% if mode == 'signup' %}Create account{% else %}Sign in{% endif %}{% endblock %}
{% block content %}
<div class="auth-layout">
  <aside class="auth-intro">
    <span class="auth-kicker">NannyMatch for families</span>
    <h1>Find care that feels right for your family.</h1>
    <p>Tell us what you need. We’ll help you explore nanny profiles that fit your family, schedule, and preferences.</p>
    <ul class="auth-benefits">
      <li><span aria-hidden="true">✓</span><span><strong>Matches that make sense</strong><small>Explore options based on your family’s needs.</small></span></li>
      <li><span aria-hidden="true">✓</span><span><strong>Helpful profile details</strong><small>Review experience, skills, and availability.</small></span></li>
      <li><span aria-hidden="true">✓</span><span><strong>Your choice, your pace</strong><small>Request an introduction when you’re ready.</small></span></li>
    </ul>
    <p class="auth-trust"><span aria-hidden="true">●</span> A more thoughtful way to find childcare</p>
  </aside>

  <section class="card form auth-box auth-form-card">
    <p class="eyebrow">{% if mode == 'signup' %}Get started{% else %}Welcome back{% endif %}</p>
    <h2>{% if mode == 'signup' %}Create your parent account{% else %}Sign in to your account{% endif %}</h2>
    <p class="muted auth-description">To view nanny profiles and request introductions, you need a parent account. A KES 3,000 one-time access fee is charged before profiles unlock.</p>
    {{ error_list(errors) }}

    <form method="post" enctype="multipart/form-data" action="{{ url_for('parent_auth', mode=mode, next=next_url) }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      {% if mode == 'signup' %}
        <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="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. Your photo is private to your account.</small>
        </div>
      {% endif %}
      <div class="field">
        <label for="email">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" value="{{ form.get('email', '') }}" required>
      </div>
      {% if mode == 'signup' %}
        <div class="field">
          <label for="phone">Phone</label>
          <input id="phone" name="phone" type="tel" inputmode="tel" autocomplete="tel" placeholder="0712 345 678" value="{{ form.get('phone', '') }}" required>
        </div>
      {% endif %}
      <div class="field">
        <label for="password">Password</label>
        <input id="password" name="password" type="password" autocomplete="{% if mode == 'signup' %}new-password{% else %}current-password{% endif %}" minlength="8" required>
      </div>
      {% if mode == 'signup' %}
        <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>
      {% endif %}
      <button class="btn auth-submit" type="submit">{% if mode == 'signup' %}Create parent account{% else %}Sign in{% endif %}<span aria-hidden="true">→</span></button>
    </form>

    <div class="auth-form-footer">
      {% if mode == 'signup' %}
        <p>Already have an account? <a href="{{ url_for('parent_auth', mode='login', next=next_url) }}">Sign in</a></p>
      {% else %}
        <p class="auth-account-links"><a href="{{ url_for('forgot_account_password', account_type='parent') }}">Forgot password?</a><a href="{{ url_for('account_verification', account_type='parent') }}">Resend verification email</a></p>
        <p>New to NannyMatch? <a href="{{ url_for('parent_auth', mode='signup', next=next_url) }}">Create an account</a></p>
      {% endif %}
    </div>
  </section>
</div>
{% endblock %}