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

{% block content %}
<div class="card" style="max-width:480px">
  <form method="post" action="/hutches">
    <div class="form-grid">
      <div class="form-group">
        <label for="letter">Hutch Letter / Name *</label>
        <input type="text" id="letter" name="letter" required autofocus placeholder="e.g. A, B, Shed">
      </div>
      {% include "hutches/_layout_fields.html" %}
      <div class="form-group">
        <label for="date_cleaned">Last Cleaned</label>
        <input type="date" id="date_cleaned" name="date_cleaned">
      </div>
      <div class="form-group">
        <label for="last_playtime">Last Playtime</label>
        <input type="date" id="last_playtime" name="last_playtime">
      </div>
    </div>
    <div style="margin-top:1.25rem;display:flex;gap:.5rem">
      <button type="submit" class="btn btn-primary">Create Hutch</button>
      <a href="/hutches" class="btn btn-secondary">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}