<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: Groupe de KPI (Composite) - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 1.0.0
        Description: Composant composite pour afficher un groupe de KPI dans une grille
        
        Paramètres:
        - title: String (optionnel) - Titre de la section
        - columns: Integer (défaut: 4) - Nombre de colonnes (1-12)
        - colSize: String (optionnel) - Taille de colonne personnalisée (ex: "col-12 md:col-6 lg:col-3")
        - showTitle: Boolean (défaut: true si title fourni) - Afficher le titre
        - styleClass: String (optionnel) - Classes CSS supplémentaires
        
        Utilisation:
        Ce composant doit être utilisé avec des ui:param pour passer les KPI individuels.
        Chaque KPI doit être inclus avec kpi-card.xhtml.
        
        Exemple:
        <ui:include src="/templates/components/shared/dashboard/kpi-group.xhtml">
            <ui:param name="title" value="Statistiques Utilisateurs" />
            <ui:param name="columns" value="4" />
            <ui:define name="kpi-content">
                <ui:include src="/templates/components/shared/cards/kpi-card.xhtml">
                    <ui:param name="title" value="Total" />
                    <ui:param name="value" value="#{bean.total}" />
                    <ui:param name="icon" value="pi-users" />
                    <ui:param name="iconColor" value="blue-600" />
                </ui:include>
                <!-- Autres KPI... -->
            </ui:define>
        </ui:include>
    -->
    
    <c:set var="columns" value="#{empty columns ? 4 : columns}" />
    <c:set var="showTitle" value="#{empty showTitle ? (not empty title) : showTitle}" />
    
    <c:choose>
        <c:when test="#{columns == 1}">
            <c:set var="colSize" value="col-12" />
        </c:when>
        <c:when test="#{columns == 2}">
            <c:set var="colSize" value="col-12 md:col-6" />
        </c:when>
        <c:when test="#{columns == 3}">
            <c:set var="colSize" value="col-12 md:col-6 lg:col-4" />
        </c:when>
        <c:when test="#{columns == 4}">
            <c:set var="colSize" value="col-12 md:col-6 lg:col-3" />
        </c:when>
        <c:when test="#{columns == 6}">
            <c:set var="colSize" value="col-12 md:col-6 lg:col-2" />
        </c:when>
        <c:otherwise>
            <c:set var="colSize" value="#{empty colSize ? 'col-12 md:col-6 lg:col-3' : colSize}" />
        </c:otherwise>
    </c:choose>
    
    <div class="mb-4 #{styleClass}">
        <c:if test="#{showTitle}">
            <h5 class="font-semibold mb-3">#{title}</h5>
        </c:if>
        <div class="grid">
            <ui:insert name="kpi-content">
                <!-- Les KPI seront insérés ici -->
            </ui:insert>
        </div>
    </div>
    
</ui:composition>

