{% extends "base.html" %}
{% from "_macros.html" import checkgroup, error_list, area_select, bar_chart with context %}
{% block title %}My nanny account{% endblock %}
{% block content %}
<section class="hero dashboard-hero">
  <div class="hero-copy">
  <p class="eyebrow">NANNY WORKSPACE</p>
  <h1>Welcome back, {{ nanny.full_name.split(' ')[0] }}</h1>
  <p>Update your profile and availability, or securely add documents for our review.</p>
  </div>
  <div class="hero-actions">
    <a class="btn subtle" href="#profile">Edit profile <span aria-hidden="true">↓</span></a>
    <a class="btn subtle" href="{{ url_for('account_profile') }}">Profile picture</a>
    <a class="btn subtle" href="{{ url_for('account_password') }}">Account settings</a>
  </div>
</section>

<section class="dashboard-summary">
  <article class="card">
    <span class="metric-label">Application status</span>
    <strong class="status-pill status-{{ nanny.status }}">{{ nanny.status|replace('_', ' ')|title }}</strong>
    {% if nanny.status == 'pending' %}
    <p class="muted">Your application is waiting for admin review. It will not appear in parent search until approved.</p>
    {% elif nanny.status == 'rejected' %}
    <p class="muted">Your profile is not visible to families. Contact the service administrator if you need clarification.</p>
    {% else %}
    <p class="muted">Your profile can appear in parent search when it matches their needs. It is hidden while you have an active placement.</p>
    {% endif %}
  </article>
  <article class="card">
    <span class="metric-label">Introduction requests</span>
    <strong class="dashboard-number">{{ introduction_count }}</strong>
    <p class="metric-foot">Coordinated by the NannyMatch team</p>
  </article>
  <article class="card">
    <span class="metric-label">Active placements</span>
    <strong class="dashboard-number">{{ placements|selectattr('status', 'equalto', 'active')|list|length }}</strong>
    <p class="metric-foot">Agreements accepted by you and the parent</p>
  </article>
</section>

<section class="chart-grid" aria-label="Your activity charts">
  {{ bar_chart("Introduction requests", "Requests for your profile received over the last six months.", inquiry_activity) }}
  {{ bar_chart("Placement status", "Your current and past placement agreements.", placement_status) }}
</section>

<section class="dashboard-section card">
  <div class="section-heading">
    <div><h2>Placements and proposed terms</h2><p>Review family, duties, dates, and salary. Keep a signed employment agreement separately.</p></div>
  </div>
  <div data-placement-live data-fragment-url="{{ url_for('placement_fragment') }}">
    <p class="alert" data-live-notice role="status" hidden></p>
    <div data-placement-cards>{% include "placement_cards.html" %}</div>
  </div>
</section>
<div class="dashboard-section" data-attendance-live data-fragment-url="{{ url_for('attendance_fragment') }}">
  <p class="alert" data-attendance-notice role="status" hidden></p>
  <div data-attendance-panel>{% include "attendance_panel.html" %}</div>
</div>
<script src="{{ url_for('static', filename='socket.io.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='placement-live.js') }}" defer></script>

{{ error_list(errors) }}

<form id="profile" method="post" enctype="multipart/form-data" class="dashboard-section card form">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <div class="section-heading">
    <div><h2>Profile and availability</h2><p>Keep your details current so families can find the right fit.</p></div>
  </div>
  <div class="grid">
    <div class="field">
      <label for="full_name">Full name</label>
      <input id="full_name" name="full_name" maxlength="80" value="{{ form.get('full_name', nanny.full_name) }}" required>
    </div>
    <div class="field">
      <label for="phone">Mobile number</label>
      <input id="phone" name="phone" type="tel" inputmode="tel" value="{{ form.get('phone', nanny.phone) }}" required>
    </div>
    <div class="field">
      <label for="email">Email</label>
      <input id="email" name="email" type="email" maxlength="120" value="{{ form.get('email', nanny.email) }}" required>
    </div>
    <div class="field">
      <label for="area">Where you live</label>
      {{ area_select('area', form.get('area', nanny.area)) }}
    </div>
  </div>

  <h2>Availability and work preferences</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', nanny.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') if form else nanny.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') if form else nanny.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" min="3000" max="200000" step="500" value="{{ form.get('expected_salary', nanny.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', nanny.available_from) }}" required>
    </div>
    <div class="field">
      <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', nanny.years_experience) }}" required>
    </div>
  </div>
  <fieldset>
    <legend>Age groups you have cared for</legend>
    {{ checkgroup('age_groups', AGE_GROUPS, form.getlist('age_groups') if form else nanny.age_groups) }}
  </fieldset>
  <fieldset>
    <legend>Skills</legend>
    {{ checkgroup('skills', SKILLS, form.getlist('skills') if form else nanny.skills) }}
  </fieldset>
  <fieldset>
    <legend>Languages you speak</legend>
    {{ checkgroup('languages', LANGUAGE_OPTIONS, form.getlist('languages') if form else nanny.languages) }}
  </fieldset>
  <div class="field">
    <label for="bio">A short introduction</label>
    <textarea id="bio" name="bio" rows="4" maxlength="600">{{ form.get('bio', nanny.bio) }}</textarea>
  </div>

  <h2>Supporting documents</h2>
  <p class="muted">PDF, JPG or PNG; max 5 MB per file. Documents are private and available only to you and the admin team. Uploading a document does not mean it has been verified.</p>
  <div class="grid">
    <div class="field">
      <label for="document_type">Document type</label>
      <select id="document_type" name="document_type">
        <option value="">No document this time</option>
        {% for value, label in DOCUMENT_TYPES.items() %}
        <option value="{{ value }}" {% if form.get('document_type') == value %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="field">
      <label for="document">Choose document</label>
      <input id="document" name="document" type="file" accept=".pdf,.jpg,.jpeg,.png">
    </div>
  </div>
  {% if documents %}
  <h3>Uploaded documents</h3>
  <ul>
    {% for document in documents %}
    <li>
      <a href="{{ url_for('nanny_document', document_id=document.id) }}">{{ DOCUMENT_TYPES[document.document_type] }}</a> · {{ document.created_at }} UTC
      <form method="post" action="{{ url_for('nanny_document_delete', document_id=document.id) }}" class="inline">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button class="linkish" type="submit">Remove</button>
      </form>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="muted">No documents uploaded yet.</p>
  {% endif %}
  <button class="btn" type="submit">Save profile and availability</button>
</form>
{% endblock %}