{% extends "base.html" %}
{% from "_when.html" import when_field with context %}
{% block title %}Finish up · {{ app_name }}{% endblock %}
{% block body %}
<h1>{{ '🧺 Take it off' if b.kind == 'wear' else '🦴 Finish up' }}</h1>
<p class="hint">{{ items|map(attribute='name')|join(' · ') }} · on for {{ span|dur }}
  {%- if b.locked %} · 🔒 caged{% endif %}</p>

<form class="card" method="post" action="/kit/bout/{{ b.id }}/end">
  {% if b.kind == 'play' %}
  <h3>How did it end?</h3>
  <div class="chips pick outcomes">
    {% for o in outcomes %}
    <label class="chip"><input type="radio" name="outcome" value="{{ o }}" {{ 'checked' if o == 'none' }}>
      {{ {'none': '🚫 nothing', 'edge': '🪢 edged', 'ruined': '💧 ruined', 'squirt': '💦 came'}[o] }}</label>
    {% endfor %}
  </div>
  {% if b.locked %}
  <p class="hint">You're locked, so the app already knows whether it happened in the cage — it doesn't
    have to ask, and it can't be told otherwise.</p>
  {% endif %}
  {% endif %}

  {% if survey %}
  <h3>Questions</h3>
  {#- 🔴 THE SLIDER CARRIES NO `name` UNTIL IT IS MOVED, and that is the whole mechanism.
      An <input type="range"> ALWAYS submits its current value — an untouched one posts the
      midpoint — so the obvious markup silently records a fabricated 5 for every question
      the pup never answered, on a form whose own help text promises the opposite. A field
      with no name is not submitted at all, so "not asked" is the default by construction
      rather than by a rule somewhere downstream.
      ⚠️ It degrades the right way too: with JS off nothing is ever named, so the scores
      are simply absent. The failure mode is losing an answer, never inventing one. -#}
  {% for q in survey %}
  <div class="checkin ask" data-key="{{ q.key }}">
    <label>{{ q.prompt }}
      <input type="range" data-score="score.{{ q.key }}" min="{{ min }}" max="{{ max }}"
             step="1" value="{{ ((min + max) // 2) }}" class="slider unanswered">
    </label>
    <div class="askfoot">
      <output class="hint">not asked</output>
      <button type="button" class="small clear" hidden>× clear</button>
    </div>
  </div>
  {% endfor %}
  <p class="hint">Move a slider to answer it. Anything you leave alone is recorded as
    <b>not asked</b>, never as a zero — the app would rather know nothing than make
    something up.</p>
  {% endif %}

  {% if consumables %}
  <div class="row">
    <label>Used any of
      <select name="consumable_id">
        <option value="">— nothing —</option>
        {% for c in consumables %}<option value="{{ c.id }}">{{ c.cat_icon }} {{ c.name }}</option>{% endfor %}
      </select></label>
    <label>How much <input name="consumable_qty" inputmode="decimal" placeholder="e.g. 5" style="max-width:6rem"></label>
  </div>
  {% endif %}

  <label>Anything to say? <textarea name="note" rows="2" placeholder="optional — this stays off every export that leaves the box"></textarea></label>
  <button class="primary">Log it</button>
  {{ when_field('⏱ finished earlier? set the time') }}
</form>

<form method="post" action="/kit/bout/{{ b.id }}/cancel"
      onsubmit="return confirm('Discard this bout? Nothing about it is recorded.')">
  <button class="small">✕ discard the whole bout</button>
</form>
{% endblock %}

{% block scripts %}
<script>
// A slider is unanswered until it is moved: only then does it get a `name` and become
// something the form submits. See the comment above the markup.
document.querySelectorAll('.checkin.ask').forEach(function (row) {
  var input = row.querySelector('input[type=range]');
  var out = row.querySelector('output');
  var clear = row.querySelector('button.clear');
  function answer() {
    input.name = input.dataset.score;
    input.classList.remove('unanswered');
    out.textContent = input.value + ' / ' + input.max;
    clear.hidden = false;
  }
  input.addEventListener('input', answer);
  input.addEventListener('change', answer);
  clear.addEventListener('click', function () {
    input.removeAttribute('name');
    input.classList.add('unanswered');
    input.value = Math.round((Number(input.min) + Number(input.max)) / 2);
    out.textContent = 'not asked';
    clear.hidden = true;
  });
});
</script>
{% endblock %}