{% load humanize %}
{% if videos_details and playlist_items %}
    <h4 class="mt-3 mb-3"><span class="badge bg-dark text-white">{{ videos_details }}, Results: {{ playlist_items.count }}</span></h4>
{% endif %}
<div class="list-group" id="video-checkboxes">
    {% if playlist_items %}
      {% 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" 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.video.video_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">
                            {{ playlist_item.video_position|add:"1" }}.
                            <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
                                 {{ 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.video.video_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">{% if playlist_item.video.was_deleted_on_yt %}WENT PRIVATE/DELETED{% else %}ADDED{% endif %} {{ playlist_item.video.updated_at|naturaltime|upper }}</span>{% endif %}
                            <br><br>
                        {% else %}
                            {{ playlist_item.video_position|add:"1" }}.
                            <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
                                {{ playlist_item.video.name|truncatewords:"16" }}
                            </a> by {{ playlist_item.video.channel_name }} <br>
                            <span class="badge bg-secondary">{{ playlist_item.video.duration }}</span>
                            {% if playlist_item.video.has_cc %}<span class="badge bg-secondary">CC</span>{% endif %}
                            {% if playlist_item.video.published_at %}<span class="badge bg-secondary">{{ playlist_item.video.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.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.video.created_at|naturaltime|upper }}</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.playlist_id 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.playlist_id 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 %}
    {% else %}
        <h3 class="mt-3">{{ display_text }}</h3>
    {% endif %}
</div>