{{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>
<!-- Main content -->
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
          <h5 class="mt-4 mb-2">视频流 ({{ len .streams}})</h5>
          <div class="mt-4 mb-2">
            <a href="/pages/cameras" class="btn btn-primary btn-sm">
              <i class="fas fa-camera"></i> 摄像头管理
            </a>
            <a href="/pages/stream/add" class="btn btn-success btn-sm">
              <i class="fas fa-plus"></i> 添加流
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="row mt-3" id="loading-indicator">
      <div class="col-12">
        <div class="text-center">
          <i class="fas fa-spinner fa-spin"></i> 正在加载摄像头列表...
        </div>
      </div>
    </div>

    <!-- 摄像头列表容器 -->
    <div class="row mt-3" id="camera-list-container" style="display: none;">
      <!-- 动态生成的摄像头卡片将插入这里 -->
    </div>

    <!-- 流列表容器（降级方案） -->
    <div class="row mt-3" id="stream-list-container" style="display: none;">
      {{ range $key, $value := .streams }}
      <div class="col-12 col-sm-6 col-md-3" id="{{ $key }}">
        <div class="card card-outline card-success">
          <div class="card-header">
            <h3 class="card-title one-line-header">{{.Name}}</h3>
            <div class="card-tools">
              <span data-toggle="tooltip" title="可用通道" class="badge badge-success">{{len .Channels }}</span>
            </div>
          </div>
          <div class="card-body p-0">
            <div id="carousel_{{$key}}" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                {{ range $k, $v := .Channels }}
                <li data-target="#carousel_{{$key}}" data-slide-to="{{$k}}" class="{{ if eq $k "0"}} active {{end}}"></li>
                {{end}}
              </ol>
              <div class="carousel-inner">
                {{ range $k, $v := .Channels }}
                <div class="carousel-item {{ if eq $k "0"}} active {{end}}">
                  <img class="d-block w-100 stream-img fix-height" channel="{{$k}}" src="/../static/img/noimage.svg">
                  <div class="carousel-caption d-none d-md-block">
                    <h5>通道: {{$k}}</h5>
                  </div>
                </div>
                {{end}}
              </div>
              <a class="carousel-control-prev" href="#carousel_{{$key}}" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">上一个</span>
              </a>
              <a class="carousel-control-next" href="#carousel_{{$key}}" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">下一个</span>
              </a>
            </div>
            <div class="row">
              <div class="col-12">
                <div class="btn-group stream">
                  {{ if gt (len .Channels) 1}}
                  <div class="input-group-prepend">
                    <a class="btn btn-info btn-flat btn-xs" data-toggle="dropdown" href="#"><i class="fas fa-play"></i> MSE</a>
                    <div class="dropdown-menu">
                      {{ range $k, $v := .Channels }}
                      <a class="dropdown-item" href="/pages/player/mse/{{$key}}/{{$k}}">通道 {{$k}}</a>
                      {{end}}
                    </div>
                  </div>
                  <div class="input-group-prepend">
                    <a class="btn btn-info btn-flat btn-xs" data-toggle="dropdown" href="#"><i class="fas fa-play"></i> HLS</a>
                    <div class="dropdown-menu">
                      {{ range $k, $v := .Channels }}
                      <a class="dropdown-item" href="/pages/player/hls/{{$key}}/{{$k}}">通道 {{$k}}</a>
                      {{end}}
                    </div>
                  </div>
                  <div class="input-group-prepend">
                    <a class="btn btn-info btn-flat btn-xs" data-toggle="dropdown" href="#"><i class="fas fa-play"></i> WebRTC</a>
                    <div class="dropdown-menu">
                      {{ range $k, $v := .Channels }}
                      <a class="dropdown-item" href="/pages/player/webrtc/{{$key}}/{{$k}}">通道 {{$k}}</a>
                      {{end}}
                    </div>
                  </div>
                  <div class="input-group-prepend">
                    <a class="btn btn-info btn-flat btn-xs" data-toggle="dropdown" href="#"><i class="fas fa-play"></i> ALL</a>
                    <div class="dropdown-menu">
                      {{ range $k, $v := .Channels }}
                      <a class="dropdown-item" href="/pages/player/all/{{$key}}/{{$k}}">通道 {{$k}}</a>
                      {{end}}
                    </div>
                  </div>
                  {{else}}
                    <a class="btn btn-info btn-flat btn-xs" href="/pages/player/mse/{{$key}}/0"><i class="fas fa-play"></i> MSE</a>
                    <a class="btn btn-info btn-flat btn-xs" href="/pages/player/hls/{{$key}}/0"><i class="fas fa-play"></i> HLS</a>
                    <a class="btn btn-info btn-flat btn-xs" href="/pages/player/webrtc/{{$key}}/0"><i class="fas fa-play"></i> WebRTC</a>
                    <a class="btn btn-info btn-flat btn-xs" href="/pages/player/all/{{$key}}/0"><i class="fas fa-play"></i> ALL</a>
                    {{end}}
                    <a class="btn btn-secondary btn-flat btn-xs" href="/pages/stream/edit/{{$key}}"><i class="fas fa-edit"></i> 编辑</a>
                    <a class="btn btn-danger btn-flat btn-xs" onclick="deleteStream('{{ $key }}')" href="#"><i class="fas fa-times"></i> 删除</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div><!-- /.container-fluid -->

</div>
<!-- /.content -->


<!-- 引入摄像头管理器 -->
<script src="/../static/js/camera-manager.js"></script>

{{template "foot.tmpl" .}}