{% extends "base.html" %}
{% block title %}{{ rabbit.name }}{% endblock %}
{% block page_title %}{{ rabbit.name }}{% endblock %}
{% block topbar_actions %}
  <a href="/rabbits" class="btn btn-secondary btn-sm">← Back to Rabbits</a>
{% endblock %}

{% block content %}
<div class="stat-grid" style="grid-template-columns:repeat(4,1fr)">
  <div class="stat-card">
    <div class="stat-label">Status</div>
    <div class="stat-value" style="font-size:1.1rem">
      {% if rabbit.status == 'Resident' %}<span class="badge badge-green">Resident</span>
      {% elif rabbit.status == 'Passed' %}<span class="badge badge-overlay">Passed</span>
      {% elif rabbit.status == 'Rehomed' %}<span class="badge badge-yellow">Rehomed</span>
      {% elif rabbit.status == 'Fostering' %}<span class="badge badge-blue">Fostering</span>
      {% elif rabbit.status %}<span class="badge badge-mauve">{{ rabbit.status }}</span>
      {% else %}<span style="color:var(--overlay0)">—</span>{% endif %}
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Gender</div>
    <div class="stat-value" style="font-size:1.1rem">{{ rabbit.gender or '—' }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Date of Birth</div>
    <div class="stat-value" style="font-size:1.1rem">{{ rabbit.date_of_birth | fmt_date }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Hutch</div>
    <div class="stat-value" style="font-size:1.1rem">{{ rabbit.hutch.name if rabbit.hutch else '—' }}</div>
  </div>
</div>

<h2 style="margin:1.5rem 0 .75rem;font-size:1rem;color:var(--subtext1)">Health Records</h2>
<div class="toolbar">
  <div class="toolbar-left"></div>
  {% if user.role in ('staff', 'admin') %}
    <button class="btn btn-primary btn-sm"
            hx-get="/rabbits/{{ rabbit.id }}/health/new-dialog"
            hx-target="#health-modal-host"
            hx-swap="innerHTML">+ Add Record</button>
  {% endif %}
</div>

<div id="health-table-wrap">
  {% include "rabbits/_health_table.html" %}
</div>

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