{% extends "base.html" %}
{% block title %}Adoption — {{ adoption.rabbit.name if adoption.rabbit else adoption.id[:8] }}{% endblock %}
{% block page_title %}Adoption Detail{% endblock %}
{% block topbar_actions %}
  <a href="/adoptions" class="btn btn-secondary btn-sm">← Back</a>
  {% if not adoption.submitted %}
    <button class="btn btn-danger btn-sm"
            hx-delete="/adoptions/{{ adoption.id }}"
            hx-confirm="Cancel this adoption and return {{ adoption.rabbit.name if adoption.rabbit else 'the rabbit' }} to Resident status?">
      Cancel Adoption
    </button>
  {% endif %}
{% endblock %}

{% block content %}
{% if saved %}<div class="alert alert-success" style="margin-bottom:1rem">Changes saved.</div>{% endif %}

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

  <div class="card">
    <div class="card-title">Rabbit</div>
    {% if adoption.rabbit %}
    <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>{{ adoption.rabbit.name }}</strong></div>
      <div><span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Gender</span><br><strong>{{ adoption.rabbit.gender or '—' }}</strong></div>
      <div><span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Date of Birth</span><br><strong>{{ adoption.rabbit.date_of_birth | fmt_date }}</strong></div>
      <div><span style="color:var(--subtext0);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em">Neutered / Spayed</span><br><strong>{{ adoption.rabbit.neutered_spayed or '—' }}</strong></div>
    </div>
    {% else %}
    <p style="color:var(--subtext0);font-size:.8125rem">Rabbit record no longer exists.</p>
    {% endif %}
  </div>

  <div class="card">
    <div class="card-title">Adoption Link</div>
    <div style="display:flex;gap:.5rem;align-items:center">
      <input type="text" value="{{ adopt_url }}" readonly
             style="flex:1;font-size:.75rem"
             onclick="this.select()">
      <button type="button" class="btn btn-ghost btn-sm"
              onclick="navigator.clipboard.writeText('{{ adopt_url }}');this.textContent='Copied!'">Copy</button>
    </div>
    <div style="margin-top:.75rem">
      <span class="badge {{ 'badge-green' if adoption.submitted else 'badge-yellow' }}">
        {{ 'Submitted' if adoption.submitted else 'Awaiting adopter' }}
      </span>
    </div>
  </div>
</div>

<div class="card" style="margin-top:1.25rem">
  <div class="card-title">Adopter Details</div>
  <form method="post" action="/adoptions/{{ adoption.id }}"
        hx-put="/adoptions/{{ adoption.id }}"
        hx-target="body" hx-push-url="true">
    <div class="form-grid">
      <div class="form-group">
        <label for="adopter_name">Full Name</label>
        <input type="text" id="adopter_name" name="adopter_name" value="{{ adoption.adopter_name or '' }}">
      </div>
      <div class="form-group">
        <label for="phone_number">Phone Number</label>
        <input type="text" id="phone_number" name="phone_number" value="{{ adoption.phone_number or '' }}">
      </div>
      <div class="form-group">
        <label for="adoption_date">Adoption Date</label>
        <input type="date" id="adoption_date" name="adoption_date"
               value="{{ adoption.adoption_date.isoformat() if adoption.adoption_date else '' }}">
      </div>
      <div class="form-group">
        <label for="rabbit_new_name">Rabbit's New Name</label>
        <input type="text" id="rabbit_new_name" name="rabbit_new_name" value="{{ adoption.rabbit_new_name or '' }}">
      </div>
    </div>
    <div class="form-group" style="margin-top:.75rem">
      <label for="address">Address</label>
      <textarea id="address" name="address" rows="3">{{ adoption.address or '' }}</textarea>
    </div>
    <div class="form-group" style="margin-top:.75rem">
      <label for="notes">Notes</label>
      <textarea id="notes" name="notes" rows="3">{{ adoption.notes or '' }}</textarea>
    </div>
    <div style="margin-top:1rem">
      <button type="submit" class="btn btn-primary">Save Changes</button>
    </div>
  </form>
</div>
{% endblock %}