{{define "tasks"}}
<div class="card">
  <h2>创建任务</h2>
  <div class="muted small">
    用于向多台边缘节点下发识别配置、重载服务、回滚配置或控制视频分析服务。
  </div>
  <form method="post" action="/ui/tasks" style="margin-top:10px">
    <div class="row">
      <div>
        <div class="muted small">任务类型</div>
        <select name="type">
          <option value="config_apply">下发识别配置</option>
          <option value="reload">重载识别服务</option>
          <option value="rollback">回滚识别配置</option>
          <option value="media_start">启动视频分析服务</option>
          <option value="media_restart">重启视频分析服务</option>
          <option value="media_stop">停止视频分析服务</option>
        </select>
      </div>
      <div>
        <div class="muted small">目标节点标识（逗号分隔）</div>
        <input name="device_ids" value="{{.DeviceIDs}}" placeholder="id1,id2" />
      </div>
    </div>
    <div style="margin-top:10px">
      <div class="muted small">高级参数（JSON）</div>
      <textarea name="payload_json" spellcheck="false">{{if .RawJSON}}{{.RawJSON}}{{else}}
{"config":{}}
{{end}}</textarea>
    </div>
    <div style="margin-top:10px"><button type="submit">创建任务</button></div>
  </form>
</div>

<div class="card">
  <h2>任务列表</h2>
  <div class="table-wrap" style="margin-top:10px">
    <table>
      <thead>
        <tr><th>任务</th><th>类型</th><th>目标设备数</th><th>状态</th></tr>
      </thead>
      <tbody>
        {{range .Tasks}}
        <tr>
          <td>
            <div><a class="mono" href="/ui/tasks/{{.ID}}">{{.ID}}</a></div>
            <div class="muted small">{{taskActionLabel .Type}}</div>
          </td>
          <td>
            <span class="{{taskGroupClass .Type}}">{{taskGroupLabel .Type}}</span>
          </td>
          <td>{{len .DeviceIDs}} 台</td>
          <td>
            <span class="{{taskStatusClass .Status}}">{{taskStatusLabel .Status}}</span>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>

<div class="card">
  <h2>高级入口</h2>
  <div class="muted">需要排查接口或实时事件时，可以进入 <a href="/ui/api">高级调试</a>。</div>
</div>
{{end}}