{{define "tasks"}}
<div class="card">
  <h2>创建任务</h2>
  <div class="muted small">当前仅支持 <code class="mono">config_apply</code></div>
  <form method="post" action="/ui/tasks" style="margin-top:10px">
    <div class="row">
      <div>
        <div class="muted small">类型</div>
        <input name="type" value="config_apply" />
      </div>
      <div>
        <div class="muted small">设备ID（逗号分隔）</div>
        <input name="device_ids" value="{{.DeviceIDs}}" placeholder="id1,id2" />
      </div>
    </div>
    <div style="margin-top:10px">
      <div class="muted small">payload_json（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>任务ID</th><th>类型</th><th>状态</th><th>设备数</th></tr>
      </thead>
      <tbody>
        {{range .Tasks}}
        <tr>
          <td><a class="mono" href="/ui/tasks/{{.ID}}">{{.ID}}</a></td>
          <td class="mono">{{.Type}}</td>
          <td>
            {{if eq .Status "success"}}<span class="pill ok">成功</span>
            {{else if eq .Status "failed"}}<span class="pill bad">失败</span>
            {{else if eq .Status "running"}}<span class="pill warn">执行中</span>
            {{else}}<span class="pill">待执行</span>{{end}}
          </td>
          <td>{{len .DeviceIDs}}</td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>

<div class="card">
  <h2>提示</h2>
  <div class="muted">也可以在 <a href="/ui/api">接口调试</a> 里直接调用 <code>/api/tasks</code>，并用 SSE 订阅 <code>/api/tasks/{id}/events</code>。</div>
</div>
{{end}}