{% extends "base.html" %} {% block title %}{{ t('tasks') }}: {{ task.title }}{%
endblock %} {% block content %}
<div
  style="
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  "
>
  <div>
    <a
      href="/tasks"
      style="
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.85rem;
      "
      >{{ t('back_to_tasks') }}</a
    >
    <h1 style="font-size: 1.75rem; font-weight: 700; margin-top: 4px">
      {{ task.title }}
    </h1>
    <div
      style="
        font-family: monospace;
        color: var(--text-secondary);
        font-size: 0.8rem;
      "
    >
      ID: {{ task.task_id }} &middot; Rev: v{{ task.revision }} &middot; {{
      t('created') }}: {{ task.created_at[:19] }}
    </div>
  </div>
  <div style="display: flex; gap: 8px">
    <span class="badge badge-info" style="font-size: 1rem; padding: 6px 12px"
      >{{ task.state }}</span
    >
  </div>
</div>

<!-- Grid Layout: Info and Action Controls -->
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 24px">
  <div>
    <!-- Objective Card -->
    <div class="card">
      <h2 style="font-size: 1.15rem; margin-bottom: 8px">
        {{ t('task_objective') }}
      </h2>
      <div
        style="
          color: var(--text-primary);
          line-height: 1.6;
          white-space: pre-wrap;
          font-size: 0.95rem;
        "
      >
        {{ task.objective if task.objective else t('objective_empty') }}
      </div>

      <div
        style="
          margin-top: 16px;
          padding-top: 12px;
          border-top: 1px solid var(--border);
          font-size: 0.85rem;
        "
      >
        <strong>{{ t('next_action') }}:</strong>
        <code>{{ task.next_action }}</code>
      </div>
    </div>

    <!-- Event Journal Card -->
    <div class="card">
      <h2 style="font-size: 1.15rem; margin-bottom: 12px">
        {{ t('event_journal') }}
      </h2>
      {% if events %}
      <table
        style="
          width: 100%;
          border-collapse: collapse;
          text-align: left;
          font-size: 0.85rem;
        "
      >
        <thead>
          <tr
            style="
              border-bottom: 1px solid var(--border);
              color: var(--text-secondary);
            "
          >
            <th style="padding: 8px">{{ t('event_seq') }}</th>
            <th style="padding: 8px">{{ t('event_type') }}</th>
            <th style="padding: 8px">{{ t('event_actor') }}</th>
            <th style="padding: 8px">{{ t('event_digest') }}</th>
          </tr>
        </thead>
        <tbody>
          {% for ev in events %}
          <tr style="border-bottom: 1px solid var(--border)">
            <td style="padding: 8px; font-family: monospace">
              #{{ ev.sequence }}
            </td>
            <td style="padding: 8px; font-weight: 600">{{ ev.event_type }}</td>
            <td style="padding: 8px">{{ ev.actor }}</td>
            <td
              style="
                padding: 8px;
                font-family: monospace;
                font-size: 0.75rem;
                color: var(--text-secondary);
              "
            >
              {{ ev.payload_digest[:16] }}…
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p style="color: var(--text-secondary); padding: 8px 0">
        {{ t('no_events') }}
      </p>
      {% endif %}
    </div>
  </div>

  <div>
    <!-- State Transition Actions -->
    <div class="card">
      <h2 style="font-size: 1.15rem; margin-bottom: 12px">
        {{ t('transition_gate') }}
      </h2>
      {% if task.state not in ['completed', 'failed', 'canceled', 'rejected'] %}
      <form
        action="/tasks/{{ task.task_id }}/transition"
        method="POST"
        style="display: flex; flex-direction: column; gap: 10px"
      >
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        <input
          type="hidden"
          name="expected_revision"
          value="{{ task.revision }}"
        />

        {% if task.state == 'backlog' %}
        <button
          type="submit"
          name="new_state"
          value="working"
          class="btn btn-primary"
        >
          {{ t('start_working') }}
        </button>
        <button
          type="submit"
          name="new_state"
          value="ready"
          class="btn btn-secondary"
        >
          {{ t('mark_ready') }}
        </button>
        {% endif %} {% if task.state == 'ready' %}
        <button
          type="submit"
          name="new_state"
          value="working"
          class="btn btn-primary"
        >
          {{ t('start_working') }}
        </button>
        <button
          type="submit"
          name="new_state"
          value="backlog"
          class="btn btn-secondary"
        >
          {{ t('move_to_backlog') }}
        </button>
        {% endif %} {% if task.state == 'submitted' %}
        <button
          type="submit"
          name="new_state"
          value="working"
          class="btn btn-primary"
        >
          {{ t('start_working') }}
        </button>
        <button
          type="submit"
          name="new_state"
          value="ready"
          class="btn btn-secondary"
        >
          {{ t('mark_ready') }}
        </button>
        {% endif %} {% if task.state == 'working' %}
        <label style="font-size: 0.8rem; color: var(--text-secondary)"
          >Completion postcondition (evidence)</label
        >
        <input
          type="text"
          name="completion_postcondition"
          placeholder="What must be true after completion"
          style="
            padding: 8px 12px;
            background: var(--bg-primary);
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 0.85rem;
          "
        />
        <label style="font-size: 0.8rem; color: var(--text-secondary)"
          >Completion artifact refs (one path)</label
        >
        <input
          type="text"
          name="completion_artifact_refs"
          placeholder="01_Projects/done.md"
          style="
            padding: 8px 12px;
            background: var(--bg-primary);
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 0.85rem;
          "
        />
        <button
          type="submit"
          name="new_state"
          value="completed"
          class="btn btn-success"
        >
          {{ t('complete_task') }}
        </button>
        <button
          type="submit"
          name="new_state"
          value="input-required"
          class="btn btn-secondary"
        >
          {{ t('request_input') }}
        </button>
        <button
          type="submit"
          name="new_state"
          value="blocked"
          class="btn btn-secondary"
        >
          {{ t('block_task') }}
        </button>
        <button
          type="submit"
          name="new_state"
          value="failed"
          class="btn btn-danger"
        >
          {{ t('fail_task') }}
        </button>
        {% endif %} {% if task.state in ['blocked', 'input-required',
        'auth-required'] %}
        <button
          type="submit"
          name="new_state"
          value="working"
          class="btn btn-primary"
        >
          {{ t('resume_task') }}
        </button>
        <button
          type="submit"
          name="new_state"
          value="ready"
          class="btn btn-secondary"
        >
          {{ t('mark_ready') }}
        </button>
        {% endif %}

        <button
          type="submit"
          name="new_state"
          value="canceled"
          class="btn btn-secondary"
          style="color: var(--danger)"
        >
          {{ t('cancel_task') }}
        </button>
      </form>
      {% else %}
      <div
        style="
          padding: 12px;
          background: rgba(34, 197, 94, 0.1);
          border-radius: 6px;
          color: #4ade80;
          font-size: 0.9rem;
        "
      >
        🔒 {{ t('terminal_state_msg') }} (<strong>{{ task.state }}</strong>).
      </div>
      {% endif %}
    </div>

    <!-- Task Metadata Card -->
    <div class="card">
      <h2 style="font-size: 1.15rem; margin-bottom: 12px">
        {{ t('parameters') }}
      </h2>
      <div style="font-size: 0.85rem; line-height: 2">
        <div><strong>{{ t('owner') }}:</strong> {{ task.owner }}</div>
        <div>
          <strong>{{ t('assignee') }}:</strong> {{ task.assignee or
          t('unassigned') }}
        </div>
        <div>
          <strong>{{ t('priority') }}:</strong>
          <span class="badge badge-info">{{ task.priority }}</span>
        </div>
        <div>
          <strong>{{ t('authority') }}:</strong>
          <code>{{ task.authority }}</code>
        </div>
        <div>
          <strong>{{ t('revision') }}:</strong>
          <code>v{{ task.revision }}</code>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}