{% extends "base.html" %}
{% from "_when.html" import when_field with context %}
{% block title %}Training · {{ app_name }}{% endblock %}
{% block body %}
<h1>📋 Training <a class="gear" href="/settings#tasks" title="the training library">⚙</a></h1>
<section class="grid2">
  <div class="card">
    <h3>Open <small class="hint">{{ open|length }}</small></h3>
    {% for a in open %}
    <div class="task {{ 'overdue' if a.due_at and a.due_at < now else '' }}">
      <div class="task-head">
        <b>{{ a.title }}</b>
        {% if a.requires_verification %}<span class="badge">📷 photo</span>{% endif %}
        <span class="badge actor">{{ a.source }}</span>
      </div>
      {% if a.description %}<p>{{ a.description }}</p>{% endif %}
      <p class="hint">
        {% if a.due_at %}due <b>{{ a.due_at|rel(now) }}</b> ({{ a.due_at|local }}){% else %}no deadline{% endif %}
        · reward {{ (a.reward_seconds)|dur }} off · penalty {{ (a.penalty_seconds)|dur }} on · +{{ a.xp }} xp
      </p>
      <form class="row" method="post" action="/tasks/{{ a.id }}/complete" enctype="multipart/form-data">
        <label class="photofield">{{ 'Verification photo' if a.requires_verification else 'Photo (optional)' }}
          {#- 🔴 NO `capture` HERE, deliberately unlike the dashboard's one-tap door. `capture`
              bypasses the picker and opens the camera, so the photo you ALREADY took of the
              finished task — with the real Camera app, which is what anyone actually does —
              is unreachable, and the only way to verify becomes re-shooting it inside Safari.
              That contradicted the `when` field four lines down, which exists precisely so a
              task can be logged after the fact: retroactive completion was supported while a
              retroactive PHOTO was not. Without the attribute iOS offers Photo Library / Take
              Photo / Choose File, so the camera is still one tap away and the roll is
              reachable at all. intake.js shows a thumbnail of whatever lands here. -#}
          <input type="file" name="photo" accept="image/*" {% if a.requires_verification %}required{% endif %}></label>
        <input type="hidden" name="here" value="">
        <label>Note <input name="note" placeholder="optional"></label>
        <button class="primary">✅ Done, Handler</button>
        {{ when_field('⏱ did it earlier? set the time') }}
      </form>
      <form method="post" action="/tasks/{{ a.id }}/fail" onsubmit="return confirm('Mark “{{ a.title }}” failed? Penalty applies.')">
        <input type="hidden" name="reason" value="gave up"><button class="danger small">✕ fail</button>
      </form>
    </div>
    {% else %}<p class="hint">Nothing open. A good boy asks for work.</p>{% endfor %}
    <hr>
    <form class="row" method="post" action="/tasks/assign">
      <label>Assign
        <select name="task_id">
          <option value="random">🎲 let the Handler pick</option>
          {% for t in library if t.enabled %}<option value="{{ t.id }}">{{ t.title }}</option>{% endfor %}
        </select>
      </label>
      <label>Due in hours <input type="number" step="0.5" min="0" name="due_hours" value="0" placeholder="task default"></label>
      <button class="primary">Assign</button>
    </form>
  </div>

  <div class="card">
    <h3>History</h3>
    <ul class="events compact">
      {% for a in history %}
      <li class="ev">
        <span class="ev-ico">{{ '✅' if a.status == 'verified' else '❌' }}</span>
        <div class="ev-body"><div class="ev-head"><b>{{ a.title }}</b>
          {% if a.status == 'verified' and a.reward_seconds %}<span class="delta minus">−{{ a.reward_seconds|dur }}</span>{% endif %}
          {% if a.status == 'failed' and a.penalty_seconds %}<span class="delta plus">+{{ a.penalty_seconds|dur }}</span>{% endif %}
          {% if a.note %}<span class="hint">“{{ a.note }}”</span>{% endif %}</div>
          {% if a.media_id %}<a class="ev-thumb" href="/media/{{ a.media_id }}" target="_blank"><img src="/media/{{ a.media_id }}/thumb" alt=""></a>{% endif %}
        </div>
        <time>{{ a.resolved_at|rel(now) }}</time>
      </li>
      {% else %}<li class="hint">No history yet.</li>{% endfor %}
    </ul>
  </div>
</section>
{% endblock %}