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

{% block title %}Bibliothèque{% endblock %}

{% block customNavigation %}
    {% include "base/nav-customer.html.twig" %}
{% endblock %}

{% block body %}
    
    {{ include("base/ban-customer.html.twig", {name_page: thematic.name}) }}

    <div class="container-fluid pt-1 d-flex mb-4" style="padding:3%">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/bibliotheque">Bibliothèque</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ thematic.name }}</li>
                </ol>
            </nav>

            {% if contentNewsBaby |length > 0 %}

                <div class="row">
                    {% for content  in contentNewsBaby  %}
                        <div class="col-lg-6 mb-5">
                            {% for medias in content.news.cbaNewsContents %}
                                {% if medias.media.principal == 1 and medias.media.type.id == 11 %}
                                    <video id="my-video" class="video-js" controls preload="auto" width="100%" height="auto" poster="{{ medias.media.image }}" data-setup="{}">
                                        <source src="{{ medias.media.file }}" type="video/mp4" />
                                        <p class="vjs-no-js">
                                            To view this video please enable JavaScript, and consider upgrading to a
                                            web browser that
                                            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                        </p>
                                    </video>
                                {% endif %}

                                {% if medias.media.principal == 1 and medias.media.type.id == 10 %}
                                    <div class="audioPlayer" style="background-size: cover;background-image: url('../..{{ medias.media.image }}');width:auto;height:200px;position:relative;" >
                                        <audio controls = 'controls' style="position: absolute;margin-left: 5%;bottom: 3%;width: 90%;">
                                        <source src="{{ medias.media.file }}" type="audio/mp3" />
                                        </audio>
                                    </div>
                                {% endif %}

                            {% endfor %}
                            <div style="background-color:#ffffff;padding:3%">
                                <br />
                                <h3 class="mb-4">{{ content.news.title }}</h3>
                                <p>
                                    {{ content.news.description|raw }}
                                </p>

                                <div class="pt-2 pb-4 text-center">
                                    {% for medias in content.news.cbaNewsContents %}
                                        {% if medias.media.principal == 0 and medias.media.type.id == 12 %}
                                            <a href="{{ medias.media.file }}" class="btn btn-primary mt-2 py-2 px-4" style="text-transform:uppercase;">{{ medias.media.name }}</a>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>

                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center pb-2">
                    <p>
                        Le contenu de <strong>"{{ thematic.name }}"</strong> n'est pas encore disponible.<br />
                    </p>
                </div>
            {% endif %}
        </div>
    </div>
    
    <div class="d-flex justify-content-center">
        {% do contentNewsBaby.setPageRange(2)  %}
        {{ knp_pagination_render(contentNewsBaby, 'base/pagination.html.twig') }}
    </div>

{% endblock %}