{{template "head.tmpl" .}}
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">编辑流</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">首页</a></li>
          <li class="breadcrumb-item active">编辑流</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</div>
<input type="hidden" value="{{.uuid}}" id="uuid" />
{{ $stream:= (index .streams .uuid)}}
{{ $mainChannel := (index $stream.Channels "0") }}
  <section class="content">
    <div class="container-fluid">
      <div class="row" id="streams-form-wrapper">
        <div class="col-md-12">
          <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">参数<small> 主要</small></h3>
            </div>
            <form class="stream-form main-form">
              <div class="card-body">
                <div class="form-group">
                  <label for="exampleInputEmail1">流名称</label>
                  <input type="text" class="form-control" name="stream-name" placeholder="输入流名称" value="{{$stream.Name}}" id="stream-name">
                  <small  class="form-text text-muted">您可以为流选择任何名称，例如"我的房间"或"客厅"</small>
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">流地址</label>
                  <input type="text" name="stream-url" class="form-control"  placeholder="输入流地址" value="{{$mainChannel.URL}}">
                  <small  class="form-text text-muted">按照摄像头说明输入rtsp地址。格式如 <code>rtsp://&lt;ip&gt;:&lt;port&gt;/path </code></small>
                </div>
                <div class="form-group">
                  <label for="inputStatus">流类型</label>
                  <select class="form-control custom-select" name="stream-ondemand">
                    <option selected disabled><small>请选择</small></option>
                    <option value="1"
                    {{ if eq $mainChannel.OnDemand true}}
                      selected
                    {{ end }}>按需连接</option>
                    <option value="0" {{ if eq $mainChannel.OnDemand false}}
                      selected
                    {{ end }}>持续连接</option>
                  </select>
                  <small  class="form-text text-muted">持续连接时，服务器会持续从摄像头获取数据。按需连接时，服务器只在您点击播放按钮时才从摄像头获取数据 </small>
                </div>
                <div class="form-group">
                  <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" name="debug" id="debug-switch" {{ if eq $mainChannel.Debug true}}
                      checked
                    {{ end }}>
                    <label class="custom-control-label" for="debug-switch">启用调试</label>
                  </div>
                  <small  class="form-text text-muted">如果您想获取更多关于流的数据，请选择此选项 </small>
                </div>
              </div>
            </form>
          </div>
          </div>
          {{ if gt (len $stream.Channels) 1}}
              {{ range $key, $value := $stream.Channels }}
                {{ if ne $key "0"}}
                <div class="col-12">
                  <div class="card card-secondary">
                    <div class="card-header">
                      <h3 class="card-title">子通道<small> 参数</small></h3>
                      <div class="card-tools">
                      <button type="button" class="btn btn-tool" onclick="removeChannelDiv(this)"><i class="fas fa-times"></i></button>
                      </div>
                    </div>
                      <div class="card-body">
                      <form class="stream-form">
                        <div class="form-group">
                          <label for="exampleInputPassword1">子流地址</label>
                          <input type="text" name="stream-url" class="form-control"  placeholder="输入流地址" value="{{$value.URL}}" >
                          <small  class="form-text text-muted">按照摄像头说明输入rtsp地址。格式如 <code>rtsp://&lt;ip&gt;:&lt;port&gt;/path </code> </small>
                        </div>
                        <div class="form-group">

                          <label for="inputStatus">子流类型</label>
                          <select class="form-control custom-select" name="stream-ondemand">
                          <option selected disabled><small>请选择</small></option>
                          <option value="1"
                          {{ if eq $value.OnDemand true}}
                            selected
                          {{ end }}>按需连接</option>
                          <option value="0"
                          {{ if eq $value.OnDemand false}}
                            selected
                          {{ end }}>持续连接</option>
                        </select>
                          <small  class="form-text text-muted">持续连接时，服务器会持续从摄像头获取数据。按需连接时，服务器只在您点击播放按钮时才从摄像头获取数据 </small>
                        </div>
                        <div class="form-group">
                          <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" name="debug" id="substream-debug-switch-{{$key}}" {{ if eq $value.Debug true}}
                              checked
                            {{ end }}>
                            <label class="custom-control-label" for="substream-debug-switch-{{$key}}">启用调试</label>
                          </div>
                          <small  class="form-text text-muted">如果您想获取更多关于流的数据，请选择此选项 </small>
                        </div>
                          </form>
                      </div>
                  </div>
                  </div>
                {{ end }}
              {{ end }}
          {{ end }}
        </div>
        <div class="row  mb-3">
            <div class="col-12">
              <button type="button" onclick="addChannel()" class="btn btn-secondary">添加通道</button>
              <button type="button" onclick="editStreamSubmit()" class="btn btn-primary">保存流</button>
            </div>
        </div>

    </div>
  </section>

{{template "foot.tmpl" .}}

<script>

function editStreamSubmit(){
  var params = {
    uuid:$('#uuid').val(),
    name:$('#stream-name').val(),
    channels:{}
  }

  $('.stream-form').each(function(i){
    params.channels[i]={
        url:$(this).find('input[name="stream-url"]').val(),
        on_demand:Boolean(parseInt($(this).find('select[name="stream-ondemand"]').val())),
        debug:Boolean($(this).find('input[name="debug"]').prop('checked')),
    }
    if(params.channels[i].on_demand==null){
      params.channels[i].on_demand==true;
    }
  });
  goRequest('edit', params.uuid, params);
}
</script>