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

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

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

{% block customStyle %}
    <style>
        .dot {
            height: 25px;
            width: 25px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
        }
    </style>
{% endblock %}

{% block body %}
    
    {{ include("base/ban-customer.html.twig", {name_page: "Bibliothèque"}) }}
    {% if listThematics|length > 0 %}
        <div class="container-fluid pt-5">
            <div class="container">
                <div class="list-group d-flex flex-column justify-content-center align-items-center">
                    {% for element in listThematics %}
                        <a href="/biblio-content/{{ element.id }}" class="list-group-item list-group-item-action" aria-current="true">
                            <hr style="background-color: {{ element.description }}" />
                            <span style="color:black">{{ element.name }}</span>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% else %}
        <div class="text-center pb-2">
            <p>
                Le contenu de la bibliothèque n'est pas encore disponible.<br />
                Merci de compléter tes informations en cliquant sur ce bouton <br /><br /> 
                <a href="/ajouter-enfant" class="btn btn-primary">Je complète mes informations</a>
            </p>
        </div>
    {% endif %}


{% endblock %}