UnTube/apps/main/templates/view_playlist.html

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

{% block content %}

    <script src="{% static 'htmx/extensions/class-tools.js' %}" type="application/javascript"></script>

    <div id="view_playlist">
        {% if not_imported_LL %}
            <div hx-get="/import/liked-videos-playlist" hx-trigger="load" hx-swap="outerHTML">
            <div class="alert alert-dismissible fade show" role="alert" style="background-color: cadetblue">
                <div class="d-flex justify-content-center flex-column mt-4 mb-3 ms-2" id="loading-sign" >
                    <div class="d-flex justify-content-center">
                    <img src="/static/svg-loaders/spinning-circles.svg" width="40" height="40">
                    <h5 class="mt-2 ms-2 text-black">Importing your Liked Videos playlist into UnTube, do not refresh this page!
                        </h5>
                    </div>
                    <div class="d-flex justify-content-center mt-1">
                        <h6>(this might take a while if you have more than 700 liked videos!)</h6>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        {% if playlist.has_playlist_changed %}
            <div hx-get="{% url 'update_playlist' playlist.playlist_id 'auto' %}" hx-trigger="load" hx-swap="outerHTML">
                <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" style="filter: invert(0%) sepia(18%) saturate(7468%) hue-rotate(241deg) brightness(84%) contrast(101%);">
                    <h5 class="mt-2 ms-2">Refreshing playlist '{{ playlist.name }}', please wait!</h5>
                </div>
            </div>
        {% else %}
            <div class="sticky-top mb-3" style="top: 0.5rem;">
                {% if not playlist.is_yt_mix %}
                    <div hx-get="{% url 'update_playlist' playlist.playlist_id 'checkforupdates' %}" hx-trigger="load" hx-swap="outerHTML" id="checkforupdates">
                        <div class="alert alert-info alert-dismissible fade show" role="alert">
                            Checking playlist for updates...
                        </div>
                    </div>
                {% endif %}
                {% if playlist.marked_as == "watching" %}
                    <div id="playlist-watch-message">
                        {% include 'intercooler/playlist_watch_message.html' %}
                    </div>
                {% endif %}
            </div>

            <div class="card text-white" style="max-width: 100%; background-color: #1A4464;">
                <div class="row g-0">
                    <div class="col-md-4 p-3">
                        <img  class="img-fluid rounded-3" src="{{ playlist_items.0.video.thumbnail_url }}" style="max-width:100%; height: auto;   object-fit: cover;">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <h2 class="card-title text-white">
                                    <a href="https://www.youtube.com/playlist?list={{ playlist.playlist_id }}" target="_blank" style="color: white; text-decoration: none">{{ playlist.name }}</a>
                                    <br><small class="h4">{% if playlist.user_label %}a.k.a <span style="border-bottom: 3px #ffffff dashed;"> {{ playlist.user_label }}</span>{% endif %}</small>
                                </h2>
                                <h4>
                                    <span id="notice-div">
                                        {% if playlist.marked_as != "none" %}
                                            <span class="badge bg-success text-white" >
                                                {% if playlist.marked_as == "watching" %}
                                                    <i class="fas fa-fire-alt me-1"></i>
                                                {% elif playlist.marked_as == "plan-to-watch"%}
                                                    <i class="fas fa-flag me-1"></i>
                                                {% endif %}
                                                {{ playlist.marked_as }}
                                            </span>
                                        {% endif %}
                                    </span>
                                    <span id="">
                                        <!--
                                        <span class="badge bg-dark">
                                            <i class="fas fa-map-pin"></i>
                                        </span>
                                        -->
                                    </span>
                                </h4>
                            </div>
                            <h6>by {{ playlist.channel_name }}</h6>
                            <p class="card-text">
                                {% if playlist.description %}
                                    <h5 class="overflow-auto" style="max-height: 350px;">
                                        {{ playlist.description|linebreaksbr|urlize  }}
                                    </h5>

                                {% else %}
                                    <h5>No description</h5>
                                {% endif %}
                            </p>


                            <h6 class="h6 text-uppercase overflow-auto">
                                <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>
                                <a data-bs-toggle="collapse" href="#playlistDurationCollapse" role="button" aria-expanded="false" aria-controls="playlistDurationCollapse">
                                        <span class="badge bg-light text-black-50">{{ playlist.playlist_duration }}</span>
                                    </a>
                                <div class="collapse" id="playlistDurationCollapse">
                                    <div class="card card-body bg-transparent text-white text-capitalize border border-3 mt-2 mb-2 border-light">
                                        <div hx-get="{% url 'playlist_completion_times' playlist.playlist_id %}"
                                hx-trigger="revealed"
                                hx-swap="outerHTML">

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

                                <span class="badge bg-light text-black-50">{% if playlist.is_private_on_yt %}PRIVATE{% else %}PUBLIC{% endif %}</span>
                                {% if playlist.is_yt_mix %}<span class="badge bg-light text-black-50">YT MIX</span>{% endif %}

                                {% if playlist.has_unavailable_videos %}
                                    <span class="badge bg-light text-black-50">
                                        {% if playlist.get_watchable_videos_count == 0 %}
                                            ALL
                                        {% else %}
                                            {{ playlist.get_unavailable_videos_count }}
                                        {% endif %}
                                        VIDEOS ARE UNAVAILABLE
                                    </span>
                                {% endif %}
                                {% if playlist.has_duplicate_videos %}
                                    <span class="badge bg-light text-black-50">{{ playlist.get_duplicate_videos_count }} DUPLICATE VIDEOS</span>
                                {% endif %}
                              <a data-bs-toggle="collapse" href="#channelVidsChartCollapse" role="button" aria-expanded="false" aria-controls="channelVidsChartCollapse">
                                        <span class="badge bg-light text-black-50">{{ playlist.get_channels_list.0 }} channels</span>
                                    </a>
                                <div class="collapse" id="channelVidsChartCollapse">
                                    <div class="card card-body bg-transparent text-white border border-3 mt-2 border-light">

                                        <canvas id="channel-videos-chart" data-url="{% url 'channel_videos_distribution' playlist.playlist_id %}"></canvas>

                                    </div>

                                </div>

                            </h6>
                            <h6 class="h6 pt-1">

                                Tags:
                                <span class="text-uppercase" >
                                    <span id="playlist-tags">
                                        {% for tag in playlist_tags %}
                                            <span id="tag-{{ tag.name|slugify }}" class="mb-2">
                                                <span class="badge rounded-pill bg-info mb-lg-2">
                                                    <a href="{% url 'tagged_playlists' tag.name %}" style="text-decoration: none; color: #114f7f">{{ tag.name }} </a>
                                                    <a class="ms-1" hx-post="{% url 'remove_playlist_tag' playlist.playlist_id tag.name %}" hx-trigger="click" hx-target="#tag-{{ tag.name|slugify }}"><i class="fas fa-times-circle"></i></a>
                                                </span>
                                            </span>
                                        {% endfor %}
                                    </span>
                                    <a data-bs-toggle="collapse" href="#addTagsCollapse" role="button" aria-expanded="false" aria-controls="addTagsCollapse">
                                        <span class="badge rounded-pill bg-warning mb-lg-2"><i class="fas fa-plus"></i></span>
                                    </a>
                                </span>
                                <div class="collapse" id="addTagsCollapse">
                                    <div class="card card-body bg-dark text-white border border-4 mt-1 border-warning">

                                        <h5>Add a tag to this playlist</h5>

                                        {% if unused_tags %}
                                            <div class="d-flex justify-content-start mt-2">
                                                <select class="form-select w-50 bg-dark text-white border border-secondary" name="playlistTag" hx-get="{% url 'get_unused_playlist_tags' playlist.playlist_id %}" hx-trigger="click" hx-target="#unused-playlist-tags">
                                                    <option selected>Pick from existing unused tags</option>
                                                    <span id="unused-playlist-tags">
                                                        {% for tag in unused_tags %}
                                                            <option value="{{ tag.name }}">{{ tag.name }}</option>
                                                        {% endfor %}
                                                    </span>
                                                </select>
                                                <div class="btn-group ms-2">
                                                    <button type="button" class="btn btn-warning" hx-post="{% url 'add_playlist_tag' playlist.playlist_id %}" hx-trigger="click" hx-include="[name='playlistTag']" hx-target="this">Add Tag</button>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-start mt-3 mb-2">
                                                - OR -
                                            </div>
                                        {% endif %}

                                        <div class="d-flex justify-content-start mt-2">
                                            <input class="form-control w-50 bg-dark text-white border border-secondary" placeholder="Enter a new tag name here" name="createTagField">
                                            <div class="btn-group ms-2">
                                                <button type="button" class="btn btn-warning" hx-post="{% url 'create_playlist_tag' playlist.playlist_id %}" hx-trigger="click" hx-include="[name='createTagField']" hx-target="this">Create & Add Tag</button>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </h6>

                            <p class="card-text text-white-50"><small>Last updated {{ playlist.updated_at|naturalday }}</small> &bullet; <small>{{ playlist.num_of_accesses }} clicks </small></p>
                        </div>
                    </div>
                </div>
            </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 mb-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>

                            {% if playlist_items.count != 0 %}
                                <div class="btn-group me-2 mb-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 mb-2">
                                    {% with channels=playlist.get_channels_list %}
                                    <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                        {{ channels.0 }} Channels
                                    </button>
                                    <ul class="dropdown-menu">
                                        {% for channel in channels.1 %}
                                        <li><a class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'channel' %}" hx-vals='{"channel-name": "{{ channel }}"}' hx-trigger="click" hx-target="#videos-div">{{ channel }}</a></li>
                                        {% endfor %}
                                    </ul>
                                    {% endwith %}
                                </div>
                            {% endif %}

                        </div>
                    </div>

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

                            <div class="btn-group me-2 mb-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>

                            {% if playlist.video_count != 0 %}
                            <div class="btn-group me-2 mb-2">
                                <a href="{% url 'playlist_open_random_video' playlist.playlist_id %}" class="btn btn-danger">
                                    Open a Random Video
                                </a>
                            </div>
                            {% endif %}

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

                                <button class="btn btn-dark" 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" style="color: #fafa06"></i>
                                        {% else %}
                                            <i class="far fa-star"></i>
                                        {% endif %}
                                    </div>
                                </button>
                            </div>


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

                            {% if playlist_items.count != 0 %}
                                <div class="btn-group me-2 mb-2">
                                    <button type="button" class="btn btn-light" onclick="row1_hide()">Manage</button>
                                </div>
                            {% endif %}
                        </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 mb-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 mb-2">
                                    <button type="button" class="btn btn-info" id="select-all-btn">De-select All</button>
                                </div>
                            </div>

                            <div class="btn-group me-2 mb-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 mb-2">
                                    <button class="btn btn-danger" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
                                        Delete 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 mb-2">
                                <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
                                    <i class="fa fa-plus"></i> Add New Videos
                                </button>
                            </div>
                            <div class="btn-group me-2 mb-2">
                                <button class="btn btn-dark" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
                                    <i class="far fa-plus-square"></i> Create a New Playlist
                                </button>
                            </div>
                            <div class="btn-group me-2 mb-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">

                        <h5>{% if playlist.is_user_owned %}Move or {% endif %}Copy videos to other playlist(s)!</h5>

                        <div class="row d-flex justify-content-start">


                            <div class="col-md-6 text-dark">
                                <select class="visually-hidden"
                                    id="playlists-to-move-to" name="playlist-ids" placeholder="Select Playlists" multiple>
                                    {% for pl in user_owned_playlists %}
                                        {% if pl.playlist_id != playlist.playlist_id %}
                                            <option value="{{ pl.playlist_id }}" class="text-dark">{{ pl.name }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md d-flex justify-content-start">

                            <div class="htmx-indicator d-flex align-items-center" id="move-copy-loader">
                                <img src="{% static 'svg-loaders/grid.svg' %}" width="25" height="25" class="ms-2 mt-2">
                                <span class="mt-2 ms-2">Loading, please wait... </span>
                            </div>
                            </div>

                        </div>

                        <div class="d-flex justify-content-start mt-2">
                            {% if playlist.is_user_owned %}
                                <div class="btn-group mt-1">
                                    <button hx-indicator="#move-copy-loader" hx-post="{% url 'playlist_move_copy_videos' playlist.playlist_id 'move' %}" hx-include="#playlists-to-move-to, #video-checkboxes" hx-target="#move-copy-videos-box" type="button" class="btn btn-primary">
                                        Move!
                                    </button>
                                </div>
                            {% endif %}
                            <div class="btn-group ms-1 mt-1">
                                <button hx-indicator="#move-copy-loader" hx-post="{% url 'playlist_move_copy_videos' playlist.playlist_id 'copy' %}" hx-include="#playlists-to-move-to, #video-checkboxes" hx-target="#move-copy-videos-box" type="button" class="btn btn-info">
                                    Copy!
                                </button>
                            </div>
              <div id="move-copy-videos-box" class="d-flex align-items-end ms-2">
                                <span class="text-warning">Note: Move will delete the selected videos from this playlist. Copy won't.</span>
                            </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">
                            {% if not playlist.confirm_before_deleting %}
                                <h5>Note: You have set confirm before deleting to False. Buttons below will take effect immediately when clicked.</h5>
                                <hr>
                            {% else %}
                                {% if playlist.has_unavailable_videos %}
                                    <h5>Note: Clicking on delete unavailable videos button will take immediate effect. All videos labelled unavailable in this playlist will be deleted from your YouTube playlist.</h5>
                                {% endif %}
                                {% if playlist.has_duplicate_videos %}
                                    <h5>Note: Clicking on delete duplicate videos button will take immediate effect. All videos labelled duplicate in this playlist will be deleted from your YouTube playlist.</h5>
                                {% endif %}
                                <hr>
                            {% endif %}

                        </div>
                        <div class="d-flex justify-content-start">
                            <div class="btn-group me-2">
                                <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-include="[id='video-checkboxes']" hx-vals='{"confirm before deleting": "{{ playlist.confirm_before_deleting }}"}' hx-target="#delete-videos-confirm-box" type="button" class="btn btn-primary">
                                    Delete Selected
                                </button>
                            </div>

                            {% if playlist.has_unavailable_videos %}
                                <div class="btn-group me-2">
                                    <button hx-post="{% url 'delete_specific_videos' playlist.playlist_id 'unavailable' %}" hx-target="#delete-videos-confirm-box" type="button" class="btn btn-info" hx-indicator="#delete-loader">
                                        Delete {{ playlist.get_unavailable_videos_count }} Unavailable Videos
                                    </button>
                                </div>
                            {% endif %}
                            {% if playlist.has_duplicate_videos %}
                                <div class="btn-group me-2">
                                    <button hx-post="{% url 'delete_specific_videos' playlist.playlist_id 'duplicate' %}" hx-target="#delete-videos-confirm-box" type="button" class="btn btn-warning" hx-indicator="#delete-loader">
                                        Delete {{ playlist.get_duplicate_videos_count }} Duplicate Videos
                                    </button>
                                </div>
                            {% endif %}
                            <div class="btn-group me-2">
                                <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-vals='{"all": "yes", "confirm before deleting": "{{ playlist.confirm_before_deleting }}"}' hx-target="#delete-videos-confirm-box" type="button" class="btn btn-danger">
                                    Empty this Playlist
                                </button>
                            </div>

                            <div class="htmx-indicator d-flex align-items-center" id="delete-loader">
                                <img src="{% static 'svg-loaders/grid.svg' %}" width="25" height="25" class="ms-2 mt-2">
                                <span class="mt-2 ms-2">Deleting, please wait... </span>
                            </div>
                        </div>

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



            <div class="table-responsive" id="videos-div">

                <br>
                {% if playlist_items %}
                    <div class="list-group" id="video-checkboxes">
                        {% for playlist_item in playlist_items|slice:"0:50" %}

                            <li id="{{ playlist_item.playlist_item_id }}" onclick="selectVideo(this);" {% if forloop.last and playlist_items.count > 50 %}hx-get="{% url 'load_more_videos' playlist.playlist_id order_by|default:"all" page|default:"1" %}"
                                hx-trigger="revealed"
                                hx-swap="afterend" hx-indicator="#load-more-videos-spinner" {% endif %} class="list-group-item d-flex justify-content-between align-items-center bg-transparent videos" style="background-color: #40B3A2">

                                {% if playlist_item.video.is_unavailable_on_yt and not playlist_item.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="{{ playlist_item.playlist_item_id }}" id="video-{{ playlist_item.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="{% url 'video' playlist_item.video.video_id %}">
                                                {{ playlist_item.video_position|add:"1" }}. {{ playlist_item.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="{{ playlist_item.playlist_item_id }}" id="video-{{ playlist_item.playlist_item_id }}" name="video-id">
                                        </div>
                                        <div class="ms-4" style="max-width: 115px; max-height: 100px;">


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

                                            {% if playlist_item.video.is_unavailable_on_yt or playlist_item.video.was_deleted_on_yt %}
                                                {{ playlist_item.video_position|add:"1" }}.
                                                <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
                                                    {{ playlist_item.video.name|truncatewords:"16" }}
                                                </a>
                                                <br>
                                                <span class="badge bg-dark">VIDEO UNAVAILABLE</span>
                                                {% if playlist_item.video.video_details_modified %}<span class="badge bg-danger">WENT PRIVATE/DELETED {{ playlist_item.video.updated_at|naturaltime|upper }}</span>{% endif %}
                                                <br><br>
                                            {% else %}
                                                {{ playlist_item.video_position|add:"1" }}.
                                                <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
                                                    {{ playlist_item.video.name|truncatewords:"16" }}
                                                </a> by {{ playlist_item.video.channel_name }} <br>
                                                <a style="text-decoration: none" hx-get="{% url 'video_completion_times' playlist_item.video.video_id %}" hx-trigger="click once" hx-target="#{{ playlist_item.playlist_item_id }}-completion-times" data-bs-toggle="collapse" href="#{{ playlist_item.playlist_item_id }}DurationCollapse" role="button" aria-expanded="false" aria-controls="{{ playlist_item.playlist_item_id }}DurationCollapse">
                                                        <span class="badge bg-secondary">{{ playlist_item.video.duration }}</span>
                                                    </a>
                                                <div class="collapse" id="{{ playlist_item.playlist_item_id }}DurationCollapse">
                                                    <div class="card card-body bg-dark text-white text-capitalize border border-3 mt-2 mb-2 border-light">
                                                        <div id="{{ playlist_item.playlist_item_id }}-completion-times">

                                                        </div>
                                                    </div>
                                                </div>
                                                {% if playlist_item.video.has_cc %}<span class="badge bg-danger">CC</span>{% endif %}
                                                {% if playlist_item.video.published_at %}<span class="badge bg-secondary">added to playlist on {{ playlist_item.published_at }}</span>{% endif %}
                                                <span class="badge bg-info text-black-50"><i class="fas fa-eye"></i> {% if playlist_item.video.view_count == -1 %}HIDDEN{% else %}{{ playlist_item.video.view_count|intword|intcomma }}{% endif %}</span>
                                                <span class="badge bg-warning text-black-50"><i class="fas fa-thumbs-up"></i> {% if playlist_item.video.like_count == -1 %}HIDDEN{% else %}{{ playlist_item.video.like_count|intword|intcomma }}{% endif %}</span>

                                                {% if playlist_item.is_duplicate %}<span class="badge bg-primary">duplicate</span>{% endif %}
                                                {% if playlist_item.video.playlists.count|add:"-1" != 0 %}
                                                    <span class="badge bg-dark">
                                                        <a href="{% url 'video' playlist_item.video.video_id %}#found-in" style="text-decoration: none; color: white">
                                                            found in {{ playlist_item.video.playlists.count|add:"-1" }} other playlist{% if playlist_item.video.playlists.count|add:"-1" > 1 %}s{% endif %}
                                                        </a></span>
                                                {% endif %}
                                                {% if playlist_item.video.video_details_modified %}<span class="badge bg-danger">{% if playlist_item.video.was_deleted_on_yt %}went private/deleted{% else %}added{% endif %} {{ playlist_item.created_at|naturaltime }}</span>{% endif %}<br>
                                                <br>
                                            {% endif %}


                                        </div>
                                    </div>
                                    <div class="ms-5">
                                        {% if playlist_item.video.is_unavailable_on_yt or playlist_item.video.was_deleted_on_yt %}
                                            <a class="btn btn-sm  btn-primary mb-1" href="{% url 'video' playlist_item.video.video_id %}"><i class="fas fa-info"></i></a>
                                            <button class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
                                                <div id="video-{{ forloop.counter }}-fav">
                                                    {% if playlist_item.video.is_favorite %}
                                                        <i class="fas fa-heart" style="color: #fafa06"></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={{ playlist_item.video.video_id }}&list={{ playlist.playlist_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-{{ playlist_item.video.video_id }}" value="https://www.youtube.com/watch?v={{ playlist_item.video.video_id }}">
                                            <button class="copy-btn btn btn-sm  btn-success mb-1" data-clipboard-target="#video-{{ playlist_item.video.video_id }}">
                                                <i class="far fa-copy" aria-hidden="true"></i>
                                            </button>
                                            <a class="btn btn-sm  btn-primary mb-1" href="{% url 'video' playlist_item.video.video_id %}"><i class="fas fa-info"></i></a>
                                            <button class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
                                                <div id="video-{{ forloop.counter }}-fav">
                                                    {% if playlist_item.video.is_favorite %}
                                                        <i class="fas fa-heart" style="color: #fafa06"></i>
                                                    {% else %}
                                                        <i class="far fa-heart"></i>
                                                    {% endif %}
                                                </div>
                                            </button>
                                            {% if playlist.marked_as == "watching" and not playlist_item.is_duplicate %}
                                                <button class="btn btn-sm btn-light mb-1" type="button" hx-get="{% url 'mark_video_watched' playlist.playlist_id playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-watched">
                                                    <div id="video-{{ forloop.counter }}-watched">
                                                        {% if playlist_item.video.is_marked_as_watched %}
                                                            <i class="fas fa-check-circle"></i>
                                                        {% else %}
                                                            <i class="far fa-check-circle"></i>
                                                        {% endif %}
                                                    </div>
                                                </button>
                                            {% endif %}
                                        {% endif %}
                                    </div>
                                {% endif %}

                            </li>

                        {% endfor %}

                    </div>
                {% else %}
                    <div class="card bg-dark text-white mb-3">
                        <div class="card-body">
                            <div class="d-flex justify-content-center align-content-center">
                                Playlist is empty ;-;
                            </div>
                            <div class="d-flex justify-content-center align-content-center">
                                Consider moving/copying videos from other playlists into this playlist by copying and using this playlist's ID.
                            </div>

                        </div>
                    </div>

                {% endif %}

            </div>
        {% endif %}
        <div id="load-more-videos-spinner" class="d-flex htmx-indicator justify-content-center align-items-center">
            <div class="spinner-border mt-3" role="status">
            </div>
            <span class="mt-3 ms-2">Loading more videos...</span>
        </div>
        {% endif %}
    </div>

    <button class="scrollToTopBtn sticky-top">
        <i class="fa fa-angle-double-up fa-lg"></i></button>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

    <script type="application/javascript">


        $(document).ready(function(){

                // multiple choices select search box
                var multipleCancelButton = new Choices('#playlists-to-move-to', {
                    removeItemButton: true,
                });

                BackgroundCheck.init({
                  targets: '.ui',
                    images: '.ui-img'
                });
            });

            $(function () {

                  var $populationChart = $("#channel-videos-chart");
                  $.ajax({
                    url: $populationChart.data("url"),
                    success: function (data) {

                      var ctx = $populationChart[0].getContext("2d");
                       var coloR = [];

                     var dynamicColors = function() { // generate random color
                            var r = Math.floor(Math.random() * 255);
                            var g = Math.floor(Math.random() * 255);
                            var b = Math.floor(Math.random() * 255);
                            return "rgb(" + r + "," + g + "," + b + ")";
                         };

                      for (var i in data.labels) {
                          if (data.labels)
                          coloR.push(dynamicColors());
                     }

                      new Chart(ctx, {
                        type: 'pie',
                        data: {
                          labels: data.labels,
                          datasets: [{
                            label: 'Videos',
                            backgroundColor: coloR,
                            data: data.data
                          }]
                        },
                        options: {
                          responsive: true,
                          legend: {
                            position: 'right',
                              display: false
                          },
                          title: {
                            display: true,
                              text: 'Video Count Distribution per Channel',
                              fontSize: 20,
                              fontColor: '#fff',
                          },

                        }
                      });

                    }
                  });

                });

        // when a video list item is clicked on, it gets checked and its bg turns red
        function selectVideo(video) {
            if ($('#row2').is(':visible')) {
                var videoCB = document.getElementById("video-" + video.id);

                if (videoCB.checked) {
                    video.classList.remove("bg-danger");
                    video.classList.add("bg-transparent");
                    videoCB.checked = false;
                } else {
                    video.classList.remove("bg-transparent");
                    video.classList.add("bg-danger");
                    videoCB.checked = true;
                }
            }
        }


        var moveCopyBtn = document.getElementById('move-copy-vids-btn');
        var moveCopyCollapse = document.getElementById('moveItemsToCollapse');
        var bsMoveCopyCollapse = new bootstrap.Collapse(moveCopyCollapse, {
            toggle: false
        });
        var deleteBtn = document.getElementById('delete-vids-btn');
        var deleteCollapse = document.getElementById('deleteItemsCollapse');
        var bsDeleteCollapse = new bootstrap.Collapse(deleteCollapse, {
            toggle: false
        });


        document.getElementById('manageBtn').addEventListener('click', function () {                document.getElementById("delete-videos-confirm-box").innerHTML = "";
            document.getElementById("delete-videos-confirm-box").innerHTML = "";
            bsMoveCopyCollapse.hide();
            bsDeleteCollapse.hide();
        });
        moveCopyCollapse.addEventListener('show.bs.collapse', function () {
            bsDeleteCollapse.hide();
        });
        deleteCollapse.addEventListener('show.bs.collapse', function () {
            bsMoveCopyCollapse.hide();
        });

        <!-- end -->


        document.getElementById('select-all-btn').onclick = function() {
            document.getElementById('select-all-btn').style.display = "none";
            document.getElementById('deselect-all-btn').style.display = "block";

            var checkboxes = document.getElementsByClassName('video-checkboxes');
            for (var checkbox of checkboxes) {
                checkbox.checked = true;
            }

            var listItems = document.getElementsByClassName('videos'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
            for(var i=0, len=listItems.length; i<len; i++)
            {
                if(listItems[i].classList.contains("bg-transparent")){
                    listItems[i].classList.remove("bg-transparent");
                    listItems[i].classList.add("bg-danger");
                }
            }
        }
        document.getElementById('deselect-all-btn').onclick = function() {
            document.getElementById('deselect-all-btn').style.display = "none";
            document.getElementById('select-all-btn').style.display = "block";

            var checkboxes = document.getElementsByClassName('video-checkboxes');
            for (var checkbox of checkboxes) {
                checkbox.checked = false;
            }

            var listItems = document.getElementsByClassName('videos'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
            for(var i=0, len=listItems.length; i<len; i++)
            {
                if(listItems[i].classList.contains("bg-danger")){
                    listItems[i].classList.remove("bg-danger");
                    listItems[i].classList.add("bg-transparent");
                }
            }
        }

        function row1_hide() {
            document.getElementById("row1").style.display = "none";
            var checkboxes = document.getElementsByClassName('video-checkboxes'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
            for(var i=0, len=checkboxes.length; i<len; i++)
            {
                //checkboxes[i].style.display = "block";
                checkboxes[i].checked = false;
            }
            document.getElementById("row2").style.display = "block";
        }

        function row1_show() {
            document.getElementById("row1").style.display = "block";
            var checkboxes = document.getElementsByClassName('video-checkboxes'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
            for(var i=0, len=checkboxes.length; i<len; i++)
            {
                checkboxes[i].style.display = "none";
                checkboxes[i].checked = false;
            }
            document.getElementById("row2").style.display = "none";
            var listItems = document.getElementsByClassName('videos'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
            for(var i=0, len=listItems.length; i<len; i++)
            {
                if(listItems[i].classList.contains("bg-danger")){
                    listItems[i].classList.remove("bg-danger");
                    listItems[i].classList.add("bg-transparent");
                }
            }
        }

        function select_all_checkboxes(source) {
            checkboxes = document.getElementsByClassName('big-checkbox');
            for(var i=0, n=checkboxes.length;i<n;i++) {
                checkboxes[i].checked = source.checked;
            }
        }


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