{% extends 'layout.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

{% block body %}
    <div class="container categorie-videos">
        <h1 class="mt-4">Vidéos - {{ videoCategorie.nom | capitalize }}</h1>

        {% if videoCategorie.description is not empty %}
        <div class="row my-4">
            <div class="col">
                <div class="encart">
                    <p>
                        <span class="synopsis">
                            {{ videoCategorie.description | raw }}
                        </span>
                    </p>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="row mb-4">
            {% if videos is not empty %}
                {% for video in videos %}
                    <div class="col-md-6 col-xl-4">
                        {{ include('includes/_listing_videos.html.twig', { 'video': video }, with_context = false) }}
                    </div>
                {% endfor %}
            {% else %}
                <div class="col">
                    <div class="jumbotron">
                        <div class="container-fluid py-3">
                            <p class="h4">Aucune vidéo n'a pu être trouvée pour cette catégorie.<br>
                                Revenez plus tard ou essayez une autre catégorie.
                            </p>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}