{% extends "base.html" %}
{% from "_when.html" import when_field with context %}
{% from "_kit_fields.html" import spec_fields with context %}
{% block title %}Kit · {{ app_name }}{% endblock %}
{% block body %}
<h1>🦴 Kit <a class="gear" href="/settings#kit" title="kit settings">⚙</a></h1>

<p class="hint">
  {{ totals.owned }} owned · {{ totals.by_kind.toy }} toy{{ '' if totals.by_kind.toy == 1 else 's' }} ·
  {{ totals.by_kind.gear }} gear ·
  {{ totals.by_kind.consumable }} consumable{{ '' if totals.by_kind.consumable == 1 else 's' }}
  {%- if totals.wishlist %} · {{ totals.wishlist }} on the wishlist{% endif %}
  {%- if totals.bouts %} · {{ totals.bouts }} bouts · {{ totals.seconds|dur }}{% endif %}
  {%- if totals.priced %} · {{ cur }}{{ '%.2f'|format(totals.spend_cents / 100) }} spent
    <small>(of {{ totals.priced }} you priced)</small>{% endif %}
</p>

{# ── what is on right now ────────────────────────────────────────────────── #}
{% if open %}
<section class="card need">
  <h3>On right now</h3>
  {% for b in open %}
  <div class="bout">
    <div class="bout-head">
      <b>{{ b.things|map(attribute='name')|join(' · ') }}</b>
      <span class="badge">{{ '🦴 play' if b.kind == 'play' else '🐶 wear' }}</span>
      {% if b.locked %}<span class="badge">🔒 caged</span>{% endif %}
      {% if b.source == 'session' %}<span class="badge actor">auto</span>{% endif %}
    </div>
    <p class="hint">on since {{ b.started_at|local }} · {{ (now - b.started_at)|dur }}</p>
    <div class="row">
      <a class="btn primary" href="/kit/bout/{{ b.id }}/end">
        {{ '🧺 take it off' if b.kind == 'wear' else '🦴 finish up' }}</a>
      <form method="post" action="/kit/bout/{{ b.id }}/cancel"
            onsubmit="return confirm('Discard this bout? Nothing about it is recorded.')">
        <button class="small">✕ discard</button></form>
    </div>
  </div>
  {% endfor %}
</section>
{% endif %}

{% if stale %}
{#- 🔴 Reported, never auto-closed. The app does not know when you took it off and will
    not invent an end time — see service.stale_bouts. -#}
<p class="hint quiet">⚠ {{ stale|length }} play bout{{ '' if stale|length == 1 else 's' }} still open
  since {{ stale[0].started_at|rel(now) }}. Finish it with the real time, or discard it —
  nothing will guess an end for you.</p>
{% endif %}

<section class="grid2">
  {# ── start a bout ───────────────────────────────────────────────────────── #}
  <div class="card">
    <h3>Put something on</h3>
    <form method="post" action="/kit/start">
      <div class="chips pick">
        {% for i in playable %}
        <label class="chip"><input type="checkbox" name="item_id" value="{{ i.id }}">
          {{ i.cat_icon }} {{ i.name }}</label>
        {% else %}<p class="hint">Nothing owned yet. Add something below.</p>{% endfor %}
      </div>
      <div class="row">
        <label>Kind
          <select name="bout_kind">
            <option value="play">🦴 play</option>
            <option value="wear">🐶 wear</option>
          </select></label>
        <label>Note <input name="note" placeholder="optional"></label>
        <button class="primary" {{ 'disabled' if not playable }}>Start</button>
      </div>
      {{ when_field('⏱ started earlier? set the time') }}
    </form>
  </div>

  {# ── things that want attention ─────────────────────────────────────────── #}
  <div class="card">
    <h3>Wants attention</h3>
    {% if low %}
    <h4 class="sub">Running out</h4>
    <ul class="mini">
      {% for i in low %}
      <li><a href="/kit/item/{{ i.id }}">{{ i.cat_icon }} {{ i.name }}</a>
        <small class="warn">{{ '%g'|format(i.level) }} {{ i.qty_unit }} left</small></li>
      {% endfor %}
    </ul>
    {% endif %}
    {% if expiring %}
    <h4 class="sub">Going off</h4>
    <ul class="mini">
      {% for i in expiring %}
      <li><a href="/kit/item/{{ i.id }}">{{ i.cat_icon }} {{ i.name }}</a>
        <small class="warn">{{ i.expires_at|local('%Y-%m-%d') }}</small></li>
      {% endfor %}
    </ul>
    {% endif %}
    {% if neglected %}
    <h4 class="sub">Gathering dust</h4>
    <ul class="mini">
      {% for i in neglected[:6] %}
      <li><a href="/kit/item/{{ i.id }}">{{ i.cat_icon }} {{ i.name }}</a>
        <small class="hint">{{ 'last used ' ~ i.last_used|rel(now) if i.last_used else 'never used' }}</small></li>
      {% endfor %}
    </ul>
    {% endif %}
    {% if not low and not expiring and not neglected %}
    <p class="hint">Nothing running low, nothing going off, nothing neglected. Tidy kennel.</p>
    {% endif %}
  </div>
</section>

{# ── the inventory ──────────────────────────────────────────────────────── #}
<div class="chips filters">
  <a class="chip {{ 'on' if not kind and not status }}" href="/kit">all</a>
  {% for k in kinds %}
  <a class="chip {{ 'on' if kind == k }}" href="/kit?kind={{ k }}">{{ kind_icon[k] }} {{ kind_title[k] }}</a>
  {% endfor %}
  <a class="chip {{ 'on' if status == 'wishlist' }}" href="/kit?status=wishlist">✨ wishlist</a>
  <a class="chip {{ 'on' if status == 'retired' }}" href="/kit?status=retired">📕 retired</a>
</div>

<section class="kitgrid">
  {% for i in items %}
  {% set s = stats[i.id] %}
  <a class="kititem {{ 'wish' if i.status == 'wishlist' }} {{ 'gone' if i.status == 'retired' }}"
     href="/kit/item/{{ i.id }}">
    <div class="kitshot">
      {% if i.media_id %}<img src="/media/{{ i.media_id }}/thumb" alt="" loading="lazy">
      {% else %}<span class="noshot">{{ i.cat_icon }}</span>{% endif %}
      {% if badges.get(i.id) %}
      <span class="kitbadges">{% for b in badges[i.id][:3] %}<span title="{{ b.title }} — {{ b.detail }}">{{ b.icon }}</span>{% endfor %}</span>
      {% endif %}
    </div>
    <div class="kitmeta">
      <b>{{ i.name }}</b>
      <small class="hint">{{ i.cat_title }}
        {%- if i.status == 'wishlist' %} · ✨ want{% elif i.status == 'retired' %} · retired{% endif %}</small>
      <small class="hint">
        {%- if i.kind == 'consumable' -%}
          {% if s.level is not none %}{{ '%g'|format(s.level) }} {{ i.qty_unit }} left
          {%- else %}<span class="unknown" title="no stock has ever been logged — not the same as empty">level unknown</span>{% endif %}
        {%- elif s.uses -%}
          {{ s.uses }} bout{{ '' if s.uses == 1 else 's' }}
          {%- if s.total_seconds %} · {{ s.total_seconds|dur }}{% endif %}
          {%- if s.last_used %} · {{ s.last_used|rel(now) }}{% endif %}
        {%- elif i.status == 'wishlist' -%}
          not yours yet
        {%- else -%}
          never used
        {%- endif -%}
      </small>
      {% if s.squirts %}<small class="hint">💦 {{ s.squirts }}{% if s.caged_squirts %} · 🔒 {{ s.caged_squirts }} caged{% endif %}</small>{% endif %}
    </div>
  </a>
  {% else %}
  <p class="hint">Nothing here yet.</p>
  {% endfor %}
</section>

{# ── add ────────────────────────────────────────────────────────────────── #}
<details class="card fold" id="add">
  <summary><b>➕ Add something</b></summary>
  <form method="post" action="/kit/add" id="addform">
    <div class="row">
      <label>Name <input name="name" required placeholder="give it a name — that's half the point"></label>
      <label>Category
        <select name="category" id="catpick" required>
          {% for k in kinds %}
          <optgroup label="{{ kind_icon[k] }} {{ kind_title[k] }}">
            {% for c in by_kind[k] %}<option value="{{ c.slug }}">{{ c.icon }} {{ c.title }}</option>{% endfor %}
          </optgroup>
          {% endfor %}
        </select></label>
      <label>Status
        <select name="status">
          <option value="owned">owned</option>
          <option value="wishlist">✨ wishlist</option>
        </select></label>
    </div>
    <div class="row">
      <label>Price <input name="cost" inputmode="decimal" placeholder="blank = don't remember"></label>
      <label>Bought <input type="date" name="bought_at"></label>
      <label class="check"><input type="checkbox" name="shareable" value="1"> may be named on a share card</label>
    </div>
    <div class="row consumable-only" hidden>
      <label>Opening stock <input name="opening_qty" inputmode="decimal" placeholder="how much is in it"></label>
      <label>Unit <input name="qty_unit" placeholder="ml · g · count"></label>
      <label>Reorder at <input name="reorder_at" inputmode="decimal"></label>
      <label>Expires <input type="date" name="expires_at"></label>
    </div>
    <div id="specs" class="specs">{{ spec_fields(categories) }}</div>
    <label>Notes <textarea name="notes" rows="2"></textarea></label>
    <button class="primary">Add to the kennel</button>
    {{ when_field('⏱ got it earlier? set the date') }}
  </form>
</details>
{% endblock %}

{% block scripts %}
<script>
// Show only the selected category's spec fields, and disable the rest so a hidden
// fieldset cannot post values belonging to a category the item is not.
(function () {
  var pick = document.getElementById('catpick');
  var kinds = {{ cat_kinds|tojson }};
  function sync() {
    var want = pick.value;
    document.querySelectorAll('#specs .specset').forEach(function (el) {
      var on = el.dataset.cat === want;
      el.hidden = !on;
      el.querySelectorAll('input, select, textarea').forEach(function (f) { f.disabled = !on; });
    });
    document.querySelectorAll('.consumable-only').forEach(function (el) {
      el.hidden = kinds[want] !== 'consumable';
    });
  }
  pick.addEventListener('change', sync);
  sync();
})();
</script>
{% endblock %}