{#
 # ============================================================================
 # ORGANISM: TOOL TOOLBAR
 # ============================================================================
 #
 # Ligne de filtres et de recherche des bibliothèques d'outils.
 #
 # Les deux zones sont indépendantes et facultatives : c'est ce qui permet à chaque
 # outil d'avoir des filtres plus ou moins riches sans dupliquer la barre. Moodia y
 # met des onglets et une recherche ; Slidia une recherche et un filtre de masque.
 #
 # items-stretch : la recherche prend EXACTEMENT la hauteur des onglets (h-full),
 # quel que soit le padding interne de la molécule.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _molecules/filter-tabs/filter-tabs.html.twig (si `filters`)
 # - _molecules/search-input/search-input.html.twig (si `search`)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type   | Défaut    | Description                                 |
 # |-----------|--------|-----------|---------------------------------------------|
 # | filters   | array  | null      | Transmis à filter-tabs                      |
 # | active    | string | null      | Filtre actif                                |
 # | name      | string | 'filter'  | Nom du groupe de filtres                    |
 # | search    | object | null      | Transmis à search-input (id, placeholder, …)|
 # | class     | string | (voir ci-dessous) | Classes du conteneur                |
 #
 # ============================================================================
 # BLOCS
 # ============================================================================
 #
 # | Bloc     | Défaut                    | Description                        |
 # |----------|---------------------------|------------------------------------|
 # | leading  | filter-tabs si `filters`  | Zone de gauche                     |
 # | trailing | search-input si `search`  | Zone de droite                     |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # {% embed '_organisms/tool-toolbar/tool-toolbar.html.twig' with {
 #     filters: [{ id: 'all', label: 'Tous', count: 12, href: path('app_moodia') }],
 #     active: typeFilter, name: 'generationType',
 #     search: { id: 'moodia-search', placeholder: 'Rechercher un cours…', value: search,
 #               action: 'input->shared--library-search#search' }
 # } only %}{% endembed %}
 #
 # ============================================================================
 #}

{% set filters = filters ?? null %}
{% set active = active ?? null %}
{% set name = name ?? 'filter' %}
{% set search = search ?? null %}
{% set class = class ?? 'flex flex-col md:flex-row md:items-stretch gap-3 md:gap-4 mb-6' %}

<div class="{{ class }}">
    {% block leading %}
        {% if filters %}
            {#- Ancre générique des tutoriels — cf. tool-header. -#}
            <div class="shrink-0" data-tour-step="outil-filtres">
                {% include '_molecules/filter-tabs/filter-tabs.html.twig' with {
                    filters: filters,
                    active: active,
                    name: name
                } only %}
            </div>
        {% endif %}
    {% endblock %}

    {% block trailing %}
        {% if search %}
            {#- Ancre générique des tutoriels — cf. tool-header. -#}
            {% include '_molecules/search-input/search-input.html.twig' with {
                id: search.id,
                placeholder: search.placeholder|default('Rechercher…'),
                value: search.value|default(''),
                name: search.name|default('q'),
                action: search.action|default(null)
            } only %}
        {% endif %}
    {% endblock %}
</div>