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

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

        <div class="page-header">
            <div>
                <h1 class="page-title">Duplicate Playlist</h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Playlists</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Duplicate Playlists</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="Day.." 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="Version.." 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">Day</th>
                            <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Version</th>

                            <th style="width:20%;"  class="bg-transparent border-bottom-0 text-cente">Action</th>


                        </tr>

          <tr>
          </table>


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

            </thead>
            <tbody>
                {% for n in playlists %}
                <tr class="border-bottom">
                    <form action="{% url 'duplicate_playlist' id_playlist=n.id_playlist %}" method="post">
                        {% csrf_token %}
                    <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ n.id_channel.channel_name }}</td>
                    <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ n.id_zone_channel.region }}</td>
                    <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ n.broadcastdate }}</td>
                    <td style="width:20%;" class="text-muted fs-15 fw-semibold text-center"> {{ n.version }}</td>

                    <td class="text-muted fs-15 fw-semibold text-center">
                        <button type="submit" name="edit_btn" value="Duplicate" class="btn btn-primary btn-sm rounded-11 me-2" data-bs-toggle="tooltip" data-bs-original-title="Edit"><i><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
                        </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 table = document.getElementById("table");

      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 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;
          if (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 %}