{% extends "base.html" %}
{% block title %}Surrender — {{ submission.rabbit_name or submission.id[:8] }}{% endblock %}
{% block page_title %}Surrender Detail{% endblock %}
{% block topbar_actions %}
  <a href="/surrenders" class="btn btn-secondary btn-sm">← Back</a>
{% endblock %}

{% block content %}

<div style="display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem">
  <span style="font-size:1.1rem;font-weight:600">{{ submission.rabbit_name or 'Unnamed rabbit' }}</span>
  {% if submission.status == 'pending' %}<span class="badge badge-yellow">Pending</span>
  {% elif submission.status == 'accepted' %}<span class="badge badge-green">Accepted</span>
  {% elif submission.status == 'rejected' %}<span class="badge badge-overlay">Rejected</span>
  {% endif %}
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start">

  <div class="card">
    <div class="card-title">Rabbit Details</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.5rem .75rem;font-size:.8125rem">
      <div><span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Name</span><br><strong>{{ submission.rabbit_name or '—' }}</strong></div>
      <div><span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Breed / Colour</span><br><strong>{{ submission.breed_colour or '—' }}</strong></div>
      <div><span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Approx. Age</span><br><strong>{{ submission.approx_age or '—' }}</strong></div>
      <div><span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Gender</span><br><strong>{{ submission.gender or '—' }}</strong></div>
      <div><span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Neutered / Spayed</span><br><strong>{{ submission.neutered_spayed or '—' }}</strong></div>
    </div>
    {% if submission.health_notes %}
    <div style="margin-top:.75rem">
      <span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Health Notes</span><br>
      <span style="font-size:.8125rem">{{ submission.health_notes }}</span>
    </div>
    {% endif %}
    {% if submission.reason %}
    <div style="margin-top:.75rem">
      <span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Reason for Surrender</span><br>
      <span style="font-size:.8125rem">{{ submission.reason }}</span>
    </div>
    {% endif %}
  </div>

  <div class="card">
    <div class="card-title">Submitter</div>
    <div style="display:grid;grid-template-columns:1fr;gap:.5rem;font-size:.8125rem">
      <div><span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Name</span><br><strong>{{ submission.submitter_name or 'Anonymous' }}</strong></div>
      <div><span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Phone</span><br><strong>{{ submission.submitter_phone or '—' }}</strong></div>
      <div><span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Email</span><br><strong>{{ submission.submitter_email or '—' }}</strong></div>
    </div>
    <div style="margin-top:.75rem;font-size:.75rem;color:var(--subtext0)">
      Agreement accepted {{ submission.agreement_accepted_at.strftime('%d %b %Y %H:%M') if submission.agreement_accepted_at else '—' }} UTC
      (version {{ submission.agreement_version or '—' }})
    </div>
    <div style="margin-top:.25rem;font-size:.75rem;color:var(--subtext0)">
      Received {{ submission.created_at | fmt_date }}
    </div>
  </div>
</div>

{% if submission.status == 'accepted' %}
<div class="card" style="margin-top:1.25rem">
  <div class="card-title">Outcome</div>
  <div style="font-size:.8125rem">
    Accepted{% if submission.reviewed_by %} by {{ submission.reviewed_by.username }}{% endif %}
    {% if submission.reviewed_at %} on {{ submission.reviewed_at.strftime('%d %b %Y') }}{% endif %}.
    {% if submission.rabbit %}
      Created rabbit record: <a href="/rabbits?search={{ submission.rabbit.name }}">{{ submission.rabbit.name }}</a>
      (no hutch assigned yet — place from the Rabbits page).
    {% endif %}
  </div>
</div>
{% elif submission.status == 'rejected' %}
<div class="card" style="margin-top:1.25rem">
  <div class="card-title">Outcome</div>
  <div style="font-size:.8125rem">
    Rejected{% if submission.reviewed_by %} by {{ submission.reviewed_by.username }}{% endif %}
    {% if submission.reviewed_at %} on {{ submission.reviewed_at.strftime('%d %b %Y') }}{% endif %}.
    {% if submission.admin_note %}<div style="margin-top:.5rem;color:var(--subtext1)">Note: {{ submission.admin_note }}</div>{% endif %}
  </div>
</div>
{% endif %}

{% if submission.status == 'pending' %}
<div class="card" style="margin-top:1.25rem">
  <div class="card-title">Review</div>
  <div style="display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem">
    <form method="post" action="/surrenders/{{ submission.id }}/accept" style="display:inline"
          onsubmit="return confirm('Accept this submission and create a new rabbit record?')">
      <button type="submit" class="btn btn-primary btn-sm">Accept &amp; Create Rabbit</button>
    </form>
    <button type="button" class="btn btn-danger btn-sm" onclick="document.getElementById('reject-form').classList.toggle('hidden-form')">Reject…</button>
    <button class="btn btn-secondary btn-sm"
            hx-delete="/surrenders/{{ submission.id }}"
            hx-confirm="Permanently delete this submission? This cannot be undone.">Delete</button>
  </div>
  <form id="reject-form" method="post" action="/surrenders/{{ submission.id }}/reject" class="hidden-form">
    <div class="form-group">
      <label for="admin_note">Rejection Note (optional)</label>
      <textarea id="admin_note" name="admin_note" rows="2"></textarea>
    </div>
    <button type="submit" class="btn btn-danger btn-sm" style="margin-top:.5rem">Confirm Reject</button>
  </form>
</div>
{% else %}
<div style="margin-top:1.25rem">
  <button class="btn btn-secondary btn-sm"
          hx-delete="/surrenders/{{ submission.id }}"
          hx-confirm="Permanently delete this submission? This cannot be undone.">Delete Submission</button>
</div>
{% endif %}

<style>.hidden-form { display: none; }</style>
{% endblock %}