{% extends "base.html" %}
{% block content %}
<h1 class="text-2xl md:text-3xl font-semibold tracking-tight mb-6 leading-tight" style="color: var(--color-brand);">Review</h1>
{% if not current %}
  <p class="text-sm leading-relaxed" style="color: var(--color-fg-muted);">Review queue is empty — nothing to triage.</p>
{% else %}
<p class="text-xs mb-5" style="color: var(--color-fg-faint);">{{ remaining }} pending</p>
<section class="card max-w-2xl">
  <p class="text-xs font-medium uppercase tracking-wide mb-2" style="color: var(--color-fg-faint);">Captured</p>
  <pre class="font-mono text-sm mb-1 leading-relaxed" style="color: var(--color-fg);">{{ current.command }}</pre>
  <p class="text-xs mb-6 leading-relaxed" style="color: var(--color-fg-faint);">Run from: {{ current.install_dir }} · {{ current.installed_at[:10] }} {{ current.installed_at[11:16] }}</p>

  <form method="post" action="/review/{{ current.id }}" class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
    <label class="flex flex-col gap-1">
      <span class="text-xs font-medium" style="color: var(--color-fg-muted);">Purpose</span>
      <select class="input" name="disposition" required>
        {% for p in purposes %}
          <option value="{{ p.key }}">{{ p.label }}</option>
        {% endfor %}
      </select>
    </label>
    <label class="flex flex-col gap-1">
      <span class="text-xs font-medium" style="color: var(--color-fg-muted);">Display name</span>
      <input class="input" name="display_name" value="{{ current.package_name or '' }}">
    </label>
    <label class="flex flex-col gap-1 md:col-span-2">
      <span class="text-xs font-medium" style="color: var(--color-fg-muted);">What does it do</span>
      <input class="input" name="what_it_does">
    </label>
    <label class="flex flex-col gap-1">
      <span class="text-xs font-medium" style="color: var(--color-fg-muted);">Project</span>
      <input class="input" name="project">
    </label>
    <label class="flex flex-col gap-1">
      <span class="text-xs font-medium" style="color: var(--color-fg-muted);">Notes</span>
      <input class="input" name="notes">
    </label>
    <label class="flex flex-col gap-1 md:col-span-2">
      <span class="text-xs font-medium" style="color: var(--color-fg-muted);">Why install</span>
      <textarea class="input" name="why" rows="3"></textarea>
    </label>
    <input type="hidden" name="csrf_token" value="{{ request.cookies.get('why_csrf', '') if request else '' }}">
    <div class="md:col-span-2 flex gap-2 justify-end">
      <button class="btn" type="submit" name="skip" value="1">Skip</button>
      <button class="btn btn-primary" type="submit">Save &amp; next</button>
    </div>
  </form>
</section>
{% endif %}
{% endblock %}