{% extends 'base.html' %}
{% load humanize %}
{% load static %}

{% block content %}


    <div id="view_playlist">

    <div hx-get="{% url 'update_playlist' playlist.playlist_id 'checkforupdates' %}" hx-trigger="load" hx-swap="outerHTML">

    </div>

    {% if playlist.has_playlist_changed %}

        <div hx-get="{% url 'update_playlist' playlist.playlist_id 'auto' %}" hx-trigger="load" hx-swap="outerHTML">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ playlist.playlist_changed_text|linebreaksbr|default:"Looks like the playlist on YouTube was modified!" }}

                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div class="d-flex justify-content-center mt-4 mb-3" id="loading-sign">
                <img src="{% static 'svg-loaders/circles.svg' %}" width="40" height="40">
                <h5 class="mt-2 ms-2">Updating playlist '{{ playlist.name }}', please wait!</h5>
            </div>
        </div>
    {% else %}
    <br>

    <div class="list-group-item list-group-item-action active">
        <div class="d-flex w-100 justify-content-between">
            <span>
                <h2 class="mb-1">{{ playlist.name }}
                    <small>

                        <input class="form-control me-1 visually-hidden" id="pl-{{ playlist.playlist_id }}" value="{{ playlist.playlist_id }}">
                        <button class="copy-btn btn  btn-light mb-1" data-clipboard-target="#pl-{{ playlist.playlist_id }}">
                            <i class="far fa-copy" aria-hidden="true"></i>
                        </button>
                    </small> </h2>
                <h6>by {{ playlist.channel_name }}</h6>
            </span>
            <h4>
                <span id="notice-div">
                    {% if playlist.marked_as != "none" %}
                    <span class="badge bg-success text-white" >{{ playlist.marked_as|title }}</span>
                    {% endif %}
                </span>
            </h4>
        </div>
        <p class="mb-1">
            {% if playlist.description %}
            <h5>{{ playlist.description|truncatewords:"50" }}</h5>
            {% else %}
            <h5>No description</h5>
            {% endif %}
        </p>
        <h6 class="">
            <span class="badge bg-light text-black-50">{% if playlist.is_user_owned %}OWNED{% else %}IMPORTED{% endif %}</span>

            <span class="badge bg-light text-black-50">{{ playlist.video_count }} VIDEOS</span>
            <span class="badge bg-light text-black-50">{{ playlist.playlist_duration }} </span>
            <span class="badge bg-light text-black-50">{% if playlist.is_private_on_yt %}PRIVATE{% else %}PUBLIC{% endif %}</span>
            {% if playlist.has_unavailable_videos %}
                    <span class="badge bg-light text-black-50">SOME VIDEOS ARE UNAVAILABLE</span>
            {% endif %}
            {% if playlist.has_duplicate_videos %}
                    <span class="badge bg-light text-black-50">DUPLICATE VIDEOS</span>
            {% endif %}
        </h6>
    </div>

    <br>

    <div id="row1">
    <div class="d-flex bd-highlight mb-1">
        <div class="me-auto bd-highlight">
            <div class="btn-toolbar mb-2 mb-md-0">
                <!--
                <div class="btn-group me-2">
                    <button type="button" class="btn {% if playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">Grid</button>
                    <button type="button" class="btn {% if not playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">List</button>
                </div>
                -->
                <div class="btn-group me-2">
                    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                        Sort By
                    </button>
                    <ul class="dropdown-menu">
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'all' %}" hx-trigger="click" hx-target="#videos-div">All</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'favorites' %}" hx-trigger="click" hx-target="#videos-div">Favorites</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'popularity' %}" hx-trigger="click" hx-target="#videos-div">Popularity</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'date-published' %}" hx-trigger="click" hx-target="#videos-div">Date Published</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'views' %}" hx-trigger="click" hx-target="#videos-div">Views</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'has-cc' %}" hx-trigger="click" hx-target="#videos-div">Has CC</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'duration' %}" hx-trigger="click" hx-target="#videos-div">Duration</button></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'new-updates' %}" hx-trigger="click" hx-target="#videos-div">Updates</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'unavailable-videos' %}" hx-trigger="click" hx-target="#videos-div">Unavailable</button></li>

                    </ul>
                </div>


                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            Mark As
                        </button>
                        <ul class="dropdown-menu">
                            <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'none' %}" hx-trigger="click" hx-target="#notice-div">None</button></li>
                            <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'watching' %}" hx-trigger="click" hx-target="#notice-div">Watching</button></li>
                            <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'plan-to-watch' %}" hx-trigger="click" hx-target="#notice-div">Plan to Watch</button></li>
                        </ul>
                    </div>
            </div>
        </div>

        <div class="bd-highlight">
            <div class="btn-toolbar mb-2 mb-md-0">

                    <div class="btn-group me-2">
                        <a hx-get="{% url 'update_playlist' playlist.playlist_id 'manual' %}" hx-target="#view_playlist" class="btn btn-secondary">
                            <i class="fas fa-sync"></i>
                        </a>
                    </div>

                    <div class="btn-group me-2">

                        <button class="btn btn-warning" type="button" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'favorite' %}" hx-target="#playlist-fav">
                            <div id="playlist-fav">
                                {% if playlist.is_favorite %}
                                    <i class="fas fa-star"></i>
                                {% else %}
                                    <i class="far fa-star"></i>
                                {% endif %}
                            </div>
                        </button>
                    </div>


                    <div class="btn-group me-2">
                        <a href="{% url 'view_playlist_settings' playlist.playlist_id %}" class="btn btn-primary">
                            <i class="fas fa-cog"></i>
                        </a>
                    </div>


                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-light" onclick="row1_hide()">Manage</button>
                    </div>
            </div>
        </div>
    </div>
