{{define "device_batch_config"}}
<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "devices"}}<span>已选设备</span></h2>
    </div>
    <div class="actions compact">
      <a class="btn secondary" href="{{.SelectedDevicesURL}}#batch-config">返回设备列表</a>
      <a class="btn secondary" href="/ui/devices">重新选择</a>
    </div>
  </div>
  <div class="info-list">
    {{range .SelectedDevices}}
    <div>
      <span>{{.DisplayName}}</span>
      <strong class="mono">{{.DeviceID}}</strong>
    </div>
    {{else}}
    <div class="full">
      <span>目标设备</span>
      <strong>还没有选中设备</strong>
    </div>
    {{end}}
  </div>
</div>

<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "config"}}<span>下发业务配置</span></h2>
      <div class="muted">先选择一份已有业务配置，再为已选设备创建下发任务。</div>
    </div>
  </div>

  <form method="post" action="/ui/devices/batch-config">
    {{range .SelectedDeviceIDs}}<input type="hidden" name="device_id" value="{{.}}" />{{end}}
    <div class="field-grid">
      <label class="full"><span>业务配置</span>
        <select name="profile">
          {{range .AssetProfiles}}
          <option value="{{.Name}}" {{if eq .Name $.SelectedProfile}}selected{{end}}>{{.Name}}{{if .BusinessName}} - {{.BusinessName}}{{end}}</option>
          {{end}}
        </select>
      </label>
    </div>

    <div class="actions">
      <button type="submit" class="primary">创建下发任务</button>
    </div>
  </form>
</div>

<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "preview"}}<span>业务配置摘要</span></h2>
    </div>
  </div>
  {{if .AssetProfile}}
  <div class="info-list">
    <div><span>业务配置</span><strong>{{.AssetProfile.Name}}</strong></div>
    <div><span>业务名称</span><strong>{{if .AssetProfile.BusinessName}}{{.AssetProfile.BusinessName}}{{else}}-{{end}}</strong></div>
    <div><span>关联模板</span><strong>{{if .SelectedTemplate}}{{.SelectedTemplate}}{{else}}-{{end}}</strong></div>
    <div><span>视频通道</span><strong>{{len .AssetProfile.Instances}} 路</strong></div>
    {{with index .AssetProfile.Instances 0}}
    <div><span>首个通道</span><strong>{{if .DisplayName}}{{.DisplayName}}{{else}}{{.Name}}{{end}}</strong></div>
    {{end}}
    {{if .AssetProfile.Description}}
    <div class="full"><span>说明</span><strong>{{.AssetProfile.Description}}</strong></div>
    {{end}}
  </div>
  {{if .AssetProfile.Instances}}
  <div class="table-wrap" style="margin-top:14px">
    <table>
      <thead>
        <tr>
          <th>通道</th>
          <th>显示名称</th>
          <th>站点</th>
          <th>RTSP</th>
        </tr>
      </thead>
      <tbody>
        {{range .AssetProfile.Instances}}
        <tr>
          <td class="mono">{{if .ChannelNo}}{{.ChannelNo}}{{else}}{{.Name}}{{end}}</td>
          <td>{{if .DisplayName}}{{.DisplayName}}{{else}}-{{end}}</td>
          <td>{{if .SiteName}}{{.SiteName}}{{else}}-{{end}}</td>
          <td class="mono">{{if .RTSPURL}}{{.RTSPURL}}{{else}}-{{end}}</td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
  {{end}}
  {{else}}
  <div class="empty-state">
    <div class="empty-title">还没有可用业务配置</div>
    <div class="muted">请先到识别配置中创建业务配置，再回来下发。</div>
  </div>
  {{end}}
</div>
{{end}}