{{define "recognition_units"}}
<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "device"}}<span>视频通道列表</span></h2>
    </div>
    <div class="actions compact">
      <a class="btn secondary" href="/ui/recognition-units?new=1">{{icon "apply"}}<span>新增视频通道</span></a>
      {{if .SelectedRecognitionUnit}}
      <a class="btn secondary" href="/ui/recognition-units?ref={{.SelectedRecognitionUnit}}&edit=1">编辑</a>
      <form method="post" action="/ui/recognition-units/delete" onsubmit="return confirm('确认删除这个视频通道吗？');">
        <input type="hidden" name="ref" value="{{.SelectedRecognitionUnit}}" />
        <button class="btn secondary" type="submit">删除</button>
      </form>
      {{end}}
    </div>
  </div>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>视频通道</th>
          <th>场景</th>
          <th>视频源</th>
          <th>输出频道号</th>
        </tr>
      </thead>
      <tbody>
        {{range .RecognitionUnits}}
        <tr data-nav-row data-nav-href="/ui/recognition-units?ref={{.Ref}}" {{if eq $.SelectedRecognitionUnit .Ref}}class="selected"{{end}}>
          <td><a class="mono" href="/ui/recognition-units?ref={{.Ref}}">{{.Name}}</a>{{if .DisplayName}}<div class="stacked-meta"><span>{{.DisplayName}}</span></div>{{end}}</td>
          <td class="mono">{{.SceneTemplateName}}</td>
          <td class="mono">{{if .VideoSourceRef}}{{.VideoSourceRef}}{{else}}-{{end}}</td>
          <td class="mono">{{if .OutputChannel}}{{.OutputChannel}}{{else}}-{{end}}</td>
        </tr>
        {{else}}
        <tr><td colspan="4"><div class="empty-state compact"><div class="empty-title">还没有视频通道</div></div></td></tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>

{{if .RecognitionUnit}}
<form method="post" action="/ui/recognition-units">
  <input type="hidden" name="original_ref" value="{{.SelectedRecognitionUnit}}" />
  <div class="card editor-state {{if .RecognitionUnitEditing}}editing{{else}}readonly{{end}}">
    <div class="section-title">
      <div>
        <h2 class="title-with-icon">{{icon "device"}}<span>视频通道{{if .RecognitionUnit.Name}} · {{.RecognitionUnit.Name}}{{end}}</span></h2>
        <div class="form-hint form-state-hint">
          {{if .RecognitionUnitEditing}}
          <span class="pill run">编辑模式</span>
          <span>一路视频对应一个视频通道，由通道部署决定最终在哪台设备上运行。</span>
          {{else}}
          <span class="pill">查看模式</span>
          <span>当前内容为只读，点击“编辑”后进入表单模式。</span>
          {{end}}
        </div>
      </div>
      <div class="actions compact">
        {{if .RecognitionUnitEditing}}
        <button type="submit">{{icon "apply"}}<span>保存视频通道</span></button>
        <a class="btn secondary" href="/ui/recognition-units{{if .SelectedRecognitionUnit}}?ref={{.SelectedRecognitionUnit}}{{end}}">{{icon "close"}}<span>取消</span></a>
        {{end}}
      </div>
    </div>
    {{if .RecognitionUnitEditing}}
    <div class="field-grid">
      <label><span>视频通道名称<span class="required-mark">*</span></span><input name="name" value="{{.RecognitionUnit.Name}}" {{if not .SelectedRecognitionUnit}}autofocus{{end}} /></label>
      <label>
        <span>场景<span class="required-mark">*</span></span>
        <select name="scene_template_name">
          {{range .AssetProfiles}}
          <option value="{{.Name}}" {{if eq $.RecognitionUnit.SceneTemplateName .Name}}selected{{end}}>{{.Name}}</option>
          {{end}}
        </select>
      </label>
      <label><span>通道显示名</span><input name="display_name" value="{{.RecognitionUnit.DisplayName}}" /></label>
      <label><span>站点名</span><input name="site_name" value="{{.RecognitionUnit.SiteName}}" /></label>
      <label>
        <span>视频源<span class="required-mark">*</span></span>
        <select name="video_source_ref">
          <option value="">未选择</option>
          {{range .AssetVideoSources}}
          <option value="{{.Name}}" {{if eq $.RecognitionUnit.VideoSourceRef .Name}}selected{{end}}>{{.Name}}{{if .Area}} - {{.Area}}{{end}}</option>
          {{end}}
        </select>
      </label>
      <label><span>输出频道号<span class="required-mark">*</span></span><input name="output_channel" value="{{.RecognitionUnit.OutputChannel}}" /></label>
      <label><span>RTSP 端口</span><input class="mono" name="rtsp_port" value="{{.RecognitionUnit.RTSPPort}}" /></label>
    </div>
    {{else}}
    <div class="detail-sheet">
      <div class="detail-item"><span>视频通道名称</span><strong class="mono">{{if .RecognitionUnit.Name}}{{.RecognitionUnit.Name}}{{else}}-{{end}}</strong></div>
      <div class="detail-item"><span>场景</span><strong class="mono">{{if .RecognitionUnit.SceneTemplateName}}{{.RecognitionUnit.SceneTemplateName}}{{else}}-{{end}}</strong></div>
      <div class="detail-item"><span>通道显示名</span><strong>{{if .RecognitionUnit.DisplayName}}{{.RecognitionUnit.DisplayName}}{{else}}-{{end}}</strong></div>
      <div class="detail-item"><span>站点名</span><strong>{{if .RecognitionUnit.SiteName}}{{.RecognitionUnit.SiteName}}{{else}}-{{end}}</strong></div>
      <div class="detail-item"><span>视频源</span><strong class="mono">{{if .RecognitionUnit.VideoSourceRef}}{{.RecognitionUnit.VideoSourceRef}}{{else}}-{{end}}</strong></div>
      <div class="detail-item"><span>输出频道号</span><strong class="mono">{{if .RecognitionUnit.OutputChannel}}{{.RecognitionUnit.OutputChannel}}{{else}}-{{end}}</strong></div>
      <div class="detail-item"><span>RTSP 端口</span><strong class="mono">{{if .RecognitionUnit.RTSPPort}}{{.RecognitionUnit.RTSPPort}}{{else}}-{{end}}</strong></div>
    </div>
    {{end}}
  </div>
</form>
{{end}}
{{end}}