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

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

    <div class="page-header">
        <div>
            <h1 class="page-title">Delete  Channel</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">TV Channels </a></li>
                <li class="breadcrumb-item active" aria-current="page">Delete Channel </li>
            </ol>
        </div>


    </div>

    
<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="Region.." 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="language." 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="genre.." 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="ftp.." class="table-search-filters form-control">
    </th>
    <th style="width:20%;" class="bg-transparent border-bottom-0 text-cente">
      &nbsp;&nbsp;&nbsp;&nbsp;
  
    </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">Language</th>
                    <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Genre</th>
                    <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">FTP</th>
  
                    <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Delete</th>
  
  
                </tr>
  
  <tr>
  </table>
  

  <table id="data-table321" class="table table-bordered text-nowrap mb-0">
    <thead class="border-top">

    </thead>
    <tbody>
        {% for channel in channels %}
        <tr class="border-bottom">
            <form action="{% url 'delete_channel' id_channel=channel.id_channel %}" method="post">
                {% csrf_token %}
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ channel.channel_name }}</td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ channel.zonename }}</td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ channel.channel_lang }}</td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ channel.channel_genre }}</td>
            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ channel.ftp_channel_name }}</td>

            <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center">
                <button type="submit" name="edit_btn" value="delete" class="btn btn-danger btn-sm rounded-11 me-2" data-bs-toggle="tooltip" data-bs-original-title="Delete"><i><svg class="table-delete" xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="16"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z"/></svg></i></button>
            </td>
        </form>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
</div>

<script type="text/javascript">
var input_channel = document.getElementById("channel-search");
var input_region = document.getElementById("region-search");
var input_day = document.getElementById("day-search");
var input_version = document.getElementById("version-search");
var input_ftp = document.getElementById("ftp-search");
var table = document.getElementById("data-table321");

function search() {
let filter_channel = input_channel.value.toUpperCase();
let filter_region = input_region.value.toUpperCase();
let filter_day = input_day.value.toUpperCase();
let filter_version = input_version.value.toUpperCase();
let filter_ftp = input_ftp.value.toUpperCase();

let tr = table.rows;
for (let i = 0; i < tr.length; i++) {
  td = tr[i].cells;
  td_channel = td[0].innerText;
  td_region = td[1].innerText;
  td_day = td[2].innerText;
  td_version = td[3].innerText;
  td_ftp = td[4].innerText;
  if (td_ftp.toUpperCase().indexOf(filter_ftp) > -1 && td_channel.toUpperCase().indexOf(filter_channel) > -1 && td_region.toUpperCase().indexOf(filter_region) > -1 && td_day.toUpperCase().indexOf(filter_day) > -1  && td_version.toUpperCase().indexOf(filter_version) > -1) {
    tr[i].style.display = "";
  } else
    tr[i].style.display = "none";
}
}

</script>



{% endblock content %}