{% extends "base.html" %}
{% block title %}{{ task.slug }} - {{ ws_name }} - backseat-harness{% endblock %}
{% block main_attrs %} data-auto-refresh="60"{% endblock %}
{% block content %}
<style>
  /* Task page: mirror the chat page's flush sticky header, and lay Status
     (about 2/3) beside Run (about 1/3). */
  main.container {
    padding-top: 0;
    padding-bottom: 1.25rem;
  }
  .task-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    align-items: start;
  }
  @media (max-width: 640px) {
    .task-columns {
      grid-template-columns: 1fr;
    }
  }
  /* Iteration / Generation / Reason: a header-less table (no <thead>). Its
     cells take the same padding and row dividers as the checklist .data-table
     cells -- neither table overrides them, so both inherit the shared table-cell
     rules -- and only the outer margin and the label column are set here. */
  .task-meta {
    width: 100%;
    margin: 0.5rem 0 1rem;
    border-collapse: collapse;
  }
  .task-meta td:first-child {
    color: var(--muted);
    width: 8rem;
  }
  /* Goal box: breathing room like the transcript box. */
  .goal {
    padding: 0.85rem 1rem;
    margin: 0.5rem 0 1rem;
    overflow: auto;
  }
  /* Rendered goal (_markdown_box.html): the same panel as .goal, but
     prose rather than monospace, so the markdown reads as text. */
  .goal-md {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .goal-md > * + * {
    margin-top: 0.6em;
  }
  .goal-md h1,
  .goal-md h2,
  .goal-md h3,
  .goal-md h4,
  .goal-md h5,
  .goal-md h6 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
  }
  .goal-md pre {
    margin: 0;
    overflow-x: auto;
  }
  .goal-md ul,
  .goal-md ol {
    margin: 0;
    padding-left: 1.4rem;
  }
  .run-form button[type="submit"] {
    font-size: 0.85rem;
    padding: 0.35rem 0.8rem;
  }
  .run-form button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .run-notice {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
</style>

<header class="chat-header task-header">
  <div class="chat-header-prompt">
    <a class="chat-header-back" href="/ws/{{ ws_id }}">← {{ ws_name }}</a>
    <strong>{{ task.slug }}</strong>
    <small>Updated: {{ task.updated_at | format_datetime }}</small>
  </div>
  {% if takeover_cmd %}
  <form id="takeover-form" class="chat-continue-form">
    <input type="hidden" name="cmd" value='{{ takeover_cmd|tojson }}'>
    <input type="hidden" name="cwd" value=".">
    <input type="hidden" name="back_url" value="/ws/{{ ws_id }}/tasks/{{ task.slug }}">
    <input type="hidden" name="back_label" value="{{ ws_name }}">
    <input type="hidden" name="title" value="{{ task.slug }}">
    <button type="submit" class="btn">Takeover</button>
  </form>
  {% endif %}
</header>

{% if takeover_cmd %}
<script>
  document.getElementById('takeover-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    const cmd = JSON.parse(formData.get('cmd'));
    const cwd = formData.get('cwd');
    const backUrl = formData.get('back_url');
    const backLabel = formData.get('back_label');
    const title = formData.get('title');

    try {
      const response = await fetch('/shell/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ cmd, cwd })
      });
      if (response.ok) {
        const data = await response.json();
        const params = new URLSearchParams({ from: backUrl, label: backLabel, title });
        window.location.href = `/shell/${data.session_id}?${params}`;
      } else {
        alert('Failed to start shell session');
      }
    } catch (err) {
      alert('Error: ' + err.message);
    }
  });
</script>
{% endif %}

<div class="task-columns">
  <section>
    <h4>Status <span class="badge" data-status="{{ task.status }}">{{ task.badge }}</span></h4>
    <table class="task-meta">
      <tr>
        <td>Provider</td>
        <td>{{ task.provider }}</td>
      </tr>
      <tr>
        <td>Iteration</td>
        <td>{{ task.iteration }}</td>
      </tr>
      <tr>
        <td>Generation</td>
        <td>{{ task.generation }}</td>
      </tr>
      {% if task.reason %}
      <tr>
        <td>Reason</td>
        <td><em>{{ task.reason }}</em></td>
      </tr>
      {% endif %}
    </table>
  </section>

  <section>
    <h4>Run</h4>
    {% if notice %}
    <p class="run-notice" role="status">{{ notice }}</p>
    {% endif %}
    <form class="run-form" method="post" action="/ws/{{ ws_id }}/tasks/{{ task.slug }}/run">
      <label for="brief">
        {{ task.run_action }} this task with an added instruction
      </label>
      <textarea id="brief" name="brief" rows="2" placeholder="Additional instruction for this run..." required></textarea>
      <button type="submit" id="run-submit" disabled>{{ task.run_action }} task</button>
    </form>
  </section>
</div>

<script>
  (function () {
    var brief = document.getElementById('brief');
    var submit = document.getElementById('run-submit');
    if (!brief || !submit) return;
    var sync = function () { submit.disabled = brief.value.trim().length === 0; };
    brief.addEventListener('input', sync);
    sync();
  })();
</script>

<section>
  <h4>Goal</h4>
  <pre class="goal">{{ task.goal }}</pre>
  {% with md_selector='pre.goal', md_class='goal goal-md' %}
  {% include "_markdown_box.html" %}
  {% endwith %}
</section>

<section>
  <h4>Checklist</h4>
  {% if task.checklist %}
  <table class="data-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Status</th>
        <th>Notes</th>
        <th>Evidence</th>
        <th>Model</th>
        <th>Updated</th>
      </tr>
    </thead>
    <tbody>
      {% for step_id, step in task.checklist.items() %}
      <tr>
        <td>{{ step_id }}</td>
        <td>{{ step.get("title", "") }}</td>
        <td><span class="badge" data-status="{{ step.get('status', 'pending') }}">{{ step.get("status", "pending") }}</span></td>
        <td>{{ step.get("notes", "") }}</td>
        <td>{{ step.get("evidence", "") }}</td>
        <td>{{ step.get("model", "") }}</td>
        <td><small>{{ step.get("updated_at", "") }}</small></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p>No checklist steps.</p>
  {% endif %}

  {% if task.remarks %}
  <h5>Remarks</h5>
  <ul>
    {% for r in task.remarks %}
    <li>{{ r }}</li>
    {% endfor %}
  </ul>
  {% endif %}
</section>

{% if task.transcript %}
<section>
  <p><a href="/ws/{{ ws_id }}/tasks/{{ task.slug }}/transcript">Raw transcript</a></p>
</section>
{% endif %}
{% endblock %}