{{define "device"}}
<div class="card">
  <h2>设备详情</h2>
  <div class="row" style="margin-top:10px">
    <div>
      <div class="muted small">名称</div>
      <div><b>{{.Device.DeviceName}}</b></div>
      <div class="muted small mono" style="margin-top:6px">{{.Device.DeviceID}}</div>
    </div>
    <div>
      <div class="muted small">状态</div>
      <div>{{if .Device.Online}}<span class="pill ok">在线</span>{{else}}<span class="pill bad">离线</span>{{end}}</div>
      <div class="muted small" style="margin-top:6px">最后在线：{{ago .Device.LastSeenMs}}</div>
    </div>
    <div>
      <div class="muted small">地址</div>
      <div class="mono">{{.Device.IP}}:{{.Device.AgentPort}}</div>
      <div class="muted small mono" style="margin-top:6px">media: {{.Device.MediaPort}}</div>
    </div>
    <div>
      <div class="muted small">版本</div>
      <div class="mono">{{.Device.Version}}</div>
      {{if .Device.GitSha}}<div class="muted small mono" style="margin-top:6px">git: {{.Device.GitSha}}</div>{{end}}
      {{if .Device.Hostname}}<div class="muted small" style="margin-top:6px">hostname: <span class="mono">{{.Device.Hostname}}</span></div>{{end}}
    </div>
    <div>
      <div class="muted small">快速查看</div>
      <div style="margin-top:6px">
        <a href="/ui/devices/{{.Device.DeviceID}}/graphs">图表</a> |
        <a href="/ui/devices/{{.Device.DeviceID}}/logs?limit=200">日志</a> |
        <a href="/ui/devices/{{.Device.DeviceID}}/config-friendly">友好配置</a> |
        <a href="/ui/devices/{{.Device.DeviceID}}/config-ui">JSON 调试</a>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <h2>常用操作</h2>
  <div class="actions" style="margin-top:8px">
    <form method="post" action="/ui/devices/{{.Device.DeviceID}}/action"><input type="hidden" name="action" value="info" /><button>获取 Info</button></form>
    <form method="post" action="/ui/devices/{{.Device.DeviceID}}/action"><input type="hidden" name="action" value="media_status" /><button>查询 Media 状态</button></form>
    <form method="post" action="/ui/devices/{{.Device.DeviceID}}/action"><input type="hidden" name="action" value="reload" /><button>重载</button></form>
    <form method="post" action="/ui/devices/{{.Device.DeviceID}}/action"><input type="hidden" name="action" value="rollback" /><button>回滚</button></form>
    <form method="post" action="/ui/devices/{{.Device.DeviceID}}/action"><input type="hidden" name="action" value="media_start" /><button>启动 Media</button></form>
    <form method="post" action="/ui/devices/{{.Device.DeviceID}}/action"><input type="hidden" name="action" value="media_restart" /><button>重启 Media</button></form>
    <form method="post" action="/ui/devices/{{.Device.DeviceID}}/action"><input type="hidden" name="action" value="media_stop" /><button>停止 Media</button></form>
  </div>
</div>

<div class="card">
  <h2>下发配置（Config Apply）</h2>
  <div class="muted small">将 JSON 作为请求体发送到 agent：<code class="mono">PUT /v1/config</code></div>
  <form method="post" action="/ui/devices/{{.Device.DeviceID}}/config/apply">
    <textarea name="json" spellcheck="false">{{if .RawJSON}}{{.RawJSON}}{{else}}
{"config":{}}
{{end}}</textarea>
    <div style="margin-top:10px"><button type="submit">下发</button></div>
  </form>
</div>

<div class="card">
  <h2>上传模型</h2>
  <div class="muted small">转发到 agent：<code class="mono">PUT /v1/models/{name}</code></div>
  <form method="post" action="/ui/devices/{{.Device.DeviceID}}/models/upload" enctype="multipart/form-data" class="row">
    <div>
      <div class="muted small">name</div>
      <input name="name" placeholder="模型名" />
    </div>
    <div>
      <div class="muted small">file</div>
      <input type="file" name="file" />
    </div>
    <div style="align-self:end"><button type="submit">上传</button></div>
  </form>
</div>

<div class="card">
  <h2>设备信息（JSON）</h2>
  <pre>{{json .Device}}</pre>
</div>

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