{{define "config_ui"}}
{{template "device_nav" .}}
<div class="card">
  <h2>高级识别配置</h2>
  <div class="muted small">节点：<a class="mono" href="/ui/devices/{{.Device.DeviceID}}">{{.Device.DeviceID}}</a>（{{.Device.DeviceName}}）。适合需要直接查看原始配置结构的高级用户。</div>
</div>

<div class="card advanced">
  <h2>配置结构与当前状态</h2>
  <div class="muted small">展示设备端返回的识别配置结构和当前运行状态。</div>
  <div class="row" style="margin-top:10px; gap:16px">
    <div style="flex:1">
      <div class="muted small">配置结构</div>
      <pre>{{.SchemaJSON}}</pre>
    </div>
    <div style="flex:1">
      <div class="muted small">当前状态</div>
      <pre>{{.StateJSON}}</pre>
    </div>
  </div>
</div>

<div class="card">
  <h2>编辑目标识别配置</h2>
  <div class="muted small">先预览变更，再部署到设备。</div>
  <form method="post" action="/ui/devices/{{.Device.DeviceID}}/config-ui/plan">
    <textarea name="json" spellcheck="false">{{if .RawJSON}}{{.RawJSON}}{{else}}{"instances":[]}{{end}}</textarea>
    <div class="actions" style="margin-top:10px">
      <button type="submit">预览变更</button>
      <button type="submit" formaction="/ui/devices/{{.Device.DeviceID}}/config-ui/apply">部署到设备</button>
    </div>
  </form>
</div>

<div class="card">
  <h2>人脸库</h2>
  <div class="muted small">上传人脸库文件并让设备端重新加载，用于人脸识别场景。</div>
  <pre>{{.FaceGalleryJSON}}</pre>
  <div class="row" style="margin-top:10px; gap:16px">
    <form method="post" action="/ui/devices/{{.Device.DeviceID}}/face-gallery/upload" enctype="multipart/form-data" class="row">
      <div>
        <div class="muted small">人脸库文件</div>
        <input type="file" name="file" />
      </div>
      <div style="align-self:end"><button type="submit">上传人脸库</button></div>
    </form>
    <form method="post" action="/ui/devices/{{.Device.DeviceID}}/face-gallery/reload" style="align-self:end">
      <button type="submit">重新加载</button>
    </form>
  </div>
</div>

{{if .RawText}}
<div class="card">
  <h2>最近响应</h2>
  <pre>{{.RawText}}</pre>
</div>
{{end}}
{{end}}