{#
 # ============================================================================
 # MOLECULE: TAB PANEL
 # ============================================================================
 #
 # Panneau de contenu pour un onglet.
 # À utiliser avec le composant Tabs.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type    | Défaut  | Description                          |
 # |-------------|---------|---------|--------------------------------------|
 # | tabsId      | string  | (requis)| ID du conteneur tabs associé         |
 # | tabId       | string  | (requis)| ID de l'onglet correspondant         |
 # | active      | bool    | false   | Si ce panel est visible par défaut   |
 # | class       | string  | ''      | Classes additionnelles               |
 #
 # ============================================================================
 # EXEMPLE D'UTILISATION
 # ============================================================================
 #
 # {% include '_molecules/tabs/tabs.html.twig' with {
 #     id: 'my-tabs',
 #     tabs: [{ id: 'general', label: 'Général' }, { id: 'settings', label: 'Paramètres' }],
 #     active: 'general'
 # } %}
 #
 # {% include '_molecules/tabs/tab-panel.html.twig' with {
 #     tabsId: 'my-tabs', tabId: 'general', active: true
 # } %}
 #     <p>Contenu de l'onglet Général</p>
 # {% endinclude %}
 #
 # {% include '_molecules/tabs/tab-panel.html.twig' with {
 #     tabsId: 'my-tabs', tabId: 'settings'
 # } %}
 #     <p>Contenu de l'onglet Paramètres</p>
 # {% endinclude %}
 #
 # ============================================================================
 #}

{% set tabsId = tabsId ?? '' %}
{% set tabId = tabId ?? '' %}
{% set active = active ?? false %}
{% set class = class ?? '' %}

<div
    id="{{ tabsId }}-panel-{{ tabId }}"
    role="tabpanel"
    aria-labelledby="{{ tabsId }}-tab-{{ tabId }}"
    data-tab-panel-for="{{ tabsId }}"
    data-tab-id="{{ tabId }}"
    {% if not active %}hidden aria-hidden="true"{% endif %}
    class="{{ class }}"
>
    {{ block('content') is defined ? block('content') : '' }}
</div>