{% extends "base.html" %}
{% from "_macros.html" import badges %}
{% block title %}Your matches{% endblock %}
{% block content %}
<section class="results-head">
  <h1>{{ total }} nann{{ 'y' if total == 1 else 'ies' }} match your search</h1>
  <p class="muted">
    {{ criteria.area }} · {{ PARENT_ARRANGEMENTS[criteria.arrangement] }} · up to {{ criteria.budget_max|kes }}/month
    · from {{ criteria.start_date.strftime('%d %b %Y') }}
    · <a href="{{ url_for('index') }}?{{ query }}">Edit search</a>
  </p>
  {% if total > matches|length %}<p class="muted">Showing the top {{ matches|length }}.</p>{% endif %}
</section>

{% if not matches %}
<div class="card empty">
  <h2>No exact matches yet</h2>
  <p>Every nanny we show meets all of your must-haves. To see more people, try one of these:</p>
  <ul>
    <li>Raise your budget a little</li>
    <li>Move some skills from <em>must-have</em> to <em>nice-to-have</em></li>
    <li>Choose fewer days, or a later start date</li>
    <li>Try the other arrangement (live-in or day)</li>
  </ul>
  <a class="btn" href="{{ url_for('index') }}?{{ query }}">Adjust search</a>
</div>
{% endif %}

<div class="stack">
  {% for m in matches %}
  {% set n = m.nanny %}
  <article class="card nanny">
    <div class="nanny-top">
      {% if n.profile_image %}
      <img class="profile-picture" src="{{ url_for('nanny_profile_photo', nanny_id=n.id) }}" alt="Profile picture of {{ n.full_name }}">
      {% endif %}
      <div>
        <h2><a href="{{ url_for('nanny_profile', nanny_id=n.id) }}">{{ n.full_name }}</a></h2>
        <p class="muted">{{ n.area }}, {{ n.county }} · {{ n.years_experience }} yr{{ '' if n.years_experience == 1 else 's' }} experience · {{ NANNY_ARRANGEMENTS[n.arrangement] }}</p>
      </div>
      <div class="score" aria-label="Match score {{ m.score }} percent">
        <strong>{{ m.score }}%</strong>
        <progress max="100" value="{{ m.score }}"></progress>
        <span class="muted">match</span>
      </div>
    </div>
    {{ badges(n) }}
    <ul class="reasons">{% for r in m.reasons %}<li>{{ r }}</li>{% endfor %}</ul>
    <div class="nanny-foot">
      <span class="price">{{ n.expected_salary|kes }}<small>/month</small></span>
      <a class="btn small" href="{{ url_for('nanny_profile', nanny_id=n.id) }}">View profile</a>
    </div>
  </article>
  {% endfor %}
</div>
{% endblock %}