{% extends "base.html" %}
{% from "_when.html" import when_field with context %}
{% from "_kit_fields.html" import spec_fields with context %}
{% block title %}{{ it.name }} · Kit · {{ app_name }}{% endblock %}
{% block body %}
<p class="crumb"><a href="/kit">← Kit</a></p>
<h1>{{ it.cat_icon }} {{ it.name }}</h1>
<p class="hint">{{ it.cat_title }}
  {%- if it.status != 'owned' %} · <b>{{ '✨ wishlist' if it.status == 'wishlist' else 'retired' }}</b>{% endif %}
  {%- if it.bought_at %} · bought {{ it.bought_at|local('%Y-%m-%d') }}{% endif %}
  {%- if it.cost_cents is not none %} · {{ cur }}{{ '%.2f'|format(it.cost_cents / 100) }}{% endif %}
</p>

{% if s.badges %}
<div class="chips trophies">
  {% for b in s.badges %}
  <span class="chip trophy" title="{{ b.detail }}{% if b.period %} · {{ b.period }}{% endif %}">
    {{ b.icon }} {{ b.title }}</span>
  {% endfor %}
</div>
{% endif %}

{% for c in it.care %}<p class="hint quiet">⚠ {{ c }}</p>{% endfor %}

<section class="grid2">
  <div class="card">
    <h3>Numbers</h3>
    <dl class="facts">
      {% if it.kind == 'consumable' %}
        <div><dt>On hand</dt><dd>
          {%- if level is not none %}{{ '%g'|format(level) }} {{ it.qty_unit }}
          {%- else %}<span class="unknown" title="no stock has ever been logged — that is not the same as empty">not counted</span>{% endif %}</dd></div>
        {% if it.reorder_at is not none %}<div><dt>Reorder at</dt><dd>{{ '%g'|format(it.reorder_at) }} {{ it.qty_unit }}</dd></div>{% endif %}
        {% if it.expires_at %}<div><dt>Expires</dt><dd>{{ it.expires_at|local('%Y-%m-%d') }}</dd></div>{% endif %}
      {% else %}
        <div><dt>Bouts</dt><dd>{{ s.uses }}</dd></div>
        {#- 🔴 Every one of these omits itself rather than printing 0. An item nobody has
            timed has no average, and a "0 m" there would read as a measured zero. -#}
        {% if s.total_seconds is not none %}<div><dt>Total</dt><dd>{{ s.total_seconds|dur }}</dd></div>{% endif %}
        {% if s.avg_seconds is not none %}<div><dt>Average</dt><dd>{{ s.avg_seconds|dur }}</dd></div>{% endif %}
        {% if s.last_used %}<div><dt>Last used</dt><dd>{{ s.last_used|rel(now) }}</dd></div>{% endif %}
        {% if s.squirts %}<div><dt>Made you come</dt><dd>💦 {{ s.squirts }}{% if s.caged_squirts %} · 🔒 {{ s.caged_squirts }} caged{% endif %}</dd></div>{% endif %}
        {% if s.outcomes.get('edge') %}<div><dt>Edges</dt><dd>🪢 {{ s.outcomes['edge'] }}</dd></div>{% endif %}
      {% endif %}
      {% if s.cost_per_use is not none %}
        <div><dt>Cost per bout</dt><dd>{{ cur }}{{ '%.2f'|format(s.cost_per_use) }}</dd></div>
      {% endif %}
    </dl>

    {% if it.spec_rows %}
    <h4 class="sub">Specs</h4>
    <dl class="facts">
      {% for r in it.spec_rows %}<div><dt>{{ r.label }}</dt><dd>{{ r.value }}</dd></div>{% endfor %}
    </dl>
    {% endif %}
    {% if it.notes %}<p>{{ it.notes }}</p>{% endif %}

    <div class="row">
      {% if it.kind != 'consumable' and it.status == 'owned' %}
        {% if open_bout %}
        <a class="btn primary" href="/kit/bout/{{ open_bout.id }}/end">it's on — finish up</a>
        {% else %}
        <form method="post" action="/kit/start">
          <input type="hidden" name="item_id" value="{{ it.id }}">
          <input type="hidden" name="bout_kind" value="{{ 'wear' if it.kind == 'gear' else 'play' }}">
          <button class="primary">{{ '🐶 put it on' if it.kind == 'gear' else '🦴 use it' }}</button>
        </form>
        {% endif %}
      {% endif %}
      {% for st in statuses if st != it.status %}
      <form method="post" action="/kit/item/{{ it.id }}/status">
        <input type="hidden" name="status" value="{{ st }}">
        <button class="small">→ {{ st }}</button></form>
      {% endfor %}
    </div>
  </div>

  <div class="card">
    <h3>Photos</h3>
    <div class="gallery small">
      {% for m in photos %}
      <figure>
        <a href="/media/{{ m.id }}" target="_blank"><img src="/media/{{ m.id }}/thumb" alt="" loading="lazy"></a>
        {% if m.id != it.media_id %}
        <form method="post" action="/kit/item/{{ it.id }}/cover">
          <input type="hidden" name="media_id" value="{{ m.id }}">
          <button class="small">make cover</button></form>
        {% else %}<figcaption class="hint">cover</figcaption>{% endif %}
      </figure>
      {% else %}<p class="hint">No photos yet.</p>{% endfor %}
    </div>
    <form class="row" method="post" action="/kit/item/{{ it.id }}/photo" enctype="multipart/form-data">
      <label class="photofield">Add a photo <input type="file" name="photo" accept="image/*" required></label>
      <label class="check"><input type="checkbox" name="cover" value="1" checked> make it the cover</label>
      <button class="primary">Upload</button>
    </form>
  </div>
</section>

{% if it.kind == 'consumable' %}
<section class="card">
  <h3>Stock</h3>
  <div class="row">
    <form class="row" method="post" action="/kit/item/{{ it.id }}/consume">
      <label>Used <input name="qty" inputmode="decimal" required style="max-width:6rem"> {{ it.qty_unit }}</label>
      <label>Note <input name="note" placeholder="optional"></label>
      <button>Log it</button>
      {{ when_field('⏱ earlier?') }}
    </form>
    <form class="row" method="post" action="/kit/item/{{ it.id }}/restock">
      <label>Restocked <input name="qty" inputmode="decimal" required style="max-width:6rem"> {{ it.qty_unit }}</label>
      <button class="primary">Add stock</button>
      {{ when_field('⏱ earlier?') }}
    </form>
  </div>
  <ul class="events compact">
    {% for r in log %}
    <li class="ev"><span class="ev-ico">{{ '🧴' if r.kind == 'restock' else '🕳' }}</span>
      <div class="ev-body"><div class="ev-head">
        <b>{{ '+' if r.kind == 'restock' else '−' }}{{ '%g'|format(r.qty) }} {{ it.qty_unit }}</b>
        {% if r.note %}<span class="hint">“{{ r.note }}”</span>{% endif %}</div></div>
      <time>{{ r.ts|rel(now) }}</time></li>
    {% else %}<li class="hint">Nothing logged. The level is unknown, not zero.</li>{% endfor %}
  </ul>
</section>
{% else %}
<section class="card">
  <h3>History</h3>
  <ul class="events compact">
    {% for b in bouts %}
    <li class="ev">
      <span class="ev-ico">{{ '🦴' if b.kind == 'play' else '🐶' }}</span>
      <div class="ev-body"><div class="ev-head">
        <b>{{ b.duration_seconds|dur if b.duration_seconds is not none else 'still on' }}</b>
        {% if b.locked %}<span class="badge">🔒</span>{% endif %}
        {% if b.outcome and b.outcome != 'none' %}<span class="badge ok">{{ b.outcome }}</span>{% endif %}
        {% if b.things|length > 1 %}<span class="hint">with {{ b.things|rejectattr('id', 'equalto', it.id)|map(attribute='name')|join(', ') }}</span>{% endif %}
        {% if b.note %}<span class="hint">“{{ b.note }}”</span>{% endif %}</div>
        {% if b.scores_d %}<div class="ev-detail">
          {% for q in survey %}{% if b.scores_d.get(q.key) %}<span class="badge">{{ q.label }} {{ b.scores_d[q.key] }}/10</span>{% endif %}{% endfor %}
        </div>{% endif %}
      </div>
      <time>{{ b.started_at|rel(now) }}</time></li>
    {% else %}<li class="hint">Never used.</li>{% endfor %}
  </ul>
</section>
{% endif %}

<details class="card fold">
  <summary><b>✎ Edit</b></summary>
  <form method="post" action="/kit/item/{{ it.id }}/edit">
    <div class="row">
      <label>Name <input name="name" value="{{ it.name }}" required></label>
      <label>Category
        <select name="category" id="catpick">
          {% for c in categories %}<option value="{{ c.slug }}" {{ 'selected' if c.slug == it.category }}>{{ c.icon }} {{ c.title }}</option>{% endfor %}
        </select></label>
    </div>
    <div class="row">
      <label>Price <input name="cost" value="{{ '%.2f'|format(it.cost_cents / 100) if it.cost_cents is not none else '' }}" inputmode="decimal"></label>
      <label>Bought <input type="date" name="bought_at" value="{{ it.bought_at|local('%Y-%m-%d') if it.bought_at else '' }}"></label>
      <label class="check"><input type="checkbox" name="shareable" value="1" {{ 'checked' if it.shareable }}> may be named on a share card</label>
    </div>
    {% if it.kind == 'consumable' %}
    <div class="row">
      <label>Unit <input name="qty_unit" value="{{ it.qty_unit }}"></label>
      <label>Reorder at <input name="reorder_at" value="{{ '%g'|format(it.reorder_at) if it.reorder_at is not none else '' }}" inputmode="decimal"></label>
      <label>Expires <input type="date" name="expires_at" value="{{ it.expires_at|local('%Y-%m-%d') if it.expires_at else '' }}"></label>
    </div>
    {% endif %}
    <div id="specs" class="specs">{{ spec_fields(categories, it.category, it.specs_d) }}</div>
    <label>Notes <textarea name="notes" rows="2">{{ it.notes }}</textarea></label>
    <button class="primary">Save</button>
  </form>
  <form method="post" action="/kit/item/{{ it.id }}/delete"
        onsubmit="return confirm('Delete {{ it.name }} outright? Only possible while it has no history.')">
    <button class="danger small">Delete</button>
    <small class="hint">Only while it has no history — otherwise retire it, so the totals you have
      already been shown stay true.</small>
  </form>
</details>
{% endblock %}

{% block scripts %}
<script>
(function () {
  var pick = document.getElementById('catpick');
  if (!pick) return;
  function sync() {
    document.querySelectorAll('#specs .specset').forEach(function (el) {
      var on = el.dataset.cat === pick.value;
      el.hidden = !on;
      el.querySelectorAll('input, select, textarea').forEach(function (f) { f.disabled = !on; });
    });
  }
  pick.addEventListener('change', sync);
  sync();
})();
</script>
{% endblock %}