{% extends "base.html" %}
{% block title %}Surrenders{% endblock %}
{% block page_title %}Surrenders{% endblock %}

{% block content %}
<div id="surrender-content">
<div class="toolbar">
  <div class="toolbar-left">
    <form method="get" action="/surrenders"
          style="display:flex;align-items:stretch;gap:.5rem"
          hx-get="/surrenders"
          hx-select="#surrender-content"
          hx-target="#surrender-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 surrenders…">
      <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 class="hide-mobile">Submitted By</th>
        <th class="hide-mobile">Reason</th>
        <th>Status</th>
        <th class="hide-mobile">Received</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for s in submissions %}
      <tr>
        <td style="font-weight:500">{{ s.rabbit_name or 'Unnamed' }}</td>
        <td class="hide-mobile">{{ s.submitter_name or '—' }}</td>
        <td class="hide-mobile" style="max-width:220px;white-space:normal">{{ s.reason or '—' }}</td>
        <td>
          {% if s.status == 'pending' %}<span class="badge badge-yellow">Pending</span>
          {% elif s.status == 'accepted' %}<span class="badge badge-green">Accepted</span>
          {% elif s.status == 'rejected' %}<span class="badge badge-overlay">Rejected</span>
          {% endif %}
        </td>
        <td class="hide-mobile" style="color:var(--subtext0)">{{ s.created_at | fmt_date }}</td>
        <td><a href="/surrenders/{{ s.id }}" class="btn btn-ghost btn-sm">View</a></td>
      </tr>
      {% else %}
      <tr><td colspan="6" style="text-align:center;color:var(--subtext0);padding:2rem">No submissions found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
</div>
{% endblock %}