<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 Rôle (WOU/DRY Pattern)
        
        Auteur: Lions User Manager
        Version: 1.0.0
        Description: Affiche une carte rôle avec informations principales et actions
        
        Paramètres:
        - role: RoleDTO (requis) - Le rôle à afficher
        - showActions: Boolean (défaut: true) - Afficher les boutons d'action
        - showDescription: Boolean (défaut: true) - Afficher la description
        - showCompositeInfo: Boolean (défaut: true) - Afficher les infos de rôle composite
        - 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/role-management/role-card.xhtml">
            <ui:param name="role" value="#{roleBean.selectedRole}" />
        </ui:include>
        
        2. Carte avec actions:
        <ui:include src="/templates/components/role-management/role-card.xhtml">
            <ui:param name="role" value="#{roleBean.selectedRole}" />
            <ui:param name="showActions" value="true" />
            <ui:param name="outcome" value="/pages/user-manager/roles/details" />
        </ui:include>
    -->
    
    <c:set var="showActions" value="#{empty showActions ? true : showActions}" />
    <c:set var="showDescription" value="#{empty showDescription ? true : showDescription}" />
    <c:set var="showCompositeInfo" value="#{empty showCompositeInfo ? true : showCompositeInfo}" />
    <c:set var="clickable" value="#{empty clickable ? true : clickable}" />
    
    <p:card styleClass="role-card #{styleClass}" rendered="#{not empty role}">
        <f:facet name="header">
            <div class="flex align-items-center justify-content-between">
                <div class="flex align-items-center gap-2">
                    <i class="pi pi-shield text-2xl text-primary"></i>
                    <div class="flex flex-column">
                        <h3 class="m-0">#{role.name}</h3>
                        <span class="text-color-secondary text-sm">
                            <c:choose>
                                <c:when test="#{role.typeRole == 'REALM_ROLE'}">Rôle Realm</c:when>
                                <c:when test="#{role.typeRole == 'CLIENT_ROLE'}">Rôle Client</c:when>
                                <c:when test="#{role.typeRole == 'COMPOSITE_ROLE'}">Rôle Composite</c:when>
                                <c:otherwise>Rôle</c:otherwise>
                            </c:choose>
                        </span>
                    </div>
                </div>
                <p:tag 
                    value="#{role.typeRole != null ? role.typeRole : 'ROLE'}" 
                    severity="#{role.typeRole == 'REALM_ROLE' ? 'success' : role.typeRole == 'CLIENT_ROLE' ? 'info' : 'warning'}" />
            </div>
        </f:facet>
        
        <div class="role-card-content">
            <!-- Description -->
            <c:if test="#{showDescription and not empty role.description}">
                <p class="text-color-secondary mb-3">#{role.description}</p>
            </c:if>
            
            <!-- Informations -->
            <div class="flex flex-column gap-2 mb-3">
                <c:if test="#{not empty role.realmName}">
                    <div class="flex align-items-center gap-2">
                        <i class="pi pi-globe text-color-secondary"></i>
                        <span>Realm: <strong>#{role.realmName}</strong></span>
                    </div>
                </c:if>
                
                <c:if test="#{not empty role.clientId}">
                    <div class="flex align-items-center gap-2">
                        <i class="pi pi-desktop text-color-secondary"></i>
                        <span>Client: <strong>#{role.clientId}</strong></span>
                    </div>
                </c:if>
                
                <!-- Rôle composite -->
                <c:if test="#{showCompositeInfo and role.composite}">
                    <div class="flex align-items-center gap-2">
                        <i class="pi pi-sitemap text-color-secondary"></i>
                        <span class="text-warning">Rôle composite</span>
                    </div>
                </c:if>
            </div>
        </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 les détails"
                        styleClass="p-button-text p-button-sm"
                        outcome="#{not empty outcome ? outcome : '/pages/user-manager/roles/details'}"
                        rendered="#{clickable}">
                        <f:param name="roleId" value="#{role.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/roles/edit">
                        <f:param name="roleId" value="#{role.id}" />
                    </p:commandButton>
                    
                    <p:commandButton 
                        icon="pi pi-trash" 
                        title="Supprimer"
                        styleClass="p-button-text p-button-sm p-button-danger"
                        onclick="PF('confirmDeleteRoleDialog').show()" />
                </div>
            </c:if>
        </f:facet>
    </p:card>
    
    <!-- Dialog de confirmation de suppression -->
    <p:confirmDialog 
        id="confirmDeleteRoleDialog"
        widgetVar="confirmDeleteRoleDialog"
        message="Êtes-vous sûr de vouloir supprimer le rôle #{role.name} ?"
        header="Confirmation de suppression"
        severity="warn">
        <p:commandButton 
            value="Oui"
            icon="pi pi-check"
            styleClass="p-button-danger"
            action="#{roleBean.deleteRole(role.id)}"
            update="@form"
            oncomplete="PF('confirmDeleteRoleDialog').hide()" />
        <p:commandButton 
            value="Non"
            icon="pi pi-times"
            styleClass="p-button-secondary"
            onclick="PF('confirmDeleteRoleDialog').hide()" />
    </p:confirmDialog>
    
</ui:composition>

