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

{% load humanize %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Playlists <span class="badge bg-primary rounded-pill">{{ playlists.count|default:"0" }}</span></h1>
</div>

<div>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% if playlists %}
        {% for playlist in playlists %}
        <div class="col">
            <div class="card" style="background-color: #1A4464;">
                <a style="background-color: #1A4464;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">

                    <div class="card-body text-white">

                        <h5 class="card-title">
                            {{ playlist.name|truncatewords:"15" }}
                            {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
                            {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
                        </h5>
                        <p class="card-text">
                            {% if playlist.description %}
                                {{ playlist.description|truncatewords:"15" }}
                            {% else %}
                                No description
                            {% endif %}
                        </p>
                        <small>
                            <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} views</span>
                            <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
                        </small>
                    </div>
                </a>
            </div>
        </div>
        {% endfor %}

        {% else %}
        <h5 class="text-white align-content-center">Nothing found :(</h5>
        {% endif %}
    </div>
</div>

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Videos <span class="badge bg-primary rounded-pill">{{ videos_count }}</span></h1>
</div>

        <div>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% if videos %}
        {% for video in videos %}
        <div class="col">
            <div class="card" style="background-color: #1A4464;">

            <div class="card-body">
                <h5 class="card-title text-light">
                    {{ video.name|truncatewords:"15" }}<br>

                    <small>
                        <a class="badge bg-white text-black-50" href="{% url 'playlist' video.playlist.playlist_id %}">{{ video.playlist.name }}</a>

                        <span class="badge bg-dark text-white-50">{{ video.duration }}</span>
                    </small>
                    {% if video.is_unavailable_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
                    {% if video.has_cc %}<small><span class="badge bg-danger text-dark">CC</span></small> {% endif %}
                </h5>
                                                <br>

                <span class="d-flex justify-content-center">
                    <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" type="button" hx-get="{% url 'mark_video_favorite' video.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>
                </span>
            </div>
            </div>
        </div>
        {% endfor %}

        {% else %}
        <h5 class="text-white align-content-center">Nothing found :(</h5>
        {% endif %}
    </div>
</div>

<br>