<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: En-tête de Page - Écosystème LionsDev
        
        Auteur: Lions User Manager
        Version: 2.0.0
        Description: En-tête de page avec icône, titre, description, fil d'Ariane et actions.
                     Conforme au pattern WOU/DRY pour la cohérence visuelle de l'application.
        
        Paramètres:
        - icon: String (optionnel) - Classe d'icône PrimeIcons (ex: "pi pi-users text-blue-500")
        - title: String (requis) - Titre de la page
        - description: String (optionnel) - Description de la page
        - breadcrumbParent: String (optionnel) - Libellé de la page parente (ex: "Utilisateurs")
        - breadcrumbParentLink: String (optionnel) - Lien de la page parente
        - styleClass: String (optionnel) - Classes CSS supplémentaires
        
        Slot facelet:
        - "actions": Contenu personnalisé pour les boutons d'action à droite
        
        Exemples d'utilisation:
        
        1. En-tête simple:
        <ui:include src="/templates/components/layout/page-header.xhtml">
            <ui:param name="icon" value="pi pi-users text-blue-500" />
            <ui:param name="title" value="Gestion des Utilisateurs" />
            <ui:param name="description" value="Gestion centralisée des utilisateurs Keycloak" />
        </ui:include>
        
        2. En-tête avec fil d'ariane et actions:
        <ui:include src="/templates/components/layout/page-header.xhtml">
            <ui:param name="icon" value="pi pi-user-edit text-green-500" />
            <ui:param name="title" value="Créer un Utilisateur" />
            <ui:param name="description" value="Formulaire de création d'un nouvel utilisateur" />
            <ui:param name="breadcrumbParent" value="Utilisateurs" />
            <ui:param name="breadcrumbParentLink" value="/pages/user-manager/users/list" />
            <ui:define name="actions">
                <p:commandButton value="Exporter" icon="pi pi-download" styleClass="p-button-secondary" />
            </ui:define>
        </ui:include>
    -->

    <div class="grid mb-4">
        <div class="col-12">
            <!-- Fil d'Ariane (Breadcrumb) -->
            <c:if test="#{not empty breadcrumbParent}">
                <div class="flex align-items-center gap-2 mb-2 text-sm">
                    <c:choose>
                        <c:when test="#{not empty breadcrumbParentLink}">
                            <h:link outcome="#{breadcrumbParentLink}"
                                styleClass="text-primary no-underline hover:underline">
                                #{breadcrumbParent}
                            </h:link>
                        </c:when>
                        <c:otherwise>
                            <span class="text-600">#{breadcrumbParent}</span>
                        </c:otherwise>
                    </c:choose>
                    <i class="pi pi-angle-right text-400 text-xs"></i>
                    <span class="text-900 font-medium">#{title}</span>
                </div>
            </c:if>

            <div class="card #{styleClass}">
                <div class="flex align-items-center justify-content-between flex-wrap gap-3">
                    <!-- Partie gauche: Icône + Titre + Description -->
                    <div class="flex align-items-center gap-3">
                        <c:if test="#{not empty icon}">
                            <div class="flex align-items-center justify-content-center surface-100 border-round-lg"
                                style="width: 3rem; height: 3rem;">
                                <i class="#{icon} text-xl"></i>
                            </div>
                        </c:if>
                        <div>
                            <h3 class="m-0 text-900 font-bold">#{title}</h3>
                            <c:if test="#{not empty description}">
                                <p class="text-600 text-sm m-0 mt-1">#{description}</p>
                            </c:if>
                        </div>
                    </div>

                    <!-- Partie droite: Actions -->
                    <div class="flex align-items-center gap-2">
                        <ui:insert name="actions" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</ui:composition>