{{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">Dashboard</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Dashboard</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <h5 class="mt-4 mb-2">Streams ({{ len .streams}})</h5>
      </div>
    </div>

    <div class="row mt-3 ">
      {{ 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="avaliable channels" 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>Channel: {{$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">Previous</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">Next</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}}">Channel {{$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}}">Channel {{$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}}">Channel {{$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}}">Channel {{$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> Edit</a>
                    <a class="btn btn-danger btn-flat btn-xs" onclick="deleteStream('{{ $key }}')" href="#"><i class="fas fa-times"></i> Delete</a>
                </div>
              </div>
            </div>


          </div>

        </div>
      </div>
      {{ end }}
    </div>
  </div><!-- /.container-fluid -->

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


{{template "foot.tmpl" .}}