{% extends "base.html" %}
{% block title %}Rabbits{% endblock %}
{% block page_title %}Rabbits{% endblock %}
{% block topbar_actions %}
  {% if user.role in ('staff', 'admin') %}
    <button class="btn btn-primary btn-sm"
            hx-get="/rabbits/new-dialog"
            hx-target="#rabbit-modal-host"
            hx-swap="innerHTML">+ New Rabbit</button>
  {% endif %}
{% endblock %}

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

{% block content %}
<div id="rabbit-content">
<div class="stat-grid">
  <div class="stat-card">
    <div class="stat-label">{{ stat_label }}</div>
    <div class="stat-value {{ stat_color }}">{{ stat_count }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Gender</div>
    <div class="stat-value"><span style="color:var(--blue)">{{ male_count }}</span><span style="color:#cdd6f4"> / </span><span style="color:var(--pink)">{{ female_count }}</span></div>
  </div>
  <div class="stat-card hide-mobile">
    <div class="stat-label">Fixed</div>
    <div class="stat-value"><span style="color:var(--green)">{{ neutered_count }}</span><span style="color:#cdd6f4"> / </span><span style="color:var(--red)">{{ unneutered_count }}</span></div>
  </div>
</div>

<div class="toolbar">
  <div class="toolbar-left">
    <form method="get" action="/rabbits"
          style="display:flex;align-items:stretch;gap:.5rem"
          hx-get="/rabbits"
          hx-select="#rabbit-content"
          hx-target="#rabbit-content"
          hx-push-url="true"
          hx-trigger="change from:#status-sel, input changed delay:400ms from:#search-in">
      <input type="hidden" name="sort" value="{{ sort }}">
      <input type="hidden" name="order" value="{{ order }}">
      <input id="search-in" name="search" value="{{ search }}" class="search-box" placeholder="Search rabbits…">
      <select id="status-sel" name="status" class="filter-select">
        <option value="">All statuses</option>
        {% for s in statuses %}
          <option value="{{ s }}" {% if status_filter == s %}selected{% endif %}>{{ s }}</option>
        {% endfor %}
      </select>
    </form>
  </div>
</div>

<div id="table-wrapper" class="table-wrap">
  <table class="table-striped">
    <thead>
      <tr>
        {{ sort_th('name', 'Name') }}
        {{ sort_th('status', 'Status', 'hide-mobile') }}
        {{ sort_th('gender', 'Gender', 'hide-mobile') }}
        {{ sort_th('date_of_birth', 'Date of Birth', 'hide-mobile') }}
        {{ sort_th('neutered_spayed', 'Neutered', 'hide-mobile') }}
        {{ sort_th('hutch', 'Hutch') }}
        <th>Actions</th>
      </tr>
    </thead>
    {% for rabbit in rabbits %}
      {% include "rabbits/_row.html" %}
    {% else %}
      <tbody><tr><td colspan="7" style="text-align:center;color:var(--subtext0);padding:2rem">No rabbits found.</td></tr></tbody>
    {% endfor %}
  </table>
</div>

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