{% extends "website/base.html" %}
{% block content %}
<section class="section">
  <div class="card">
    <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap">
      <div>
        <h1 class="h1" style="margin:0">Staff Care Dashboard</h1>
        <p class="p">Intake overview, caregiver availability, and assignments.</p>
      </div>
      <a class="btn btn-accent" href="{% url 'website:staff_assignment_create' %}">Create Assignment</a>
    </div>

    <div class="sep"></div>

    <div class="grid grid-2">
      <div>
        <h2 class="h2">Recent Care Requests</h2>
        <div class="grid" style="gap:10px">
          {% for cr in care_requests %}
            <div class="card soft card-tight">
              <div style="display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap">
                <div>
                  <div style="font-weight:900">{{ cr.full_name }}</div>
                  <div class="small">{{ cr.get_request_type_display }} • {{ cr.get_status_display }}</div>
                </div>
                <span class="chip">{{ cr.location|default:"—" }}</span>
              </div>
              <div class="sep"></div>
              <div class="small"><b>Phone:</b> {{ cr.phone }}{% if cr.email %} • <b>Email:</b> {{ cr.email }}{% endif %}</div>
              <div class="small" style="white-space:pre-line"><b>Needs:</b> {{ cr.care_needs|truncatechars:220 }}</div>
            </div>
          {% empty %}
            <div class="small">No care requests yet.</div>
          {% endfor %}
        </div>
      </div>

      <div>
        <h2 class="h2">Active Caregivers</h2>
        <div class="grid" style="gap:10px">
          {% for cg in caregivers %}
            <div class="card soft card-tight">
              <div style="font-weight:900">{{ cg.user.get_full_name|default:cg.user.username }}</div>
              <div class="small">{{ cg.location }} • {{ cg.phone }}</div>
              <div class="small"><b>Availability:</b> {{ cg.availability|default:"—" }}</div>
              <div class="small"><b>Skills:</b> {{ cg.skills|default:"—" }}</div>
            </div>
          {% empty %}
            <div class="small">No caregivers registered yet.</div>
          {% endfor %}
        </div>

        <div class="sep"></div>

        <h2 class="h2">Recent Assignments</h2>
        <div class="grid" style="gap:10px">
          {% for a in assignments %}
            <div class="card soft card-tight">
              <div style="font-weight:900">{{ a.caregiver }}</div>
              <div class="small">Assigned to: {{ a.care_request.full_name }} • {{ a.get_status_display }}</div>
              <div class="small">Start: {{ a.start_date }}{% if a.end_date %} • End: {{ a.end_date }}{% endif %}</div>
            </div>
          {% empty %}
            <div class="small">No assignments yet.</div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}