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

    <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/secure/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/menu.xhtml" />

            <div class="layout-topbar-right">
                <ul class="layout-topbar-actions">
                    <li class="topbar-item search-item ">
                        <a href="#">
                            <i class="topbar-icon pi pi-search"/>
                        </a>
                        <h:form>
                            <h:panelGroup styleClass="search-input-wrapper">
                                <p:inputText placeholder="Rechercher..." />
                                <i class="pi pi-search"/>
                            </h:panelGroup>
                        </h:form>
                        <ul>
                            <h:form onsubmit="return false;">
                                <h:panelGroup styleClass="search-input-wrapper">
                                    <p:inputText placeholder="Rechercher..." />
                                    <i class="pi pi-search"/>
                                </h:panelGroup>
                            </h:form>
                        </ul>
                    </li>
                    <li class="topbar-item user-profile">
                        <a href="#" title="#{userSession.currentUser.nomComplet}">
                            <div class="flex align-items-center">
                                <div class="bg-primary text-white border-round flex align-items-center justify-content-center mr-2" 
                                     style="width: 32px; height: 32px; font-size: 12px; font-weight: bold;">
                                    #{userSession.currentUser.initiales}
                                </div>
                                <div class="text-sm">
                                    <div class="text-900 font-medium">#{userSession.currentUser.nomComplet}</div>
                                    <div class="text-600 text-xs">#{userSession.typeCompte}</div>
                                </div>
                            </div>
                        </a>
                        <ul>
                            <li>
                                <h:form>
                                    <p:commandLink action="#{navigationBean.goToProfile}">
                                        <i class="pi pi-user mr-2"></i>
                                        <span>Mon Profil</span>
                                    </p:commandLink>
                                </h:form>
                            </li>
                            <li>
                                <h:form>
                                    <p:commandLink action="#{navigationBean.goToSettings}">
                                        <i class="pi pi-cog mr-2"></i>
                                        <span>Paramètres</span>
                                    </p:commandLink>
                                </h:form>
                            </li>
                            <li>
                                <a href="/pages/secure/messages.xhtml">
                                    <i class="pi pi-envelope mr-2"></i>
                                    <span>Messages</span>
                                </a>
                            </li>
                            <li class="border-top-1 surface-border">
                                <div class="p-2 text-xs text-600">
                                    <div>Entité: #{userSession.entite.nom}</div>
                                    <div>Connecté depuis: 
                                        <span class="text-green-600">#{jwtTokenManager.timeUntilExpiration / 60} min</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <h:form>
                                    <p:commandLink action="#{loginBean.logout}" 
                                                  styleClass="text-red-600" 
                                                  onclick="return confirm('Êtes-vous sûr de vouloir vous déconnecter ?');">
                                        <i class="pi pi-sign-out mr-2"></i>
                                        <span>Déconnexion</span>
                                    </p:commandLink>
                                </h:form>
                            </li>
                        </ul>
                    </li>
                 
                </ul>
                <a href="#" class="layout-rightpanel-button">
                    <i class="pi pi-arrow-left"/>
                </a>
            </div>
        </div>
       
    </div>

</ui:composition>