<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <!--
        Composant réutilisable: Section Dashboard - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 1.0.0
        Description: Composant composite pour créer des sections de dashboard réutilisables
        
        Paramètres:
        - title: String (requis) - Titre de la section
        - description: String (optionnel) - Description de la section
        - icon: String (optionnel) - Icône PrimeIcons
        - colSize: String (défaut: "col-12") - Taille de colonne
        - showCard: Boolean (défaut: true) - Envelopper dans une carte
        - styleClass: String (optionnel) - Classes CSS supplémentaires
        
        Exemple:
        ui:include src="/templates/components/shared/dashboard/dashboard-section.xhtml"
            ui:param name="title" value="Actions Rapides"
            ui:param name="icon" value="pi-bolt"
            ui:param name="colSize" value="col-12 lg:col-6"
            ui:define name="section-content"
                Contenu de la section
            ui:define
        ui:include
    -->
    
    <c:set var="colSize" value="#{empty colSize ? 'col-12' : colSize}" />
    <c:set var="showCard" value="#{empty showCard ? true : showCard}" />
    
    <div class="#{colSize}">
        <c:choose>
            <c:when test="#{showCard}">
                <div class="card #{styleClass}">
                    <c:if test="#{not empty title}">
                        <div class="flex align-items-center mb-3">
                            <c:if test="#{not empty icon}">
                                <i class="pi #{icon} mr-2 text-primary"></i>
                            </c:if>
                            <h5 class="font-semibold mb-0">#{title}</h5>
                        </div>
                    </c:if>
                    <c:if test="#{not empty description}">
                        <p class="text-600 text-sm mb-3">#{description}</p>
                    </c:if>
                    <ui:insert name="section-content">
                        <!-- Contenu de la section -->
                    </ui:insert>
                </div>
            </c:when>
            <c:otherwise>
                <c:if test="#{not empty title}">
                    <div class="flex align-items-center mb-3">
                        <c:if test="#{not empty icon}">
                            <i class="pi #{icon} mr-2 text-primary"></i>
                        </c:if>
                        <h5 class="font-semibold mb-0">#{title}</h5>
                    </div>
                </c:if>
                <c:if test="#{not empty description}">
                    <p class="text-600 text-sm mb-3">#{description}</p>
                </c:if>
                <ui:insert name="section-content">
                    <!-- Contenu de la section -->
                </ui:insert>
            </c:otherwise>
        </c:choose>
    </div>
    
</ui:composition>

