{% extends "base.html" %}
{% block title %}Hutches{% endblock %}
{% block page_title %}Hutches{% endblock %}
{% block topbar_actions %}
  {% if user.role in ('staff', 'admin') %}
    <a href="/hutches/new" class="btn btn-primary btn-sm">+ New Hutch</a>
  {% endif %}
{% endblock %}

{% macro sort_th(col, label) %}
{% set new_order = 'desc' if sort == col and order == 'asc' else 'asc' %}
{% set url = '/hutches?sort=' ~ col ~ '&order=' ~ new_order
   ~ ('&search=' ~ search if search else '')
   ~ ('&needs_cleaning=1' if needs_cleaning else '') %}
<th class="{{ 'sort-active' if sort == col else '' }}">
  <a href="{{ url }}" hx-get="{{ url }}" hx-select="#hutch-content" hx-target="#hutch-content" hx-push-url="true">
    {{ label }}{% if sort == col %} {{ '↑' if order == 'asc' else '↓' }}{% endif %}
  </a>
</th>
{% endmacro %}

{% block content %}
<div id="hutch-content">
  <div class="stat-grid">
    <div class="stat-card">
      <div class="stat-label">Hutches</div>
      <div class="stat-value">{{ hutch_stats.total }}</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Available Spaces</div>
      <div class="stat-value green">{{ hutch_stats.available }}</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Need Cleaning</div>
      <div class="stat-value {% if hutch_stats.needs_cleaning > 0 %}red{% endif %}">{{ hutch_stats.needs_cleaning }}</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Require Playtime</div>
      <div class="stat-value {% if hutch_stats.needs_playtime > 0 %}red{% endif %}">{{ hutch_stats.needs_playtime }}</div>
    </div>
  </div>

  <div class="toolbar">
    <div class="toolbar-left">
      <form method="get" action="/hutches"
            hx-get="/hutches"
            hx-select="#hutch-content"
            hx-target="#hutch-content"
            hx-push-url="true"
            hx-trigger="input changed delay:400ms from:#search-in">
        <input type="hidden" name="sort" value="{{ sort }}">
        <input type="hidden" name="order" value="{{ order }}">
        {% if needs_cleaning %}<input type="hidden" name="needs_cleaning" value="1">{% endif %}
        <input id="search-in" name="search" value="{{ search }}" class="search-box" placeholder="Search hutches…">
      </form>
      {% set toggle_url = '/hutches?sort=' ~ sort ~ '&order=' ~ order
         ~ ('&search=' ~ search if search else '')
         ~ ('' if needs_cleaning else '&needs_cleaning=1') %}
      <a href="{{ toggle_url }}"
         class="btn {{ 'btn-primary' if needs_cleaning else 'btn-ghost' }}"
         style="font-size:0.8125rem;padding:0.375rem 0.625rem"
         hx-get="{{ toggle_url }}" hx-select="#hutch-content" hx-target="#hutch-content" hx-push-url="true">
        Needs Cleaning{% if needs_cleaning %} ×{% endif %}
      </a>
    </div>
  </div>

  <div class="table-wrap">
    <table class="table-grouped">
      <thead>
        <tr>
          {{ sort_th('letter', 'Hutch') }}
          <th>Floor</th>
          <th>Rabbits</th>
          {{ sort_th('cleaned', 'Cleaned') }}
          {{ sort_th('playtime', 'Last Playtime') }}
          <th class="hide-mobile">Actions</th>
        </tr>
      </thead>
      {% for letter, compartments in groups.items() %}
        {% set rows = rows_by_letter[letter] %}
        {% include "hutches/_letter_row.html" %}
      {% else %}
        <tbody><tr><td colspan="6" style="text-align:center;color:var(--subtext0);padding:2rem">No hutches found.</td></tr></tbody>
      {% endfor %}
    </table>
  </div>
</div>

<div id="clean-modal-host"></div>
<script>
  document.body.addEventListener('htmx:afterSwap', function(e) {
    if (e.target.id === 'clean-modal-host') {
      var dialog = e.target.querySelector('dialog');
      if (dialog) dialog.showModal();
    }
  });
</script>
{% endblock %}