{% 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 <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-secondary">CC</span>{% endif %}
                            {% if playlist_item.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.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 title="Mark or unmark video favorite!" class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist_item.video.video_id %}"
                        hx-target="#video-{{ page }}-{{ forloop.counter }}-fav">
                    <div id="video-{{ page }}-{{ 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>
                <button title="Mark or unmark video as plan to watch!" class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_planned_to_watch' playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-planned">
                    <div id="video-{{ forloop.counter }}-planned">
                        {% if playlist_item.video.is_planned_to_watch %}
                            <i class="fas fa-clock" style="color: #000000"></i>
                        {% else %}
                            <i class="far fa-clock"></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-{{ page }}-{{ 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-{{ page }}-{{ 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 title="Mark or unmark video as favorite!" class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist_item.video.video_id %}" hx-target="#video-{{ page }}-{{ forloop.counter }}-fav">
                    <div id="video-{{ page }}-{{ 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 not playlist_item.is_duplicate %}
                    <button title="Mark or unmark video as plan to watch!" class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_planned_to_watch' playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-planned">
                            <div id="video-{{ forloop.counter }}-planned">
                                {% if playlist_item.video.is_planned_to_watch %}
                                    <i class="fas fa-clock" style="color: #000000"></i>
                                {% else %}
                                    <i class="far fa-clock"></i>
                                {% endif %}
                            </div>
                        </button>
                    {% endif %}
                    {% if playlist.marked_as == "watching" and not playlist_item.is_duplicate %}

                    <button title="Mark or unmark video as watched!" 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-{{ page }}-{{ forloop.counter }}-watched">
                        <div id="video-{{ page }}-{{ 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>