UnTube/backend/main/templates/temp.html

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

                        <input class="form-control me-1 visually-hidden" id="pl-{{ playlist.playlist_id }}" value="{{ playlist.playlist_id }}">
                        <button class="copy-btn btn  btn-light mb-1" data-clipboard-target="#pl-{{ playlist.playlist_id }}">
                            <i class="far fa-copy" aria-hidden="true"></i>
                        </button>
                    </small> </h2>
                <h6>by {{ playlist.channel_name }}</h6>
            </span>
            <h4>
                <span id="notice-div">
                    {% if playlist.marked_as != "none" %}
                    <span class="badge bg-success text-white" >{{ playlist.marked_as|title }}</span>
                    {% endif %}
                </span>
            </h4>
        </div>
        <p class="mb-1">
            {% if playlist.description %}
            <h5>{{ playlist.description }}</h5>
            {% else %}
            <h5>No description</h5>
            {% endif %}
        </p>
        <small>
            <span class="badge bg-dark rounded-pill">{{ playlist.video_count }} videos</span>
            <span class="badge bg-dark rounded-pill">{{ playlist.playlist_duration }} </span>
            {% if playlist.is_private_on_yt %}<span class="badge bg-dark rounded-pill">private</span>{% endif %}
            {% if playlist.has_unavailable_videos %}
                    <span class="badge bg-dark rounded-pill">some videos are unavailable</span>
            {% endif %}
            {% if playlist.has_duplicate_videos %}
                    <span class="badge bg-dark rounded-pill">duplicate videos</span>
            {% endif %}
        </small>
    </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 btn-outline-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>
                        </ul>
                    </div>

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

                </div>
            </div>

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

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

                        <div class="btn-group me-2">
                            <button type="button" class="btn btn-danger">
                                <i class="fas fa-dumpster-fire"></i>
                            </button>
                        </div>



                        <div class="btn-group me-2">
                            <button type="button" class="btn btn-primary">
                                <i class="fas fa-edit"></i>
                            </button>
                        </div>

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

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

                        <div class="btn-group me-2">
                            <button type="button" class="btn btn-outline-light" onclick="row1_hide()">Manage</button>
                        </div>
                </div>
            </div>
        </div>
    </div>
    <div id="row2" style="display: none">
        <div class="d-flex bd-highlight mb-1">
            <div class="me-auto bd-highlight">
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div id="select-all-btn">
                        <div class="btn-group me-2">
                        <button type="button" class="btn btn-outline-info" id="select-all-btn">Select All</button>
                    </div>
                    </div>
                    <div id="deselect-all-btn" style="display: none">
                        <div class="btn-group me-2">
                        <button type="button" class="btn btn-outline-info" id="select-all-btn">De-select All</button>
                        </div>
                    </div>
                    <div class="btn-group me-2">
                        <!-- <button type="submit" form="my-form" class="btn btn-outline-success" data-bs-toggle="dropdown" aria-expanded="false">
                            Move
                        </button> -->
                           <button class="btn btn-outline-success" id="move-copy-vids-btn" type="button" data-bs-toggle="collapse" data-bs-target="#moveItemsToCollapse" aria-expanded="false" aria-controls="moveItemsToCollapse">
                                Move/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>
                    -->
                    <div class="btn-group me-2">
                        <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-include="[id='video-checkboxes']" hx-target="#delete-videos-confirm-box" type="button" id="delete-vids-btn" class="btn btn-outline-danger" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
                            Delete Selected
                        </button>
                    </div>
                </div>
            </div>



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

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

                </div>
        </div>

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

              <h5>Move or Copy videos to another playlist!</h5>

              <div class="d-flex justify-content-start">
                  <input class="form-control w-50 bg-dark text-white border border-secondary" placeholder="Enter playlist ID here">
                  <div class="btn-group ms-2">
                    <button type="button" class="btn btn-info" id="select-all-btn">Move!</button>
                  </div>
                  <div class="btn-group ms-2">
                    <button type="button" class="btn btn-info" id="select-all-btn">Copy!</button>
                  </div>
              </div>

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

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

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

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

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

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

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

        {% if video.is_unavailable_on_yt %}

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

            <div class="d-flex justify-content-between align-items-center" >
                <div>
                    <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ video.playlist_item_id }}" name="video-id">
                </div>
                  <div class="ms-4" style="max-width: 115px; max-height: 100px;">
                      <img src="{% if video.thumbnail_url %}{{ video.thumbnail_url }}{% else %}https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg{% endif %}" class="img-fluid" alt="">
                  </div>
                    <div class="ms-4">
                        <a class="link-dark" href="https://www.youtube.com/watch?v={{ video.video_id }}&list={{ video.playlist.playlist_id }}" target="_blank">{{ video.video_position }}. {{ video.name|truncatewords:"7" }}</a> <br>
                        <span class="badge bg-secondary">{{ video.duration }}</span>
                        {% if video.has_cc %}<span class="badge bg-secondary">CC</span>{% endif %}
                        {% if video.published_at %}<span class="badge bg-secondary">{{ video.published_at }}</span>{% endif %}
                        {% if video.view_count %}<span class="badge bg-info">{{ video.view_count|intword|intcomma }} views</span>{% endif %}
                        {% if video.is_duplicate %}<span class="badge bg-primary">duplicate</span>{% endif %}
                        {% if video.video_details_modified %}<span class="badge bg-danger">UPDATED - {% if video.was_deleted_on_yt %}WENT PRIVATE/DELETED{% else %}NEWLY ADDED{% endif %}</span>{% endif %}<br>
                    </div>
            </div>
            <div class="ms-5">
                <a class="btn btn-sm btn-info mb-1" type="button" href="https://www.youtube.com/watch?v={{ video.video_id }}" class="btn btn-info me-1" target="_blank"><i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
                <input class="form-control me-1 visually-hidden" id="video-{{ video.video_id }}" value="https://www.youtube.com/watch?v={{ video.video_id }}">
                <button class="copy-btn btn btn-sm  btn-success mb-1" data-clipboard-target="#video-{{ video.video_id }}">
                    <i class="far fa-copy" aria-hidden="true"></i>
                </button>
                <button class="btn btn-sm  btn-primary mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasBottom" hx-get="{% url 'video_details' playlist.playlist_id video.video_id %}" hx-trigger="click" hx-target="#video-details"><i class="fas fa-info"></i></button>
                <button class="btn btn-sm  btn-warning mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasForVideoNotes" aria-controls="offcanvasBottom" hx-get="{% url 'video_notes' playlist.playlist_id video.video_id %}" hx-trigger="click" hx-target="#video-notes">Notes</button>
                <button class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist.playlist_id video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
                    <div id="video-{{ forloop.counter }}-fav">
                        {% if video.is_favorite %}
                            <i class="fas fa-heart"></i>
                        {% else %}
                            <i class="far fa-heart"></i>
                        {% endif %}
                    </div>
                </button>
                    {% if playlist.marked_as == "watching" %}
                    <button class="btn btn-sm btn-light mb-1" type="button">

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

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

            </li>

        {% endfor %}
        </div>
    </div>

    </div>