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

{% load humanize %}
{% if watching %}
    {% for playlist in playlists %}
        <div class="col">

            <div class="card overflow-auto" style="background-color: {{ bg_color|default:"#c2c68f" }};">
                <img  class="bd-placeholder-img card-img-top" src="{{ playlist.thumbnail_url }}" style="max-width:100%; height: 200px;   object-fit: cover;" alt="{{ playlist.name }} thumbnail">

                <div class="card-body">
                    <h5 class="card-title"><a href="{% url 'playlist' playlist.playlist_id %}" class="stretched-link" style="text-decoration: none; color: black">{{ playlist.name }}</a></h5>
                    <p class="card-text">
                        <span class="badge bg-{% if playlist.get_watch_time_left == "0secs." %}success{% else %}primary{% endif %} text-white">{{ playlist.get_watched_videos_count }}/{{ playlist.get_watchable_videos_count }} viewed</span>
                        {% if playlist.get_watch_time_left != "0secs." %}<span class="badge bg-dark text-white">{{ playlist.get_watch_time_left }} left</span>{% endif %}
                    </p>
                    <p class="card-text"><small class="text-muted">Last watched {{ playlist.last_watched|naturaltime }}</small></p>
                </div>
            </div>
        </div>
    {% endfor %}

{% else %}
    {% for playlist in playlists %}
        <div class="col">
            <div class="card overflow-auto" style="background-color: {{ bg_color|default:"#4790c7" }};">
                <a href="{% url 'playlist' playlist.playlist_id %}" style="text-decoration: none; color: black">
                    <img  class="bd-placeholder-img card-img-top" src="{{ playlist.thumbnail_url }}" style="max-width:100%; height: 200px;   object-fit: cover;" alt="{{ playlist.name }} thumbnail">
                </a>
                <div class="card-body">
                    <h5 class="card-title"><a href="{% url 'playlist' playlist.playlist_id %}" style="text-decoration: none; color: black">{{ playlist.name }}</a></h5>

                    <p class="card-text text-uppercase">
                        {% if playlist.is_user_owned %}<span class="badge bg-light text-black-50">OWNED</span>{% else %}<span class="badge bg-light text-black-50">IMPORTED</span>{% endif %}
                        {% if playlist.is_private_on_yt %}<span class="badge bg-secondary text-white">Private</span> {% endif %}
                        <span class="badge bg-warning text-black-50">{{ playlist.video_count }} videos</span>
                        <span class="badge bg-dark text-white">{{ playlist.playlist_duration }} </span>
                        {% if playlist.is_from_yt %}<span class="badge bg-danger text-black-50">YT</span> {% endif %}
                        {% if playlist.marked_as == "watching" %}<span class="badge bg-primary text-white">WATCHING</span>{% endif %}

                    </p>
                    {% if show_tags|default:True %}
                        {% if playlist.tags.all %}
                            <p class="card-text">
                                <span class="d-flex justify-content-start flex-wrap">
                                    <small>
                                        <span style="color: #eed868;" class="me-lg-1 mb-lg-1">
                                            <i class="fas fa-tags"></i>
                                        </span>
                                    </small>
                                    {% for tag in playlist.tags.all %}
                                        <span class="badge rounded-pill bg-info mb-lg-1 me-lg-1 text-black-50">
                                            {{ tag.name }}
                                        </span>
                                    {% endfor %}
                                </span>
                            </p>
                        {% endif %}

                    {% endif %}

                    {% if show_controls %}
    <span class="d-flex justify-content-center">
        <a href="https://www.youtube.com/playlist?list={{ playlist.playlist_id }}" class="btn btn-light me-1" target="_blank" id="share_link" style=""><i class="fas fa-external-link-alt" aria-hidden="true"></i></a>

        <button class="btn btn-dark" type="button" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'favorite' %}" hx-target="#playlist-{{ forloop.counter }}-fav">
            <div id="playlist-{{ forloop.counter }}-fav">
                {% if playlist.is_favorite %}
                    <i class="fas fa-star" style="color: #fafa06"></i>
                {% else %}
                    <i class="far fa-star"></i>
                {% endif %}
            </div>
        </button>
    </span>
    {% endif %}

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

    <!-- minified version
    {% for playlist in playlists %}
    <div class="col">
        <div class="card" style="background-color: #515355;">
            <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">

                    <h5 class="card-title text-white">
                        {{ playlist.name }}

                    </h5>

                    <p class="card-text">
                        {% if playlist.is_user_owned %}<small><span class="badge bg-light text-black-50">OWNED</span></small>{% else %}<small><span class="badge bg-light text-black-50">IMPORTED</span></small>{% endif %}
                        {% if playlist.is_private_on_yt %}<small><span class="badge bg-secondary text-white">Private</span></small> {% endif %}
                        {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-black-50">YT</span></small> {% endif %}
                        {% if playlist.marked_as == "watching" %}<small><span class="badge bg-primary text-white">WATCHING</span></small>{% endif %}
                    </p>

                    {% if playlist.tags.all %}
                        <p class="card-text">
                        <span class="d-flex justify-content-start flex-wrap">
                        <small>
                        <span style="color: #eed868;" class="me-lg-1 mb-lg-1">
                            <i class="fas fa-tags"></i>
                        </span>
                        </small>
                        {% for tag in playlist.tags.all %}
                            <span class="badge rounded-pill bg-info mb-lg-1 me-lg-1 text-black-50">
                                {{ tag.name }}
                            </span>
                        {% endfor %}
                        </span>
                        </p>
                    {% endif %}
                    <small>
                        <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
                        <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
                    </small>
                </div>
            </a>
        </div>
    </div>
    {% endfor %}
    -->
{% endif %}