<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: Carte Utilisateur (WOU/DRY Pattern)
        
        Auteur: Lions User Manager
        Version: 1.0.0
        Description: Affiche une carte utilisateur avec informations principales et actions
        
        Paramètres:
        - user: UserDTO (requis) - L'utilisateur à afficher
        - showActions: Boolean (défaut: true) - Afficher les boutons d'action
        - showRoles: Boolean (défaut: true) - Afficher les rôles de l'utilisateur
        - clickable: Boolean (défaut: true) - Rendre la carte cliquable
        - outcome: String (optionnel) - Page de destination au clic
        - styleClass: String (optionnel) - Classes CSS supplémentaires
        
        Exemples d'utilisation:
        
        1. Carte simple:
        <ui:include src="/templates/components/user-management/user-card.xhtml">
            <ui:param name="user" value="#{userBean.selectedUser}" />
        </ui:include>
        
        2. Carte avec actions:
        <ui:include src="/templates/components/user-management/user-card.xhtml">
            <ui:param name="user" value="#{userBean.selectedUser}" />
            <ui:param name="showActions" value="true" />
            <ui:param name="outcome" value="/pages/user-manager/users/profile" />
        </ui:include>
        
        3. Carte sans rôles:
        <ui:include src="/templates/components/user-management/user-card.xhtml">
            <ui:param name="user" value="#{userBean.selectedUser}" />
            <ui:param name="showRoles" value="false" />
        </ui:include>
    -->
    
    <c:set var="showActions" value="#{empty showActions ? true : showActions}" />
    <c:set var="showRoles" value="#{empty showRoles ? true : showRoles}" />
    <c:set var="clickable" value="#{empty clickable ? true : clickable}" />
    
    <p:card styleClass="user-card #{styleClass}" rendered="#{not empty user}">
        <f:facet name="header">
            <div class="flex align-items-center gap-2">
                <p:avatar 
                    label="#{user.firstName != null ? user.firstName.substring(0,1) : 'U'}#{user.lastName != null ? user.lastName.substring(0,1) : ''}" 
                    styleClass="user-avatar"
                    size="large" />
                <div class="flex flex-column">
                    <h3 class="m-0">#{user.firstName} #{user.lastName}</h3>
                    <span class="text-color-secondary text-sm">@#{user.username}</span>
                </div>
            </div>
        </f:facet>
        
        <div class="user-card-content">
            <!-- Informations principales -->
            <div class="flex flex-column gap-2 mb-3">
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-envelope text-color-secondary"></i>
                    <span>#{user.email}</span>
                </div>
                
                <c:if test="#{not empty user.telephone}">
                    <div class="flex align-items-center gap-2">
                        <i class="pi pi-phone text-color-secondary"></i>
                        <span>#{user.telephone}</span>
                    </div>
                </c:if>
                
                <!-- Statut -->
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-circle-fill text-color-secondary"></i>
                    <p:tag 
                        value="#{user.statut != null ? user.statut : 'INCONNU'}" 
                        severity="#{user.enabled ? 'success' : 'danger'}" />
                </div>
            </div>
            
            <!-- Rôles -->
            <c:if test="#{showRoles and not empty user.roles}">
                <div class="flex flex-column gap-2 mb-3">
                    <h5 class="m-0">Rôles</h5>
                    <div class="flex flex-wrap gap-1">
                        <c:forEach var="role" items="#{user.roles}">
                            <p:tag value="#{role.name}" severity="info" />
                        </c:forEach>
                    </div>
                </div>
            </c:if>
        </div>
        
        <f:facet name="footer">
            <c:if test="#{showActions}">
                <div class="flex gap-2 justify-content-end">
                    <p:commandButton 
                        icon="pi pi-eye" 
                        title="Voir le profil"
                        styleClass="p-button-text p-button-sm"
                        outcome="#{not empty outcome ? outcome : '/pages/user-manager/users/profile'}"
                        rendered="#{clickable}">
                        <f:param name="userId" value="#{user.id}" />
                    </p:commandButton>
                    
                    <p:commandButton 
                        icon="pi pi-pencil" 
                        title="Modifier"
                        styleClass="p-button-text p-button-sm p-button-warning"
                        outcome="/pages/user-manager/users/edit">
                        <f:param name="userId" value="#{user.id}" />
                    </p:commandButton>
                    
                    <p:commandButton 
                        icon="pi pi-trash" 
                        title="Supprimer"
                        styleClass="p-button-text p-button-sm p-button-danger"
                        onclick="PF('confirmDeleteDialog').show()" />
                </div>
            </c:if>
        </f:facet>
    </p:card>
    
</ui:composition>

