{% 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 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 yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</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 %}