{% extends "base.html" %}
{% block page_title %}My 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="My 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>My Care</h1>
  {% if am_relative or am_caretaker %}
  <p class="care-muted">You are here as {% if am_relative %}a relative{% endif %}{% if am_relative and am_caretaker %} and {% endif %}{% if am_caretaker %}a caretaker{% endif %}. People you care for are listed below.</p>
  {% else %}
  <p class="care-muted">SOS alerts your assigned support team and authorized relatives with your particulars and medical snapshot.</p>
  {% endif %}

  {% if invites %}
  <div class="care-sos-card">
    <h2>Pending invitations for you</h2>
    {% for i in invites %}
    <div class="care-need-card" data-link="{{ i.link_id }}">
      <p><strong>{{ i.member_name }}</strong> invited you as {% if i.link_type == "nok" %}relative{% elif i.link_type == "caretaker" %}caretaker{% else %}{{ i.link_type }}{% endif %}.</p>
      <button class="btn btn-primary care-book-btn" data-decide="approve" data-link="{{ i.link_id }}">Approve</button>
      <button class="btn btn-primary care-book-btn" data-decide="decline" data-link="{{ i.link_id }}">Decline</button>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {% if sos_open %}
  <div class="care-sos-card">
    <h2>Open emergencies</h2>
    <div class="blocks-workspace-table" tabindex="0" role="region" aria-label="Open emergencies; scroll horizontally if needed"><table class="care-table">
      <thead><tr><th scope="col">Member</th><th scope="col">Status</th><th scope="col">Raised</th></tr></thead>
      <tbody>
        {% for e in sos_open %}
        <tr><td>{{ e.member_name }}</td><td>{{ e.status }}</td><td>{{ e.created_at | date_in_tz(timezone=timezone) }}</td></tr>
        {% endfor %}
      </tbody>
    </table></div>
  </div>
  {% endif %}

  {% if circle %}
  <div class="care-sos-card">
    <h2>People you care for</h2>
    {% for c in circle %}
    <div class="care-need-card">
      <p><strong>{{ c.name }}</strong> — {{ c.apartment_name }} {{ c.flat_no }}</p>
      <p class="care-muted">Your role: {% if c.is_nok %}relative{% endif %}{% if c.is_nok and c.is_caretaker %}, {% endif %}{% if c.is_caretaker %}caretaker{% endif %} · {% if c.approved %}approved{% else %}invitation pending{% endif %}</p>
      <p><a class="btn btn-primary care-book-btn" href="/plugins/care-circle/book">Book care</a> <a class="btn btn-primary care-book-btn" href="/plugins/care-circle/documents">Documents</a></p>
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {% if members %}
  <div class="care-sos-card" data-plugin-block-id="care-circle-sos-button">
    <label for="care-member">Member</label>
    <select id="care-member" class="form-control blocks-control-multiline" size="5">
      {% for m in members %}<option value="{{ m.id }}">{{ m.name }} — {{ m.apartment_name }} {{ m.flat_no }}{% 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>
    <button id="care-sos-btn" class="btn btn-danger care-sos-btn" data-action="raise-sos">SOS — Send alert</button>
  </div>
  <h2>Book care without SOS</h2>
  <p class="care-muted">Ambulance, dietician, nurse, emergency doctor — fulfilled via Skill Booking. <a href="/plugins/care-circle/book">Open Book Care</a>.</p>
  {% elif not circle and not invites %}
  <div class="care-sos-card">
    <h2>Welcome to Care Circle</h2>
    <p class="care-muted">You are not linked to any member yet. Enroll yourself or ask a family member to invite you, then approve the invitation here.</p>
    <p><a class="btn btn-primary care-book-btn" href="/plugins/care-circle/enroll">Enroll in Care</a></p>
  </div>
  {% endif %}
</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 %}