{% extends "base.html" %}
{% block title %}New Rabbit{% endblock %}
{% block page_title %}New Rabbit{% endblock %}
{% block topbar_actions %}
  <a href="/rabbits" class="btn btn-secondary btn-sm">Cancel</a>
{% endblock %}

{% block content %}
<div class="card" style="max-width:700px">
  <form method="post" action="/rabbits">
    <div class="form-grid">
      <div class="form-group">
        <label for="name">Name *</label>
        <input type="text" id="name" name="name" required autofocus>
      </div>
      <div class="form-group">
        <label for="status">Status</label>
        <select id="status" name="status">
          <option value="">—</option>
          {% for s in statuses %}
            <option value="{{ s }}">{{ s }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group">
        <label for="gender">Gender</label>
        <select id="gender" name="gender">
          <option value="">—</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </div>
      <div class="form-group">
        <label for="date_of_birth">Date of Birth</label>
        <input type="date" id="date_of_birth" name="date_of_birth">
      </div>
      <div class="form-group">
        <label for="neutered_spayed">Neutered / Spayed</label>
        <select id="neutered_spayed" name="neutered_spayed">
          <option value="">—</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
      </div>
      <div class="form-group">
        <label>Hutch</label>
        <div style="display:flex;gap:.5rem">
          <select name="hutch_letter"
                  hx-get="/hutches/floors-for-letter"
                  hx-target="#floor-wrap-new"
                  hx-swap="innerHTML"
                  style="flex:1">
            <option value="">— Letter —</option>
            {% for letter in letters %}
              <option value="{{ letter }}">{{ letter }}</option>
            {% endfor %}
          </select>
          <div id="floor-wrap-new" style="flex:1">
            <select class="edit-input" disabled style="width:100%;opacity:.5;cursor:not-allowed">
              <option value="">— Floor —</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top:1.25rem;display:flex;gap:.5rem">
      <button type="submit" class="btn btn-primary">Add Rabbit</button>
      <a href="/rabbits" class="btn btn-secondary">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}