{% extends 'base.html' %}
{% load humanize %}
{% block content %}

    <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">Favorite Playlists
            <span class="badge bg-primary rounded-pill">{{ playlists.count|default:"0" }}</span>
            {% if playlists %}
                <a href="{% url 'all_playlists' 'favorites' %}" style="text-decoration: none; color: black"><i class="fas fa-search"></i></a>
            {% endif %}
        </h1>
    </div>

    <div>
        <div class="row row-cols-1 row-cols-md-4 g-4">
            {% if playlists %}
                {% include 'intercooler/playlists.html' with playlists=playlists %}
            {% else %}
                <h5 class="text-dark align-content-center">No playlists marked favorite :(</h5>
            {% endif %}
        </div>
    </div>

    <br>
    <br>

    <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">Favorite Videos
            <span class="badge bg-primary rounded-pill">{{ videos.count }}</span>
            {% if videos %}
                <a href="{% url 'search_UnTube' %}" style="text-decoration: none; color: black"><i class="fas fa-search"></i></a>
            {% endif %}
        </h1>
    </div>

    <div>
        <div class="row row-cols-1 row-cols-md-3 g-4">
            {% if videos %}
                {% include 'intercooler/video_cards.html' with videos=videos %}
            {% else %}
                <h5 class="text-dark align-content-center">No videos marked favorite :(</h5>
            {% endif %}
        </div>
    </div>
{% endblock %}