{% load humanize %}
{% for video in videos %}
    <div class="col">

        <div class="card overflow-auto" style="max-width: 540px; background-color: #1A4464;">
            <div class="row g-0">
                {% if not video.is_unavailable_on_yt and not video.was_deleted_on_yt %}
                <div class="col-md-4">
                    <a href="{% url 'video' video.video_id %}" style="text-decoration: none; color: white">
                    <img src="{{ video.thumbnail_url }}" class="img-fluid" style="width: 100%; height: 15vw; object-fit: cover;">
                    </a>
                </div>
                {% endif %}
                <div class="col-md-8">
                    <div class="card-body">
                        <h5 class="card-title"><a href="{% url 'video' video.video_id %}" style="text-decoration: none; color: white">
                            {% if video.user_label %}
                                <span style="border-bottom: 3px #eeeaea dashed;">{{ video.user_label }}</span>
                            {% else %}
                            {{ video.name|truncatewords:"15" }}
                            {% endif %}
                        </a>
                        </h5>
                        {% if not video.is_unavailable_on_yt and not video.was_deleted_on_yt %}
                        <h5 class="card-text">
                            <small>
                                <span class="badge bg-dark text-white-50">{{ video.duration }}</span>
                                {% if video.is_unavailable_on_yt %}<span class="badge bg-light text-dark">Private</span>{% endif %}
                                {% if video.has_cc %}<span class="badge bg-danger text-dark">CC</span>{% endif %}
                                <span class="badge bg-info text-black-50"><i class="fas fa-eye"></i> {% if video.view_count == -1 %}HIDDEN{% else %}{{ video.view_count|intword|intcomma }}{% endif %}</span>
                                <span class="badge bg-warning text-black-50"><i class="fas fa-thumbs-up"></i> {% if video.like_count == -1 %}HIDDEN{% else %}{{ video.like_count|intword|intcomma }}{% endif %}</span>

                            </small>
                        </h5>
                        {% endif %}

                        <span class="card-text d-flex justify-content-start">
                            <a href="https://www.youtube.com/watch?v={{ video.video_id }}" class="btn btn-info me-1" target="_blank" id="share_link" style=""><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  me-1" data-clipboard-target="#video-{{ video.video_id }}">
                                <i class="far fa-copy" aria-hidden="true"></i>
                            </button>
                            <button class="btn btn-dark me-1" type="button" hx-get="{% url 'mark_video_favorite' video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
                                <div id="video-{{ forloop.counter }}-fav">
                                    {% if 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-warning" type="button" hx-get="{% url 'mark_video_planned_to_watch' video.video_id %}" hx-target="#video-{{ forloop.counter }}-planned">
                                <div id="video-{{ forloop.counter }}-planned">
                                    {% if video.is_planned_to_watch %}
                                        <i class="fas fa-clock" style="color: #000000"></i>
                                    {% else %}
                                        <i class="far fa-clock"></i>
                                    {% endif %}
                                </div>
                            </button>
                        </span>

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