{% extends "base.html" %}
{% block title %}Adoptions{% endblock %}
{% block page_title %}Adoptions{% endblock %}
{% block topbar_actions %}
  {% if user.role == 'admin' %}
    <button class="btn btn-primary btn-sm"
            hx-get="/adoptions/new-dialog"
            hx-target="#adoption-modal-host"
            hx-swap="innerHTML">+ New Adoption</button>
  {% endif %}
{% endblock %}

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

<div class="table-wrap">
  <table class="table-striped">
    <thead>
      <tr>
        <th>Rabbit</th>
        <th>Adoption Date</th>
        <th>Adopter</th>
        <th>Status</th>
        <th>Created</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for adoption in adoptions %}
      <tr>
        <td style="font-weight:500">{{ adoption.rabbit.name if adoption.rabbit else '—' }}</td>
        <td>{{ adoption.adoption_date | fmt_date }}</td>
        <td>{{ adoption.adopter_name or '—' }}</td>
        <td>
          {% if adoption.submitted %}
            <span class="badge badge-green">Submitted</span>
          {% else %}
            <span class="badge badge-yellow">Pending</span>
          {% endif %}
        </td>
        <td style="color:var(--subtext0)">{{ adoption.created_at | fmt_date }}</td>
        <td>
          {% if user.role == 'admin' %}
            <a href="/adoptions/{{ adoption.id }}" class="btn btn-ghost btn-sm">View</a>
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6" style="text-align:center;color:var(--subtext0);padding:2rem">No adoptions found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
</div>

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