<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:po="http://primefaces.org/poseidon">


    <div class="layout-topbar">
        <div class="layout-topbar-wrapper">
            <div class="layout-topbar-left">
                <h:form prependId="false">
                    <h:link id="logolink" styleClass="layout-topbar-logo">
                        <p:graphicImage name="images/#{ guestPreferences.topbarTheme == 'light' ? 'logo-poseidon.png' : 'logo-poseidon-dark.png'}" library="poseidon-layout" />
                    </h:link>
                </h:form>
            </div>
            <div class="layout-topbar-right">
                <a href="#" class="menu-button">
                    <i class="pi pi-bars"></i>
                </a>
                <ul class="layout-topbar-actions">
                    <li class="search-item topbar-item">
                        <a href="#">
                            <span class="topbar-icon">
                                <i class="pi pi-search"></i>
                            </span>
                        </a>
                        <h:form onsubmit="return false;">
                            <h:panelGroup styleClass="md-inputfield search-input-wrapper">
                                <p:inputText placeholder="Search..." />
                                <i class="fa fa-search"></i>
                            </h:panelGroup>
                        </h:form>
                        <ul>
                            <h:form onsubmit="return false;">
                                <h:panelGroup styleClass="md-inputfield search-input-wrapper">
                                    <p:inputText placeholder="Search..." />
                                    <i class="fa fa-search"></i>
                                </h:panelGroup>
                            </h:form>
                        </ul>
                    </li>
                    <li class="topbar-item notifications">
                        <a href="#">
                            <span class="ui-overlay-badge topbar-icon">
                                <i class="pi pi-bell"></i>
                                <span class="ui-badge">2</span>
                            </span>
                        </a>
                        <ul >
                            <li class="layout-submenu-header">
                                <h6 class="header-text">Notifications</h6>
                                <span class="ui-badge">3</span>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <i class="pi pi-shopping-cart"></i>
                                    <div class="notifications-item">
                                        <h6>Order <span>#2254</span> is placed</h6>
                                        <span>Total Amount of <span>$34.50</span></span>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <i class="pi pi-clock"></i>
                                    <div class="notifications-item">
                                        <h6>Meeting with <span>AF04</span> Team</h6>
                                        <span>Google Meets</span>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <i class="pi pi-th-large"></i>
                                    <div class="notifications-item">
                                        <h6>Task <span>#41</span> is complete</h6>
                                        <span>9 Remaining Tasks</span>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <i class="pi pi-shopping-cart"></i>
                                    <div class="notifications-item">
                                        <h6>Order <span>#2255</span> is placed</h6>
                                        <span>Total Amount of <span>$40.45</span></span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="topbar-item messages">
                        <a href="#">
                            <span class="ui-overlay-badge topbar-icon">
                                <i class="pi pi-comments"></i>
                                <span class="ui-badge">6</span>
                            </span>
                        </a>
                        <ul >
                            <li class="layout-submenu-header">
                                <h6 class="header-text">Messages</h6>
                                <span class="ui-badge">5</span>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <p:graphicImage name="images/dashboard/leader-1.png" library="demo" />
                                    <div class="messages-item">
                                        <h6>Hey! I sent the sales report</h6>
                                        <span>Dusana Semenov</span>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <p:graphicImage name="images/dashboard/leader-2.png" library="demo" />
                                    <div class="messages-item">
                                        <h6>OK. Let’s meet at 15 pm...</h6>
                                        <span>Edward Lindgren</span>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <p:graphicImage name="images/dashboard/leader-3.png" library="demo" />
                                    <div class="messages-item">
                                        <h6>Presentation is ready</h6>
                                        <span>Noell Blue</span>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <p:graphicImage name="images/dashboard/leader-4.png" library="demo" />
                                    <div class="messages-item">
                                        <h6>Faulty delivery on #959</h6>
                                        <span>Gvozden Boskovsky</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="topbar-item settings">
                        <a href="#">
                            <span class="topbar-icon">
                                <i class="pi pi-cog"></i>
                            </span>
                        </a>
                        <ul >
                            <li class="layout-submenu-header">
                                <h6 class="header-text">Settings</h6>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <i class="pi pi-user"></i>
                                    <div class="settings-item">
                                        <h6>Account Info</h6>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <i class="pi pi-users"></i>
                                    <div class="settings-item">
                                        <h6>Global Accounts</h6>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <i class="pi pi-bell"></i>
                                    <div class="settings-item">
                                        <h6>Notification Preferences</h6>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a tabindex="0">
                                    <i class="pi pi-lock"></i>
                                    <div class="settings-item">
                                        <h6>Login Settings</h6>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="topbar-item user-profile">
                        <a href="#">
                            <p:graphicImage name="images/avatar-profile.png" library="poseidon-layout" />
                            <div class="profile-info">
                                <h6>Peter Taylor</h6>
                                <span>Webmaster</span>
                            </div>
                        </a>
                        <ul>
                            <li class="layout-submenu-header">
                                <p:graphicImage name="images/avatar-profile.png" library="poseidon-layout" />
                                <div class="profile-info">
                                    <h6>Peter Taylor</h6>
                                    <span>Webmaster</span>
                                </div>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="pi pi-cog"></i>
                                    <h6>Setting</h6>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="pi pi-file-o"></i>
                                    <h6>Terms of Usage</h6>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="pi pi-compass"></i>
                                    <h6>Support</h6>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="pi pi-power-off"></i>
                                    <h6>Logout</h6>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <a href="#" class="layout-rightpanel-button">
                    <i class="pi pi-arrow-left"></i>
                </a>
            </div>
        </div>

    </div>

</ui:composition>