{% extends "base.html" %}
{% block page_title %}Book Care{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="/plugins/care-circle/assets/css/care-circle.ui.css?v={{ asset_version | default(value='1') }}">
{% endblock %}
{% block content %}
<section aria-label="Book care" class="care-wrap blocks-workspace" data-plugin="care-circle">
  <div class="blocks-workspace-notice" data-care-notice role="status" aria-live="polite" tabindex="-1" hidden></div>
  <h1>Book Care</h1>
  <p class="care-muted">Choose who needs care, then select a service. You can review providers, availability and payment details in Skill Booking.</p>
  {% if not members %}<p class="care-muted">Enroll or accept a care invitation before booking. <a href="/plugins/care-circle/enroll">Enroll in Care</a></p>{% endif %}
  <label for="care-book-member">Member</label>
  <select id="care-book-member" class="form-control blocks-control-multiline" size="5">
    {% for m in members %}<option value="{{ m.id }}">{{ m.name }}{% if not m.is_self %} (your {% if m.is_nok %}relative{% endif %}{% if m.is_nok and m.is_caretaker %}, {% endif %}{% if m.is_caretaker %}caretaker{% endif %}){% endif %}</option>{% endfor %}
  </select>
  <div class="care-needs">
    {% for n in needs %}
    <div class="care-need-card">
      <h3>{{ n.label }}</h3>
      <button class="btn btn-primary care-book-btn" data-need="{{ n.need_key }}" data-skill="{{ n.skill_slug }}" {% if not members %}disabled{% endif %}>Book {{ n.label }}</button>
    </div>
    {% else %}
    <p class="care-muted">No care services are available yet. Contact your care administrator.</p>
    {% endfor %}
  </div>
</section>
{% endblock %}

{% block scripts %}
<script src="/static/js/blocks-action-client.js"></script>
<script src="/plugins/care-circle/assets/js/care_sos.js"></script>
{% endblock %}