{{define "plans"}}
<div class="card">
  <div class="section-title">
    <div>
      <h2 class="title-with-icon">{{icon "profile"}}<span>场景配置列表</span></h2>
    </div>
    <div class="actions compact">
      <a class="btn secondary" href="/ui/plans?new=1">{{icon "apply"}}<span>新建场景</span></a>
      {{if .SelectedProfile}}
      <a class="btn secondary" href="/ui/plans?name={{.SelectedProfile}}&edit=1">编辑</a>
      <form method="post" action="/ui/plans/{{.SelectedProfile}}/delete" onsubmit="return confirm('确认删除这个场景配置吗？');">
        <button class="btn secondary" type="submit">删除</button>
      </form>
      {{end}}
    </div>
  </div>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>场景配置</th>
          <th>描述</th>
          <th>视频通道</th>
        </tr>
      </thead>
      <tbody>
        {{range .AssetProfiles}}
        <tr data-profile-row data-profile-href="/ui/plans?name={{.Name}}" {{if eq $.SelectedProfile .Name}}class="selected"{{end}}>
          <td><a class="mono" href="/ui/plans?name={{.Name}}">{{.Name}}</a></td>
          <td>{{if .Description}}{{.Description}}{{else}}-{{end}}</td>
          <td>{{len .Instances}}</td>
        </tr>
        {{else}}
        <tr><td colspan="3"><div class="empty-state compact"><div class="empty-title">还没有场景配置</div></div></td></tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>

