{% extends "DAIManagementApp/base.html" %}

{% block content %}


{% load static %}

<div class="app-content">
    <div class="side-app">

      <!-- <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
      <script src="https://unpkg.com/video.js/dist/video.js"></script>
      <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>



      <video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto"
    data-setup='{}'>
      <source src="/static/adspots/user_1/ch_1/ch_1__MT_Cash3ts__20sec__2021-09-07_15-18-56533432.m3u8" type="application/x-mpegURL">
    </video>



    <script>
    var player = videojs('my_video_1');
    player.play();
    </script> -->


  <!-- <script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script> -->


<script src="https://cdn.jsdelivr.net/npm/afterglowplayer@1/dist/afterglow.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>


<!--  
<video class="afterglow" id="video123" width="400" height="225" controls src="http://207.180.254.4:9070/static/adspots/user_1/ch_1/ch_1__MT_Cash3ts__20sec__2021-09-07_15-18-56533432.m3u8"></video>
-->
<!-- <video class="afterglow" id="livevideo" width="400" height="225" controls src="/static/adspots/user_1/ch_1/ch_1__MT_Cash3ts__20sec__2021-09-07_15-18-56533432.m3u8"></video> -->
<!-- <video class="afterglow" id="livevideo" width="400" height="225" controls src="https://cdnamd-hls-globecast.akamaized.net/live/ramdisk/2m_monde/hls_video_ts/2m_monde.m3u8"></video> -->


<script>
  if (Hls.isSupported()) {
    var video = document.getElementById('video123');
    var hls = new Hls();
    // hls.loadSource('/static/adspots/user_1/ch_1/ch_1__MT_Cash3.ts__20sec__2021-09-07_15-18-56.533432.m3u8');
    hls.loadSource(video.src); // GC GET VIDEO SRC
    hls.attachMedia(video);

  }

  // if (Hls.isSupported()) {
  //   var video2 = document.getElementById('livevideo');
  //   var hls = new Hls();
  //   //hls.loadSource('//video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
  //   hls.loadSource(video2.src); // GC GET VIDEO SRC
  //   hls.attachMedia(video2);
  //   hls.on(Hls.Events.MANIFEST_PARSED, function() {
  //     //video2.play();
  //   });
  // }

</script>
        <!-- PAGE-HEADER -->
        <div class="page-header">
            <div>
                <h1 class="page-title">Dashboard  {{ adspots.id_brand.brand_name }}  </h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Advertiser </a></li>
                    <li class="breadcrumb-item active" aria-current="page">view advertiser</li>
                </ol>
            </div>

        </div>
            <h3>{{ data.brand.brand_name }}</h3>

        <p>
          <label style="width:90px; !important"><b >Category:</b></label> {{ data.brand.category }} <br>
          <label style="width:90px; !important"><b >Status:</b></label> {{ data.brand.status }} <br>
          <label style="width:90px; !important"><b >Description:</b></label> {{ data.brand.description }} <br>

        </p>

        <br>
        <table class="table table-bordered text-nowrap mb-0">
          <tr>
            <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
              <input type="text" id="channel-search" onkeyup="search()" placeholder="Channel.." class="table-search-filters form-control">
            </th>
            <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
              <input type="text" id="region-search" onkeyup="search()" placeholder="Name.." class="table-search-filters form-control">
          </th>
          <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
              <input type="text" id="day-search" onkeyup="search()" placeholder="File." class="table-search-filters form-control">
          </th>
          <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
              <input type="text" id="version-search" onkeyup="search()" placeholder="Duration.." class="table-search-filters form-control">
          </th>
          <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
              <input type="text" id="ftp-search" onkeyup="search()" placeholder="Status.." class="table-search-filters form-control">
          </th>
          
          </tr>
      
          <tr>
      
                          <th style="width:20%;"   class="bg-transparent border-bottom-0 text-cente">Channel</th>
                          <!-- <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Region</th> -->
                          <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Name</th>
                          <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">File</th>
                          <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Duration</th>
                          <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Status</th>
      
                          
      
      
                      </tr>
      
        <tr>
        </table>
      
      
        <table id="data-table321" class="table table-bordered text-nowrap mb-0">
          <thead class="border-top">
      
          </thead>
          <tbody>
              {% for adspot in data.adspots %}
              <tr class="border-bottom">
                  
                      
                  <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ adspot.id_channel.channel_name }}</td>
                  <!-- <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ n.zonename }}</td> -->
                  <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ adspot.adspot_name }}</td>
                  <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"><a href="/static/{{adspot.original_filepath}}"> Download Video </a></td>
                  <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{adspot.duration }}</td>
                  <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> 
                    {% if adspot.status == "1" %} 
                      Active
                    {% else %}
                      InActive 
                    {% endif %}</td>
      
                  
              
              </tr>
              {% endfor %}
          </tbody>
      </table>

      </div>
        </div>

{% endblock content %}