{% extends "base.html" %}
{% block title %}Task {{ task.id }} · Apex Console{% endblock %}
{% block body %}
<header class="topbar">
  <div>
    <h1>Task Detail</h1>
    <p><a href="{{ url_for('runtime_console_tasks') }}">&larr; Back to tasks</a></p>
  </div>
</header>

<section class="panel timeline-panel">
  <div class="section-title">
    <h2>{{ task.goal }}</h2>
    <span class="status-pill {{ task.status }}">{{ task.status }}</span>
  </div>

  <dl class="detail-grid">
    <div>
      <dt>Task ID</dt>
      <dd>{{ task.id }}</dd>
    </div>
    <div>
      <dt>Device</dt>
      <dd>{{ device_name }}</dd>
    </div>
    <div>
      <dt>Created</dt>
      <dd>{{ task.created_at or "-" }}</dd>
    </div>
    <div>
      <dt>Updated</dt>
      <dd>{{ task.updated_at or "-" }}</dd>
    </div>
    {% if task.failure_reason %}
    <div>
      <dt>Failure</dt>
      <dd>{{ task.failure_reason }}</dd>
    </div>
    {% endif %}
  </dl>

  <div class="timeline-controls">
    <span>Step {{ current_step_index }} of {{ timeline|length }}</span>
  </div>

  {% if not timeline %}
  <div class="empty-state compact">
    <span>No timeline records captured.</span>
  </div>
  {% else %}
  <form class="timeline-controls" method="get" action="{{ url_for('runtime_console_task_detail', task_id=task.id) }}">
    <label>
      Step
      <select name="step" onchange="this.form.submit()">
        {% for record in timeline %}
        <option
          value="{{ loop.index0 }}"
          {% if loop.index0 == current_step_index %}selected{% endif %}
        >Step {{ loop.index }}{% if record.tool_call and record.tool_call.get('action') %} ({{ record.tool_call.get('action') }}){% endif %}</option>
        {% endfor %}
      </select>
    </label>
    <noscript><button class="icon-text-button" type="submit"><span>Show</span></button></noscript>
  </form>

  <div class="timeline-stage">
    <div class="screenshot-frame">
      {% if current_step.image_base64 %}
      <img
        src="data:image/png;base64,{{ current_step.image_base64 }}"
        alt="Task step screenshot"
      />
      {% else %}
      <span>No screenshot</span>
      {% endif %}
    </div>
    <div class="step-data">
      <div>
        <h3>Tool Call</h3>
        <pre>{{ current_step.tool_call | tojson(indent=2) }}</pre>
      </div>
      <div>
        <h3>Result</h3>
        <pre>{{ current_step.result | tojson(indent=2) }}</pre>
      </div>
    </div>
  </div>
  {% endif %}
</section>
{% endblock %}