{{if .AssetProfileEditor}}
{{if .AssetProfileEditing}}
<form method="post" action="{{.AssetProfileFormAction}}">
  <input type="hidden" id="active-instance-input" name="active_instance" value="{{.ActiveInstanceIndex}}" />
{{end}}
  <div class="card editor-state {{if .AssetProfileEditing}}editing{{else}}readonly{{end}}">
    <div class="section-title">
      <div>
        <h2 class="title-with-icon">{{icon "profile"}}<span>场景配置{{if .AssetProfileEditor.Name}} · {{.AssetProfileEditor.Name}}{{end}}</span></h2>
        <div class="form-hint form-state-hint">
          {{if .AssetProfileEditing}}
          <span class="pill run">编辑模式</span>
          <span>正在编辑场景配置</span>
          {{else}}
          <span class="pill">查看模式</span>
          <span>当前内容为只读，点击“编辑”后进入表单模式。</span>
          {{end}}
        </div>
      </div>
      <div class="actions compact">
        {{if .AssetProfileEditing}}
        <button type="submit">{{icon "apply"}}<span>保存场景配置</span></button>
        <a class="btn secondary" href="/ui/plans{{if .SelectedProfile}}?name={{.SelectedProfile}}{{end}}">{{icon "close"}}<span>取消</span></a>
        {{end}}
        <button
          type="button"
          class="btn secondary js-export-json"
          data-export-url="/ui/plans/{{.AssetProfileEditor.Name}}/export"
          data-default-filename="{{.AssetProfileEditor.Name}}.json"
        >{{icon "apply"}}<span>导出为 JSON</span></button>
      </div>
    </div>
    {{if .AssetProfileEditing}}
    <div class="field-grid">
      <label><span>场景名称<span class="required-mark">*</span></span><input name="profile_name" value="{{.AssetProfileEditor.Name}}" {{if .AssetProfileEditing}}{{if not .SelectedProfile}}autofocus{{end}}{{else}}readonly{{end}} /></label>
      <label><span>业务名称</span><input name="business_name" value="{{.AssetProfileEditor.BusinessName}}" {{if not .AssetProfileEditing}}readonly{{end}} /></label>
      <label>
        <span>调试参数</span>
        <select name="overlay_name" {{if not .AssetProfileEditing}}disabled{{end}}>
          <option value="">不使用</option>
          {{range .AssetOverlays}}
          <option value="{{.Name}}" {{if eq $.AssetProfileEditor.OverlayName .Name}}selected{{end}}>{{.Name}}{{if .Description}} - {{.Description}}{{end}}</option>
          {{end}}
        </select>
      </label>
      <label><span>站点名</span><input name="site_name" value="{{.AssetProfileEditor.SiteName}}" {{if not .AssetProfileEditing}}readonly{{end}} /></label>
      <label><span>描述</span><input name="description" value="{{.AssetProfileEditor.Description}}" {{if not .AssetProfileEditing}}readonly{{end}} /></label>
    </div>
    {{else}}
    <div class="detail-sheet">
      <div class="detail-item"><span>场景名称</span><strong class="mono">{{if .AssetProfileEditor.Name}}{{.AssetProfileEditor.Name}}{{else}}-{{end}}</strong></div>
      <div class="detail-item"><span>业务名称</span><strong>{{if .AssetProfileEditor.BusinessName}}{{.AssetProfileEditor.BusinessName}}{{else}}-{{end}}</strong></div>
      <div class="detail-item"><span>调试参数</span><strong>{{if .AssetProfileEditor.OverlayName}}{{.AssetProfileEditor.OverlayName}}{{else}}不使用{{end}}</strong></div>
      <div class="detail-item"><span>站点名</span><strong>{{if .AssetProfileEditor.SiteName}}{{.AssetProfileEditor.SiteName}}{{else}}-{{end}}</strong></div>
      <div class="detail-item full"><span>描述</span><strong>{{if .AssetProfileEditor.Description}}{{.AssetProfileEditor.Description}}{{else}}-{{end}}</strong></div>
    </div>
    {{end}}
  </div>

  <div class="card">
    <div class="section-title">
      <div>
        <h2 class="title-with-icon">{{icon "device"}}<span>视频通道</span></h2>
      </div>
      <div class="actions compact">
        <span class="pill">{{len .AssetProfileEditor.Instances}} 路</span>
        {{if .AssetProfileEditing}}
        <button class="btn secondary" type="submit" name="add_instance" value="1">{{icon "apply"}}<span>新增通道</span></button>
        {{end}}
      </div>
    </div>
    <table>
      <thead>
        <tr>
          <th>通道</th>
          <th>模板</th>
          <th>输入绑定</th>
          <th>服务绑定</th>
          <th>输出绑定</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {{range $i, $inst := .AssetProfileEditor.Instances}}
        {{$template := index $.AssetTemplateMap $inst.Template}}
        <tr data-instance-row="{{$i}}" {{if eq $.ActiveInstanceIndex $i}}class="selected"{{else if $inst.Delete}}class="muted-row"{{end}}>
          <td class="mono">{{$inst.Name}}</td>
          <td>{{if $inst.Delete}}<span class="pill warn">待删除</span>{{else}}<span class="mono">{{$inst.Template}}</span>{{end}}</td>
          <td>
            {{if $inst.Delete}}-{{else}}
            {{if $template.Slots.Inputs}}
              {{range $slot := $template.Slots.Inputs}}
              <div class="stacked-meta">
                <span>{{$slot.Description}}</span>
                <span class="mono">{{if inputBindingRef $inst.InputBindings $slot.Name}}{{inputBindingRef $inst.InputBindings $slot.Name}}{{else}}-{{end}}</span>
              </div>
              {{end}}
            {{else}}-{{end}}
            {{end}}
          </td>
          <td>
            {{if $inst.Delete}}-{{else}}
            {{if $template.Slots.Services}}
              {{range $slot := $template.Slots.Services}}
              <div class="stacked-meta">
                <span>{{$slot.Description}}</span>
                <span class="mono">{{if serviceBindingRef $inst.ServiceBindings $slot.Name}}{{serviceBindingRef $inst.ServiceBindings $slot.Name}}{{else}}-{{end}}</span>
              </div>
              {{end}}
            {{else}}-{{end}}
            {{end}}
          </td>
          <td>
            {{if $inst.Delete}}-{{else}}
            {{if $template.Slots.Outputs}}
              {{range $slot := $template.Slots.Outputs}}
              <div class="stacked-meta">
                <span>{{$slot.Description}}</span>
                <span class="mono">
                  {{if outputBindingValue $inst.OutputBindings $slot.Name "publish_hls_path"}}
                    {{outputBindingValue $inst.OutputBindings $slot.Name "publish_hls_path"}}
                  {{else if outputBindingValue $inst.OutputBindings $slot.Name "publish_rtsp_path"}}
                    {{outputBindingValue $inst.OutputBindings $slot.Name "publish_rtsp_port"}} {{outputBindingValue $inst.OutputBindings $slot.Name "publish_rtsp_path"}}
                  {{else}}-{{end}}
                </span>
              </div>
              {{end}}
            {{else}}-{{end}}
            {{end}}
          </td>
          <td>
            <div class="actions compact">
              <button type="button" class="btn ghost js-open-instance-editor" data-instance-index="{{$i}}" data-target="profile-instance-{{$i}}">编辑</button>
              {{if $.AssetProfileEditing}}
              <button class="btn secondary" type="submit" name="remove_instance" value="{{$i}}">删除</button>
              {{end}}
            </div>
          </td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>

  {{if .AssetProfileEditor.Instances}}
  <div class="card editor-state {{if .AssetProfileEditing}}editing{{else}}readonly{{end}}">
    <div class="section-title">
      <div>
        <h2 class="title-with-icon">{{icon "device"}}<span>通道详情{{if gt (len .AssetProfileEditor.Instances) 0}}{{with index .AssetProfileEditor.Instances .ActiveInstanceIndex}}{{if .Name}} · {{.Name}}{{end}}{{end}}{{end}}</span></h2>
        <div class="form-hint form-state-hint">
          {{if .AssetProfileEditing}}
          <span class="pill run">编辑模式</span>
          <span>当前通道的修改会在点击“保存场景配置”后统一生效。</span>
          {{else}}
          <span class="pill">查看模式</span>
          <span>当前通道详情为只读展示。</span>
          {{end}}
        </div>
      </div>
    </div>
    {{range $i, $inst := .AssetProfileEditor.Instances}}
    {{$template := index $.AssetTemplateMap $inst.Template}}
    <section id="profile-instance-{{$i}}" class="profile-instance-editor" data-instance-editor="{{$i}}" {{if ne $.ActiveInstanceIndex $i}}hidden{{end}}>
      {{if $.AssetProfileEditing}}
      <div class="field-grid profile-instance-grid">
        <input type="hidden" name="instances[{{$i}}].template" value="{{$inst.Template}}" />
        <label><span>通道名<span class="required-mark">*</span></span><input name="instances[{{$i}}].name" value="{{$inst.Name}}" {{if not $.AssetProfileEditing}}readonly{{end}} /></label>
        <label><span>通道显示名</span><input name="instances[{{$i}}].display_name" value="{{$inst.DisplayName}}" {{if not $.AssetProfileEditing}}readonly{{end}} /></label>
        <label><span>模板</span><input class="mono" value="{{$inst.Template}}" readonly /></label>
        {{range $slot := $template.Slots.Inputs}}
        <label>
          <span>{{$slot.Description}}{{if $slot.Required}}<span class="required-mark">*</span>{{end}}</span>
          <select name="instances[{{$i}}].input_bindings.{{$slot.Name}}.video_source_ref" {{if not $.AssetProfileEditing}}disabled{{end}}>
            <option value="">未选择</option>
            {{range $.AssetVideoSources}}
            <option value="{{.Name}}" {{if eq (inputBindingRef $inst.InputBindings $slot.Name) .Name}}selected{{end}}>{{.Name}}{{if .Area}} - {{.Area}}{{end}}</option>
            {{end}}
          </select>
        </label>
        {{end}}
        {{range $slot := $template.Slots.Services}}
        <label>
          <span>{{$slot.Description}}{{if $slot.Required}}<span class="required-mark">*</span>{{end}}</span>
          <select name="instances[{{$i}}].service_bindings.{{$slot.Name}}.service_ref" {{if not $.AssetProfileEditing}}disabled{{end}}>
            <option value="">未选择</option>
            {{range $.AssetIntegrations}}{{if eq .Type $slot.Type}}
            <option value="{{.Name}}" {{if eq (serviceBindingRef $inst.ServiceBindings $slot.Name) .Name}}selected{{end}}>{{.Name}}{{if .Description}} - {{.Description}}{{end}}</option>
            {{end}}{{end}}
          </select>
        </label>
        {{end}}
        {{range $slot := $template.Slots.Outputs}}
        <label>
          <span>{{$slot.Description}} RTSP 端口</span>
          <input class="mono" name="instances[{{$i}}].output_bindings.{{$slot.Name}}.publish_rtsp_port" value="{{outputBindingValue $inst.OutputBindings $slot.Name "publish_rtsp_port"}}" {{if not $.AssetProfileEditing}}readonly{{end}} />
        </label>
        {{end}}
      </div>
      {{else}}
      <div class="detail-grid profile-instance-grid detail-sheet">
        <div class="detail-item"><span>通道名</span><strong class="mono">{{$inst.Name}}</strong></div>
        <div class="detail-item"><span>通道显示名</span><strong>{{if $inst.DisplayName}}{{$inst.DisplayName}}{{else}}-{{end}}</strong></div>
        <div class="detail-item"><span>模板</span><strong class="mono">{{$inst.Template}}</strong></div>
        {{range $slot := $template.Slots.Inputs}}
        <div class="detail-item">
          <span>{{$slot.Description}}</span>
          <strong class="mono">{{if inputBindingRef $inst.InputBindings $slot.Name}}{{inputBindingRef $inst.InputBindings $slot.Name}}{{else}}-{{end}}</strong>
        </div>
        {{end}}
        {{range $slot := $template.Slots.Services}}
        <div class="detail-item">
          <span>{{$slot.Description}}</span>
          <strong>{{if serviceBindingRef $inst.ServiceBindings $slot.Name}}{{serviceBindingRef $inst.ServiceBindings $slot.Name}}{{else}}-{{end}}</strong>
        </div>
        {{end}}
        {{range $slot := $template.Slots.Outputs}}
        <div class="detail-item">
          <span>{{$slot.Description}} RTSP 端口</span>
          <strong class="mono">{{if outputBindingValue $inst.OutputBindings $slot.Name "publish_rtsp_port"}}{{outputBindingValue $inst.OutputBindings $slot.Name "publish_rtsp_port"}}{{else}}-{{end}}</strong>
        </div>
        {{end}}
      </div>
      {{end}}
    </section>
    {{end}}
  </div>
  {{end}}
{{if .AssetProfileEditing}}
</form>
{{end}}

<details class="card collapsible">
  <summary class="title-with-icon">{{icon "tech"}}<span>原始 JSON</span></summary>
  <pre>{{json .AssetProfileEditor.Raw}}</pre>
</details>
{{end}}
{{if .Error}}<div class="error">{{.Error}}</div>{{end}}
{{end}}