<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">

    <!--
        Composant réutilisable: Topbar (WOU/DRY Pattern)
        
        Auteur: Lions User Manager
        Version: 1.0.0
        Description: Barre supérieure avec logo, menu et profil utilisateur
    -->

    <div class="layout-topbar">
        <div class="layout-topbar-wrapper">
            <div class="layout-topbar-left">
                <a href="#" class="menu-button">
                   <i class="pi pi-bars"/>
                </a>
                <h:link id="logolink" outcome="/pages/user-manager/dashboard" styleClass="layout-topbar-logo">
                    <p:graphicImage name="images/#{guestPreferences.lightLogo ? 'logo-freya-white.svg' : 'logo-freya.svg'}" library="freya-layout" />
                </h:link>
            </div>

            <ui:include src="/templates/components/layout/menu.xhtml" />

            <div class="layout-topbar-right">
                <ul class="layout-topbar-actions">
                    <li class="topbar-item user-profile">
                        <a href="#" class="user-profile-link">
                            <div class="bg-primary text-white border-circle flex align-items-center justify-content-center user-avatar" 
                                 style="width: 36px; height: 36px; font-size: 14px; font-weight: bold; margin-right: 0.75rem;">
                                #{userSessionBean.initials}
                            </div>
                            <span class="user-info">
                                <span class="user-name">
                                    #{userSessionBean.fullName}
                                    <span class="user-status online"></span>
                                    <span class="user-separator">|</span>
                                    <span class="user-role">#{userSessionBean.primaryRole}</span>
                                </span>
                                <span class="user-email">#{userSessionBean.email}</span>
                            </span>
                        </a>
                        <ul class="user-dropdown-menu">
                            <!-- En-tête du menu avec infos utilisateur -->
                            <li class="user-dropdown-header">
                                <div class="user-dropdown-avatar">
                                    <div class="bg-primary text-white border-circle flex align-items-center justify-content-center" 
                                         style="width: 48px; height: 48px; font-size: 20px; font-weight: bold;">
                                        #{userSessionBean.initials}
                                    </div>
                                    <span class="user-status-indicator online"></span>
                                </div>
                                <div class="user-dropdown-info">
                                    <div class="user-dropdown-name text-900 font-semibold">#{userSessionBean.fullName}</div>
                                    <div class="user-dropdown-email text-600 text-sm">#{userSessionBean.email}</div>
                                    <div class="user-dropdown-role text-500 text-xs">#{userSessionBean.primaryRole}</div>
                                </div>
                            </li>

                            <!-- Séparateur -->
                            <li class="user-dropdown-divider"></li>

                            <!-- Actions principales -->
                            <li class="user-dropdown-section">
                                <div class="section-title">Mon Compte</div>
                                <div class="section-items">
                                    <h:link outcome="/pages/user-manager/users/profile" styleClass="dropdown-item">
                                        <i class="pi pi-user"></i>
                                        <span>Mon Profil</span>
                                        <i class="pi pi-angle-right item-arrow"></i>
                                    </h:link>
                                    <h:link outcome="/pages/user-manager/settings" styleClass="dropdown-item">
                                        <i class="pi pi-cog"></i>
                                        <span>Paramètres</span>
                                        <i class="pi pi-angle-right item-arrow"></i>
                                    </h:link>
                                    <a href="#" class="dropdown-item">
                                        <i class="pi pi-shield"></i>
                                        <span>Sécurité</span>
                                        <i class="pi pi-angle-right item-arrow"></i>
                                    </a>
                                </div>
                            </li>

                            <!-- Séparateur -->
                            <li class="user-dropdown-divider"></li>

                            <!-- Actions système -->
                            <li class="user-dropdown-section">
                                <div class="section-items">
                                    <a href="#" class="dropdown-item">
                                        <i class="pi pi-question-circle"></i>
                                        <span>Aide &amp; Support</span>
                                    </a>
                                    <h:form>
                                        <p:commandLink action="#{userSessionBean.logout}" styleClass="dropdown-item logout-item">
                                            <i class="pi pi-sign-out"></i>
                                            <span>Déconnexion</span>
                                        </p:commandLink>
                                    </h:form>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
                <a href="#" class="layout-rightpanel-button">
                    <i class="pi pi-arrow-left"/>
                </a>
            </div>
        </div>
    </div>

</ui:composition>

