{% extends "base.html" %}
{% block app_nav %}
<nav class="app-tabs">
  <a href="/" class="app-tab">新建任务</a>
  <a href="/?tab=job-history" class="app-tab">任务历史</a>
  <a href="/config" class="app-tab">编辑配置</a>
</nav>
{% endblock %}
{% block content %}

<div id="job-status" class="status-strip" data-submission-id="{{ submission_id }}">
  <div class="status-info">
    <p class="status-label">当前任务</p>
    <p class="status-value">{{ submission_id }}</p>
    <p class="status-meta" id="job-status-meta"></p>
  </div>
  <div class="button-group">
    <button type="button" id="job-back-button" class="button-secondary">返回上一页</button>
    <button type="button" id="job-stop-button" class="button-secondary">停止任务</button>
    <button type="button" id="job-delete-button" class="button-secondary button-danger">删除当前任务产物</button>
  </div>
</div>

<section class="workspace-grid workspace-grid-job">
  <section class="job-main-column">
    <section class="section section-media">
      <div class="section-heading">
        <div>
          <p class="section-kicker">结果回看</p>
          <h2>生成视频</h2>
        </div>
        <p class="section-note">先看缩略图，点击缩略图后才加载对应视频，减少页面卡顿。</p>
      </div>
      <div id="output-list" class="output-grid"></div>
    </section>

    <section class="section section-logs">
      <div class="section-heading">
        <div>
          <p class="section-kicker">流水记录</p>
          <h2>最近日志</h2>
        </div>
      </div>
      <pre id="log-lines"></pre>
    </section>
  </section>

  <aside class="job-side-column sidebar-col">
    <section class="sidebar-section">
      <div class="section-heading compact-heading">
        <div>
          <p class="section-kicker">任务导航</p>
          <h2>任务选择</h2>
        </div>
      </div>
      <label class="field field-wide">
        <span>切换任务</span>
        <select id="job-select">
          <option value="{{ submission_id }}">{{ submission_id }}</option>
        </select>
      </label>
    </section>

    <section class="sidebar-section">
      <div class="section-heading compact-heading">
        <div>
          <p class="section-kicker">处理进度</p>
          <h2>处理阶段</h2>
        </div>
      </div>
      <ul id="stage-list" class="meta-list"></ul>
    </section>

    <section class="sidebar-section">
      <div class="section-heading compact-heading">
        <div>
          <p class="section-kicker">附加信息</p>
          <h2>产物信息</h2>
        </div>
      </div>
      <ul id="artifact-list" class="meta-list"></ul>
    </section>
  </aside>
</section>

<script src="/static/job.js?v=10"></script>
<script>
  (() => {
    const stageList = document.getElementById('stage-list');
    if (!stageList) return;
    const STATUSES = ['running', 'completed', 'failed', 'stopped', 'pending'];
    const stamp = (li) => {
      const text = li.querySelector('span')?.textContent || '';
      const m = text.match(/:\s+(\S+)/);
      if (!m) return;
      const word = m[1];
      if (STATUSES.includes(word)) li.dataset.status = word;
    };
    const stampAll = () => { for (const li of stageList.querySelectorAll('li')) stamp(li); };
    new MutationObserver(stampAll).observe(stageList, { childList: true });
    stampAll();
  })();
</script>
{% endblock %}