<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: Tableau Utilisateurs (WOU/DRY Pattern)
        
        Auteur: Lions User Manager
        Version: 1.0.0
        Description: Tableau de données pour afficher une liste d'utilisateurs
        
        Paramètres:
        - users: List&lt;UserDTO&gt; (requis) - Liste des utilisateurs
        - var: String (défaut: "user") - Nom de la variable pour itération
        - tableId: String (défaut: "userTable") - ID du tableau
        - paginator: Boolean (défaut: true) - Activer la pagination
        - rows: Number (défaut: 20) - Nombre de lignes par page
        - showActions: Boolean (défaut: true) - Afficher la colonne actions
        - showRoles: Boolean (défaut: true) - Afficher la colonne rôles
        - showEmail: Boolean (défaut: true) - Afficher la colonne email
        - showStatus: Boolean (défaut: true) - Afficher la colonne statut
        - showSelection: Boolean (défaut: false) - Activer la sélection
        - selection: UserDTO (optionnel) - Utilisateur sélectionné
        - selectionMode: String (défaut: "single") - Mode: "single" ou "multiple"
        - update: String (optionnel) - Composants à mettre à jour
        - styleClass: String (optionnel) - Classes CSS supplémentaires
        
        Exemples d'utilisation:
        
        1. Tableau simple:
        <ui:include src="/templates/components/shared/tables/user-data-table.xhtml">
            <ui:param name="users" value="#{userBean.users}" />
        </ui:include>
        
        2. Tableau avec sélection:
        <ui:include src="/templates/components/shared/tables/user-data-table.xhtml">
            <ui:param name="users" value="#{userBean.users}" />
            <ui:param name="showSelection" value="true" />
            <ui:param name="selection" value="#{userBean.selectedUser}" />
        </ui:include>
    -->
    
    <c:set var="var" value="#{empty var ? 'user' : var}" />
    <c:set var="tableId" value="#{empty tableId ? 'userTable' : tableId}" />
    <c:set var="paginator" value="#{empty paginator ? true : paginator}" />
    <c:set var="rows" value="#{empty rows ? 20 : rows}" />
    <c:set var="showActions" value="#{empty showActions ? true : showActions}" />
    <c:set var="showRoles" value="#{empty showRoles ? true : showRoles}" />
    <c:set var="showEmail" value="#{empty showEmail ? true : showEmail}" />
    <c:set var="showStatus" value="#{empty showStatus ? true : showStatus}" />
    <c:set var="showSelection" value="#{empty showSelection ? false : showSelection}" />
    <c:set var="selectionMode" value="#{empty selectionMode ? 'single' : selectionMode}" />
    
    <p:dataTable 
        id="#{tableId}"
        value="#{users}" 
        var="#{var}"
        paginator="#{paginator}"
        rows="#{rows}"
        selection="#{selection}"
        selectionMode="#{selectionMode}"
        styleClass="w-full #{styleClass}"
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="10,20,50,100"
        emptyMessage="Aucun utilisateur trouvé">
        
        <!-- Colonne de sélection -->
        <c:if test="#{showSelection}">
            <p:column selectionMode="#{selectionMode}" style="width: 3rem" />
        </c:if>
        
        <!-- Colonne Username -->
        <p:column headerText="Nom d'utilisateur" sortBy="#{var.username}" style="width: 15%">
            <div class="flex align-items-center gap-2">
                <p:avatar 
                    label="#{var.firstName != null ? var.firstName.substring(0,1) : 'U'}#{var.lastName != null ? var.lastName.substring(0,1) : ''}" 
                    styleClass="user-avatar-small" />
                <span class="font-semibold">#{var.username}</span>
            </div>
        </p:column>
        
        <!-- Colonne Nom complet -->
        <p:column headerText="Nom complet" sortBy="#{var.lastName}">
            <div class="flex flex-column">
                <span class="font-semibold">#{var.firstName} #{var.lastName}</span>
                <c:if test="#{not empty var.fonction}">
                    <span class="text-color-secondary text-xs">#{var.fonction}</span>
                </c:if>
            </div>
        </p:column>
        
        <!-- Colonne Email -->
        <c:if test="#{showEmail}">
            <p:column headerText="Email" sortBy="#{var.email}">
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-envelope text-color-secondary"></i>
                    <span>#{var.email}</span>
                    <c:if test="#{var.emailVerified}">
                        <i class="pi pi-check-circle text-green-500" title="Email vérifié"></i>
                    </c:if>
                </div>
            </p:column>
        </c:if>
        
        <!-- Colonne Statut -->
        <c:if test="#{showStatus}">
            <p:column headerText="Statut" sortBy="#{var.statut}">
                <div class="flex align-items-center gap-2">
                    <p:tag 
                        value="#{var.statut != null ? var.statut : 'INCONNU'}" 
                        severity="#{var.enabled ? 'success' : 'danger'}" />
                    <c:if test="#{var.enabled}">
                        <i class="pi pi-check-circle text-green-500" title="Compte activé"></i>
                    </c:if>
                    <c:if test="#{not var.enabled}">
                        <i class="pi pi-times-circle text-red-500" title="Compte désactivé"></i>
                    </c:if>
                </div>
            </p:column>
        </c:if>
        
        <!-- Colonne Rôles -->
        <c:if test="#{showRoles}">
            <p:column headerText="Rôles">
                <div class="flex flex-wrap gap-1">
                    <c:forEach var="role" items="#{var.realmRoles}" varStatus="status">
                        <c:if test="#{status.index < 3}">
                            <p:tag value="#{role}" severity="info" styleClass="text-xs" />
                        </c:if>
                    </c:forEach>
                    <c:if test="#{var.realmRoles != null and var.realmRoles.size() > 3}">
                        <p:tag value="+#{var.realmRoles.size() - 3}" severity="secondary" styleClass="text-xs" />
                    </c:if>
                </div>
            </p:column>
        </c:if>
        
        <!-- Colonne Actions -->
        <c:if test="#{showActions}">
            <p:column headerText="Actions" style="width: 150px">
                <ui:include src="/templates/components/user-management/user-actions.xhtml">
                    <ui:param name="user" value="#{var}" />
                    <ui:param name="layout" value="dropdown" />
                    <ui:param name="update" value="#{not empty update ? update : tableId}" />
                </ui:include>
            </p:column>
        </c:if>
    </p:dataTable>
    
</ui:composition>

