{% load humanize %}

{% if view_mode == "playlists" %}
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center overflow-auto pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">{{ playlist_type }} Playlists {% if search_query != "" %}results for '{{ search_query|escape }}' {% endif %} <span class="badge bg-primary rounded-pill">{{ playlists.count|default:"0" }}</span></h1>
    </div>

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

    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center overflow-auto pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">{{ videos_type }} Videos {% if search_query != "" %}results for '{{ search_query|escape }}' {% endif %} <span class="badge bg-primary rounded-pill">{{ videos.count }}</span> {% if videos.count > 100 %}<small>(only top 100 results shown)</small>{% endif %}</h1>
    </div>

    <div>
        <div class="row row-cols-1 row-cols-md-4 g-4">
            {% if videos %}
                {% include 'intercooler/video_cards.html' with videos=videos|slice:"0:100" %}
            {% else %}
                <h5 class="text-dark align-content-center">Nothing found :(</h5>
            {% endif %}
        </div>
    </div>

{% endif %}
<br>