{% 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|slice:"0:50" %}
                <li {% if forloop.last and videos.count > 50 %}hx-get="{% url 'load_more_videos' playlist.playlist_id 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" 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">

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

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


                    </div>

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

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

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

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

                </li>
      {% endfor %}
    {% else %}
        <h3>{{ display_text }}</h3>
    {% endif %}
</div>