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 and not playlist.playlist_id == "LL" %}
                        <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="alert alert-dark alert-dismissible fade show" role="alert" id="user-label-alert"  style="display:none;">
                    <form method="post" action="{% url 'add_playlist_user_label' playlist.playlist_id %}" class="d-flex justify-content-center">
                        {% csrf_token %}
                        <span class="mt-2 me-1">Enter an optional label to identify this playlist with:</span>
                        <input class="form-control w-25 me-2" type="text" placeholder="Enter here" name="user_label" value="{{ playlist.user_label }}" aria-label="user label">
                        <button type="submit" class="btn btn-primary">Save</button>

                    </form>
                    <button type="button" class="btn-close mt-2 me-2" onclick='document.getElementById("user-label-alert").style.display = "none";' aria-label="Close"></button>

                </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>
                                        <button class="btn btn-light btn-sm ms-2" onclick='document.getElementById("user-label-alert").style.display = "block";'>
                                            <i class="fas fa-pencil-alt" aria-hidden="true"></i>
                                        </button>

                                        <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 <a href="{% url 'search' %}?mode=videos&channel={{ playlist.channel_name }}" style="text-decoration: none; color: white"><span style="border-bottom: 3px #e35959 dashed;">{{ playlist.channel_name }}</span></a></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 > 1 %}
                                    <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="#addVideosCollapse" aria-expanded="false" aria-controls="addVideosCollapse">
                                        <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="#createPlaylistCollapse" aria-expanded="false" aria-controls="createPlaylistCollapse">
                                        <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)! <span class="text-muted selected-videos-count">0 videos selected</span></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">
                            <h5><span class="text-muted selected-videos-count">0 videos selected</span></h5>
                            <div id="delete-videos-confirm-box">
                                <h5>You can select videos by clicking any where on the video box. Selected videos will be highlighted red.</h5>
                                {% 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 id="row5" style="background-color: #0f5132">
                    <div class="collapse border-danger" id="addVideosCollapse">
                        <div class="card card-body bg-dark text-white">

                            <h5>Add new videos to this playlist <span class="text-muted selected-videos-count">0 videos selected</span></h5>

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


                                <div class="col-md-8 text-dark">
                                    <div id="add-videos-from">
                                        <textarea name="add-videos-textarea" class="form-control" id="add-videos-text-area" placeholder="Enter video links or video IDs line by line here" rows="5"
                                            hx-post="{% url 'manage_save' 'manage_playlists_import_textarea' %}"
                                            hx-trigger="keyup changed delay:500ms"
                                            hx-indicator="#spinner">{{ manage_playlists_import_textarea }}</textarea>
                                        <div id="add-videos-text-area" class="form-text">
                                            <a href="{% url 'search' %}?mode=videos&type=all" target="_blank" style="color: #398439; text-decoration: none">search on UnTube <i class="fas fa-external-link-alt"></i> </a> or
                                            <a href="https://www.youtube.com/" target="_blank" style="color: #ec2d90; text-decoration: none">search on YouTube <i class="fas fa-external-link-alt"></i> </a>
                                        </div>

                                    </div>

                                </div>

                            </div>

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

                                <div class="btn-group ms-1 mt-1">
                                    <button hx-indicator="#add-videos-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-primary">
                                        Add!
                                    </button>
                                </div>
                                <div id="add-videos-box" class="d-flex align-items-end ms-2">
                                </div>
                                    <div class="htmx-indicator d-flex align-items-center" id="add-videos-loader">
                                        <img src="{% static 'svg-loaders/grid.svg' %}" width="25" height="25" class="ms-2 mt-2">
                                        <span class="mt-2 ms-2 text-warning">Adding videos, please wait... </span>
                                    </div>
                            </div>

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

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

                            <h5>Create a new playlist with the selected videos <span class="text-muted selected-videos-count">0 videos selected</span></h5>

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


                                <div class="col-md-8 text-dark">
                                    <div id="create-playlist-from">
                                        <input type="text" name="playlist-name" class="form-control" placeholder="Enter new playlist name">
                                        <textarea name="create-playlist-textarea" class="form-control mt-2" id="create-playlist-text-area" placeholder="Enter playlist description here" rows="5"
                                            hx-post="{% url 'manage_save' 'manage_playlists_import_textarea' %}"
                                            hx-trigger="keyup changed delay:500ms"
                                            hx-indicator="#spinner">{{ manage_playlists_import_textarea }}</textarea>
                                    </div>

                                </div>

                            </div>

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

                                <div class="btn-group ms-1 mt-1">
                                    <button hx-indicator="#add-videos-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-light">
                                        Create!
                                    </button>
                                </div>
                                <div id="add-videos-box" class="d-flex align-items-end ms-2">
                                </div>
                                    <div class="htmx-indicator d-flex align-items-center" id="add-videos-loader">
                                        <img src="{% static 'svg-loaders/grid.svg' %}" width="25" height="25" class="ms-2 mt-2">
                                        <span class="mt-2 ms-2 text-warning">Adding videos, 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 <a href="{% url 'search' %}?mode=videos&channel={{ playlist_item.video.channel_name }}" style="text-decoration: none; color: black"><span style="border-bottom: 3px #e35959 dashed;"> {{ playlist_item.video.channel_name }}</span></a><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>
                <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 %}

        {% 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;
                }
            }
            displaySelectedVideosCount();
        }


        var moveCopyCollapse = document.getElementById('moveItemsToCollapse');
        var bsMoveCopyCollapse = new bootstrap.Collapse(moveCopyCollapse, {
            toggle: false
        });
        var deleteCollapse = document.getElementById('deleteItemsCollapse');
        var bsDeleteCollapse = new bootstrap.Collapse(deleteCollapse, {
            toggle: false
        });
        var addVideosCollapse = document.getElementById('addVideosCollapse');
        var bsAddVideosCollapse = new bootstrap.Collapse(addVideosCollapse, {
            toggle: false
        });
        var createPlaylistCollapse = document.getElementById('createPlaylistCollapse');
        var bsCreatePlaylistCollapse = new bootstrap.Collapse(createPlaylistCollapse, {
            toggle: false
        });


        function displaySelectedVideosCount() {

            var count = 0;
            var checkboxes = document.getElementsByClassName('video-checkboxes');
            for (var checkbox of checkboxes) {
                if (checkbox.checked) {
                    count ++;
                }
            }
            var displayBoxes = document.getElementsByClassName('selected-videos-count');
            for (var displayBox of displayBoxes) {
                displayBox.innerHTML = count + " videos selected"
            }
        }

        document.getElementById('manageBtn').addEventListener('click', function () {                document.getElementById("delete-videos-confirm-box").innerHTML = "";
            document.getElementById("delete-videos-confirm-box").innerHTML = `
                <h5>You can select videos by clicking any where on the video box. Selected videos will be highlighted red.</h5>
                {% 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 %}
            `;
            bsMoveCopyCollapse.hide();
            bsDeleteCollapse.hide();
            bsAddVideosCollapse.hide();
            bsCreatePlaylistCollapse.hide();

            var displayBoxes = document.getElementsByClassName('selected-videos-count');
            for (var displayBox of displayBoxes) {
                displayBox.innerHTML =  "0 videos selected"
            }
        });
        moveCopyCollapse.addEventListener('show.bs.collapse', function () {
            bsDeleteCollapse.hide();
            bsAddVideosCollapse.hide();
            bsCreatePlaylistCollapse.hide();
        });
        deleteCollapse.addEventListener('show.bs.collapse', function () {
            bsMoveCopyCollapse.hide();
            bsAddVideosCollapse.hide();
            bsCreatePlaylistCollapse.hide();
        });
        addVideosCollapse.addEventListener('show.bs.collapse', function () {
            bsMoveCopyCollapse.hide();
            bsDeleteCollapse.hide();
            bsCreatePlaylistCollapse.hide();
        });
        createPlaylistCollapse.addEventListener('show.bs.collapse', function () {
            bsMoveCopyCollapse.hide();
            bsDeleteCollapse.hide();
            bsAddVideosCollapse.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");
                }
            }

            displaySelectedVideosCount();
        }
        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");
                }
            }

            displaySelectedVideosCount();
        }

        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 %}