</div>
    <div id="row2" style="display: none">
        <div class="d-flex bd-highlight mb-1">
            <div class="me-auto bd-highlight">
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div id="select-all-btn">
                        <div class="btn-group me-2">
                        <button type="button" class="btn btn-info" id="select-all-btn">Select All</button>
                    </div>
                    </div>
                    <div id="deselect-all-btn" style="display: none">
                        <div class="btn-group me-2">
                        <button type="button" class="btn btn-info" id="select-all-btn">De-select All</button>
                        </div>
                    </div>

                    <div class="btn-group me-2">
                        <!-- <button type="submit" form="my-form" class="btn btn-outline-success" data-bs-toggle="dropdown" aria-expanded="false">
                            Move
                        </button> -->
                           <button class="btn btn-success" id="move-copy-vids-btn" type="button" data-bs-toggle="collapse" data-bs-target="#moveItemsToCollapse" aria-expanded="false" aria-controls="moveItemsToCollapse">
                               {% if playlist.is_user_owned %}Move/{% endif %}Copy Videos
                           </button>
                    </div>


                    <!--
                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-outline-warning" data-bs-toggle="dropdown" aria-expanded="false">
                            Mark/Unmark Favorite
                        </button>
                    </div>
                    -->
                    {% if playlist.is_user_owned %}
                    <div class="btn-group me-2">
                        <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-include="[id='video-checkboxes']" hx-target="#delete-videos-confirm-box" type="button" id="delete-vids-btn" class="btn btn-danger" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
                            Delete Selected Videos
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>



            <div class="bd-highlight">
            <div class="btn-toolbar mb-2 mb-md-0">

                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-light" onclick="row1_show()" id="manageBtn">Manage</button>
                    </div>

                </div>
        </div>

        </div>
    </div>
    <div id="row3" style="background-color: #0f5132">
    <div class="collapse border-danger" id="moveItemsToCollapse">
    <div class="card card-body bg-dark text-white-50">

      <h5>{% if playlist.is_user_owned %}Move or {% endif %}Copy videos to another playlist!</h5>

      <div class="d-flex justify-content-start">
          <input class="form-control w-50 bg-dark text-white border border-secondary" placeholder="Enter playlist ID or comma seperated list of playlist IDs here">
          {% if playlist.is_user_owned %}
          <div class="btn-group ms-2">
            <button type="button" class="btn btn-info" id="select-all-btn">Move!</button>
          </div>
          {% endif %}
          <div class="btn-group ms-2">
            <button type="button" class="btn btn-info" id="select-all-btn">Copy!</button>
          </div>

      </div>

      <div class="d-flex justify-content-start mt-3">
          <div class="btn-group">
              <a href="{% url 'all_playlists' 'all' %}" target="_blank" class="btn btn-sm btn-success" id="select-all-btn">Search for Playlists <i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
          </div>
      </div>

    </div>
    </div>
    </div>
    <div id="row4" style="background-color: #0f5132">
          <div class="collapse border-danger" id="deleteItemsCollapse">
              <div class="card card-body bg-dark text-white-50">

                  <div id="delete-videos-confirm-box">
                  <h5>Are you sure you want to delete these 40 items from your YouTube playlist? This cannot be undone.</h5>
                </div>
                  <div class="d-flex justify-content-start">
                      <div class="btn-group ms-2">
                        <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirmed' %}" hx-include="[id='video-checkboxes']" type="button" class="btn btn-danger" id="select-all-btn">Yes!</button>
                      </div>
                      <div class="btn-group ms-2">
                        <button type="button" class="btn btn-secondary" id="select-all-btn">Nvm</button>
                      </div>
                      <div class="btn-group ms-2">
                        <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-include="[id='video-checkboxes']" hx-target="#delete-videos-confirm-box" type="button" class="btn btn-primary">
                            <i class="fas fa-sync"></i>
                        </button>
                    </div>
                  </div>

              </div>
            </div>
        </div>



    <div class="table-responsive" id="videos-div">
        <br>
        <div class="list-group" id="video-checkboxes">
          {% for video in videos %}

            <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent" style="background-color: #40B3A2">

        {% if video.is_unavailable_on_yt and not video.was_deleted_on_yt %}

            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ video.playlist_item_id }}" name="video-id">
                </div>
                  <div class="ms-4" style="max-width: 115px; max-height: 100px;">
                      <img src="https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg" class="img-fluid" alt="">
                  </div>
                    <div class="ms-4">
                        <a class="link-dark" href="https://www.youtube.com/watch?v={{ video.video_id }}&list={{ video.playlist.playlist_id }}" target="_blank">
                            {{ video.video_position }}. {{ video.name }}
                        </a>
                        <br><br>
                    </div>
            </div>
          {% else %}

            <div class="d-flex justify-content-between align-items-center" >
                <div>
                    <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ video.playlist_item_id }}" name="video-id">
                </div>
                  <div class="ms-4" style="max-width: 115px; max-height: 100px;">


                      <img src="{% if video.thumbnail_url %}{{ video.thumbnail_url }}{% else %}https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg{% endif %}" class="img-fluid" alt="">
                   </div>
                    <div class="ms-4">

                        {% if video.is_unavailable_on_yt and video.was_deleted_on_yt %}
                            {{ video.video_position }}.
                            <a class="link-dark" href="https://www.youtube.com/watch?v={{ video.video_id }}&list={{ video.playlist.playlist_id }}" target="_blank">
                                {{ video.name|truncatewords:"16" }}
                            </a>
                            <br>
                            <span class="badge bg-dark">VIDEO UNAVAILABLE</span>
                            {% if video.video_details_modified %}<span class="badge bg-danger">UPDATED - {% if video.was_deleted_on_yt %}WENT PRIVATE/DELETED{% else %}NEWLY ADDED{% endif %}</span>{% endif %}
                            <br><br>
                        {% else %}
                            {{ video.video_position }}.
                            <a class="link-dark" href="https://www.youtube.com/watch?v={{ video.video_id }}&list={{ video.playlist.playlist_id }}" target="_blank">
                                {{ video.name|truncatewords:"16" }}
                            </a> by {{ video.channel_name }} <br>
                            <span class="badge bg-secondary">{{ video.duration }}</span>
                            {% if video.has_cc %}<span class="badge bg-secondary">CC</span>{% endif %}
                            {% if video.published_at %}<span class="badge bg-secondary">{{ video.published_at }}</span>{% endif %}
                          {% if video.view_count %}<span class="badge bg-info">{{ video.view_count|intword|intcomma }} views</span>{% endif %}

                            {% if video.is_duplicate %}<span class="badge bg-primary">duplicate</span>{% endif %}
                            {% if video.video_details_modified %}<span class="badge bg-danger">UPDATED - {% if video.was_deleted_on_yt %}WENT PRIVATE/DELETED{% else %}NEWLY ADDED{% endif %}</span>{% endif %}<br>
                            <br>
                        {% endif %}


                    </div>
            </div>
            <div class="ms-5">
                {% if video.is_unavailable_on_yt and video.was_deleted_on_yt %}
                <button class="btn btn-sm  btn-warning mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasForVideoNotes" aria-controls="offcanvasBottom" hx-get="{% url 'video_notes' playlist.playlist_id video.video_id %}" hx-trigger="click" hx-target="#video-notes">Notes</button>
                <button class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist.playlist_id video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
                    <div id="video-{{ forloop.counter }}-fav">
                        {% if video.is_favorite %}
                            <i class="fas fa-heart"></i>
                        {% else %}
                            <i class="far fa-heart"></i>
                        {% endif %}
                    </div>
                </button>
                {% else %}

                <a class="btn btn-sm btn-info mb-1" type="button" href="https://www.youtube.com/watch?v={{ video.video_id }}" class="btn btn-info me-1" target="_blank"><i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
                <input class="form-control me-1 visually-hidden" id="video-{{ video.video_id }}" value="https://www.youtube.com/watch?v={{ video.video_id }}">
                <button class="copy-btn btn btn-sm  btn-success mb-1" data-clipboard-target="#video-{{ video.video_id }}">
                    <i class="far fa-copy" aria-hidden="true"></i>
                </button>
                <button class="btn btn-sm  btn-primary mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasBottom" hx-get="{% url 'video_details' playlist.playlist_id video.video_id %}" hx-trigger="click" hx-target="#video-details"><i class="fas fa-info"></i></button>
                <button class="btn btn-sm  btn-warning mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasForVideoNotes" aria-controls="offcanvasBottom" hx-get="{% url 'video_notes' playlist.playlist_id video.video_id %}" hx-trigger="click" hx-target="#video-notes">Notes</button>
                <button class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist.playlist_id video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
                    <div id="video-{{ forloop.counter }}-fav">
                        {% if video.is_favorite %}
                            <i class="fas fa-heart"></i>
                        {% else %}
                            <i class="far fa-heart"></i>
                        {% endif %}
                    </div>
                </button>
                    {% if playlist.marked_as == "watching" %}
                                        <button class="btn btn-sm btn-light mb-1" type="button">

                        <i class="far fa-check-circle"></i>
                                        </button>

                    {% endif %}
                {% endif %}
            </div>
          {% endif %}

            </li>

        {% endfor %}

        </div>
    </div>
    {% endif %}


    </div>


    <!--
      <script src="{% static 'youtube-audio-player/iframe-api.js' %}"></script>
  <script src="{% static 'youtube-audio-player/yt.min.js' %}"></script>
        -->
{% endblock %}