UnTube/apps/main/templates/intercooler/videos.html

{% load humanize %}
{% if videos_details and videos.count != 0 %}
    <h4 class="mt-3 mb-3"><span class="badge bg-dark text-white">{{ videos_details }}, Results: {{ videos.count }}</span></h4>
{% endif %}
<div class="list-group" id="video-checkboxes">
    {% if videos %}
      {% for video in videos %}
                <li class="list-group-item d-flex justify-content-between align-items-center bg-transparent" style="background-color: #40B3A2">

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

                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ video.video_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.video_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">
                            {{ video.video_position }}.
                            <a class="link-dark" href="https://www.youtube.com/watch?v={{ video.video_id }}&list={{ video.playlist.playlist_id }}" target="_blank">
                                {{ video.name|truncatewords:"16" }}
                            </a> by {{ video.channel_name }}<br>
                            <span class="badge bg-secondary">{{ video.duration }}</span>
                            {% if video.has_cc %}<span class="badge bg-secondary">CC</span>{% endif %}
                            {% if video.published_at %}<span class="badge bg-secondary">{{ video.published_at }}</span>{% endif %}
                            {% if video.view_count %}<span class="badge bg-info">{{ video.view_count|intword|intcomma }} views</span>{% endif %}

                            {% if video.is_duplicate %}<span class="badge bg-primary">duplicate</span>{% endif %}
                            {% if video.is_unavailable_on_yt and video.was_deleted_on_yt %}<span class="badge bg-dark">UNAVAILABLE</span>{% endif %}

                            {% if video.video_details_modified %}
                                <span class="badge bg-danger">UPDATED - {% if video.was_deleted_on_yt %}WENT PRIVATE/DELETED{% else %}NEWLY ADDED{% endif %}</span>
                            {% endif %}<br>
                            <br>
                        </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-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">Details</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 %}
    {% else %}
        <h3>{{ display_text }}</h3>
    {% endif %}
</div>