{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}
<div class="section-header">
  <h2 style="font-size:0.9375rem;font-weight:600;margin:0 0 0.75rem">
    Needs Attention
    <span style="font-weight:400;font-size:0.75rem;color:var(--subtext0)">
      (cleaning &gt; {{ stale_days }}d, playtime &gt; {{ play_stale_days }}d, or never logged)
    </span>
  </h2>
</div>
{% if needs_attention %}
<div class="table-wrap" style="margin-bottom:1.5rem">
  <table class="table-striped">
    <thead>
      <tr>
        <th>Hutch</th>
        <th>Occupants</th>
        <th>Cleaning</th>
        <th>Playtime</th>
        <th class="hide-mobile">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for row in needs_attention %}
      <tr>
        <td style="white-space:nowrap">
          <a href="/hutches?search={{ row.hutch.letter }}">{{ row.hutch.name }}</a>
        </td>
        <td>
          {% if row.residents %}
            <div style="display:flex;flex-wrap:wrap;gap:.35rem">
              {% for r in row.residents %}<span class="badge badge-green">{{ r.name }}</span>{% endfor %}
            </div>
          {% else %}
            <span style="color:var(--overlay0)">empty</span>
          {% endif %}
        </td>
        <td>
          {% if row.needs_clean %}
            {% if row.clean_days is none %}
              <span class="badge badge-red">Never cleaned</span>
            {% else %}
              <span class="badge badge-red">{{ row.clean_days }}d ago</span>
            {% endif %}
          {% else %}
            <span style="color:var(--subtext0);font-size:0.75rem">{{ row.hutch.date_cleaned | fmt_date }}</span>
          {% endif %}
        </td>
        <td>
          {% if row.needs_play %}
            {% if row.play_days is none %}
              <span class="badge badge-red">Never played</span>
            {% else %}
              <span class="badge badge-red">{{ row.play_days }}d ago</span>
            {% endif %}
          {% else %}
            <span style="color:var(--subtext0);font-size:0.75rem">{{ row.hutch.last_playtime | fmt_date }}</span>
          {% endif %}
        </td>
        <td class="hide-mobile" style="white-space:nowrap">
          {% if user.role in ('staff', 'admin') %}
            <a class="btn btn-ghost btn-sm" href="/hutches?search={{ row.hutch.letter }}">Manage →</a>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
  <p style="color:var(--green);font-size:0.8125rem;margin-bottom:1.5rem">✓ All hutches are clean and up to date on playtime.</p>
{% endif %}

<h2 style="font-size:0.9375rem;font-weight:600;margin:0 0 0.75rem">Activity Log</h2>
{% if recent_audit %}
<div class="table-wrap">
  <table class="table-striped">
    <thead>
      <tr>
        <th>When</th>
        <th>User</th>
        <th>Action</th>
        <th>Section</th>
        <th>Record</th>
        <th>Changes</th>
      </tr>
    </thead>
    <tbody>
      {% for row in recent_audit %}
      <tr>
        <td style="color:var(--subtext0);white-space:nowrap">{{ row.entry.timestamp | fmt_date }}</td>
        <td>{{ row.username }}</td>
        <td><span class="audit-action-{{ row.entry.action }}">{{ row.entry.action }}</span></td>
        <td style="color:var(--subtext0)">{{ row.section }}</td>
        <td style="white-space:nowrap">{{ row.record_label }}</td>
        <td style="color:var(--subtext0);font-size:0.75rem">
          {% if row.changes %}{{ row.changes | join(', ') }}{% else %}—{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
  <p style="color:var(--subtext0);font-size:0.8125rem">No activity yet.</p>
{% endif %}
{% endblock %}