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

{% load static %} 

{% block title %} Dashboard Advertisers {% endblock %}


{% block extra_css %}
<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>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> Dashboard {{ data.brand.name }} </h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Advertiser</a></li>
            <li class="breadcrumb-item active" aria-current="page">view</li>
        </ol>
    </div>
</div>
{% endblock %}

{% block content %}  
  <h3>{{ data.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 id="data-table321" class="table table-bordered text-nowrap mb-0">
    <thead class="border-top">
      <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> 
    </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> 
{% endblock content %}
 

{% block extra_js %}
<script>
  if (Hls.isSupported()) {
    var video = document.getElementById('video123');
    var hls = new Hls(); 
    hls.loadSource(video.src); // GC GET VIDEO SRC
    hls.attachMedia(video); 
  }  
</script>
{% endblock extra_js %}