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

{% block content %}
<div class="toolbar">
  <div class="toolbar-left">
    <form method="get" action="/surrenders" style="display:flex;gap:.5rem">
      <select name="status" class="filter-select" onchange="this.form.submit()">
        <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Pending ({{ counts.pending }})</option>
        <option value="accepted" {% if status_filter == 'accepted' %}selected{% endif %}>Accepted ({{ counts.accepted }})</option>
        <option value="rejected" {% if status_filter == 'rejected' %}selected{% endif %}>Rejected ({{ counts.rejected }})</option>
      </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 {{ status_filter }} submissions.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}