{% if not placements %}
  <div class="card"><p>No placement agreements yet.</p></div>
{% else %}
  <div class="stack">
  {% for placement in placements %}
    <article class="card placement-card" data-placement-id="{{ placement.id }}">
      <div class="nanny-top">
        <div>
          <h3>{% if role == 'parent' %}{{ placement.nanny_name }}{% else %}Your employer{% endif %}</h3>
          {% if role == 'nanny' and placement.status == 'active' %}
          <p>{{ placement.parent_name }} · {{ placement.parent_phone }}</p>
          {% endif %}
        </div>
        <strong class="status-pill status-{{ placement.status }}">{{ placement.status|title }}</strong>
      </div>
      <dl class="facts">
        <dt>Dates</dt><dd>{{ placement.start_date }} to {{ placement.end_date }}</dd>
        <dt>Monthly salary</dt><dd>{{ placement.monthly_salary|kes }}</dd>
        <dt>Duties</dt><dd>{{ placement.duties }}</dd>
        <dt>Work location</dt><dd>{{ placement.family_address }}</dd>
        <dt>Emergency contact</dt><dd>{{ placement.emergency_phone }}</dd>
      </dl>
      {% if placement.status == 'proposed' %}
        {% if role == 'nanny' %}
        <p class="muted">Review these proposed terms. Accept only if you and the parent have agreed to them.</p>
        <form method="post" action="{{ url_for('nanny_respond_placement', agreement_id=placement.id) }}" class="actions-inline">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="btn small" name="action" value="accept" type="submit">Accept terms</button>
          <button class="btn small danger" name="action" value="decline" type="submit">Decline</button>
        </form>
        {% else %}
        <p class="muted">Waiting for the nanny to respond. The placement is not active yet.</p>
        {% endif %}
      {% elif placement.status == 'active' and role == 'parent' %}
        <div class="actions-inline">
          <a class="btn small" href="{{ url_for('placement_chat', agreement_id=placement.id) }}">Chat with nanny</a>
          <a class="btn small" href="{{ url_for('parent_renew_placement', agreement_id=placement.id) }}">Propose renewal</a>
          <form method="post" action="{{ url_for('parent_end_placement', agreement_id=placement.id) }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <label class="sr-only" for="end-reason-{{ placement.id }}">Reason (optional)</label>
            <input id="end-reason-{{ placement.id }}" name="end_reason" maxlength="250" placeholder="Reason (optional)">
            <button class="btn small danger" type="submit">End placement</button>
          </form>
        </div>
      {% elif placement.status == 'active' and role == 'nanny' %}
        <a class="btn small" href="{{ url_for('placement_chat', agreement_id=placement.id) }}">Chat with parent</a>
      {% elif placement.status == 'ended' and placement.end_reason %}
        <p class="muted">Update: {{ placement.end_reason }}</p>
      {% endif %}
      {% if placement.accepted_at %}<p class="muted">Accepted {{ placement.accepted_at }} UTC. Keep your signed employment agreement separately.</p>{% endif %}
    </article>
  {% endfor %}
  </div>
{% endif %}