<!--
 ~ Copyright 2022 youngmonkeys.org
 ~ 
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~ 
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~ 
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<aside th:fragment="sidebar" class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="/ezyplatform" class="brand-link">
        <img th:src="${ezyplatformLogoUrl != null ? ezyplatformLogoUrl : '/images/ezyplatform-logo.png'}"
             alt="EzyPlatform Logo"
             id="ezyplatformTopLogo"
             class="brand-image img-circle elevation-3"
             style="opacity: .8">
        <span class="brand-text font-weight-light">
            EzyPlatform
            <i class="far fa-arrow-alt-circle-up text-warning"
               th:classappend="${hasNewPlatformVersion ? '' : 'd-none'}"></i>
        </span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
        <!-- Sidebar user panel (optional) -->
        <div th:if="${adminRoles.isAccessible('/admins/me')}"
             class="user-panel mt-3 pb-3 mb-3 d-flex cursor-pointer" onclick="ezyadmin.showProfile();">
            <div class="image" id="mainAdminAvatarContainer"
                 th:classappend="${avatarImage != null ? '' : 'd-none'}">
                <img th:src="${avatarImage != null ? avatarImage.getMeUrlOrDefault('') : '#'}"
                     th:classappend="${avatarImage != null ? '' : 'd-none'}"
                     id="mainAdminAvatar" class="img-circle elevation-2 object-fit-cover" alt="Admin Image">
            </div>
            <div id="mainAdminAvatarTmp"
                 th:classappend="${avatarImage == null ? '' : 'd-none'}">
                <div class="rounded-circle avatar-tmp main-avatar-tmp"
                     th:text="${#strings.capitalize(admin != null ? admin.getName().charAt(0) : 'A')}">
                </div>
            </div>
            <div class="info">
                <a href="/admins/me" class="d-block" th:text="${admin != null ? admin.getName() : ''}">Dzung</a>
            </div>
        </div>

        <!-- Sidebar Menu -->
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column nav-child-indent" data-widget="treeview" role="menu" data-accordion="false">
                <li class="nav-item" th:if="${adminRoles.isAccessible('/dashboard')}">
                    <a class="nav-link" href="/"
                       th:classappend="${currentMenu == 'home'} ? active : ''">
                        <i class="nav-icon fas fa-home"></i>
                        <p>[[#{home}]]</p>
                    </a>
                </li>
                <!-- Add icons to the links using the .nav-icon class
                     with font-awesome or any other icon font library -->
                <li class="nav-item has-treeview"
                    th:classappend="${currentOpen == 'dashboard'} ? 'menu-open' : ''"
                    th:if="${adminRoles.isAccessibleAny({'/dashboard/admin', '/dashboard/web', '/dashboard/socket'})}">
                    <a href="/" class="nav-link"
                       th:classappend="${currentMenu == 'dashboard'} ? active : ''">
                        <i class="nav-icon fas fa-tachometer-alt"></i>
                        <p>
                            [[#{dashboard.title}]]
                            <i class="right fas fa-angle-left"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/dashboard/web')}">
                            <a href="/dashboard/web" class="nav-link"
                               th:classappend="${currentMenu == 'dashboard.web'} ? active : ''">
                                <i class="fab fa-firefox nav-icon"></i>
                                <p>[[#{web}]]</p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/dashboard/socket')}">
                            <a href="/dashboard/socket" class="nav-link"
                               th:classappend="${currentMenu == 'dashboard.socket'} ? active : ''">
                                <i class="fa fa-rocket nav-icon"></i>
                                <p>[[#{socket}]]</p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/dashboard/admin')}">
                            <a href="/dashboard/admin" class="nav-link"
                               th:classappend="${currentMenu == 'dashboard.admin'} ? active : ''">
                                <i class="fa fa-suitcase nav-icon"></i>
                                <p>[[#{admin}]]</p>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item" th:if="${adminRoles.isAccessible('/media')}">
                    <a href="/media" class="nav-link"
                       th:classappend="${currentMenu == 'media'} ? active : ''">
                        <i class="nav-icon far fa-image"></i>
                        <p>[[#{media}]]</p>
                    </a>
                </li>

                <th:block th:replace="~{fragments/menu-items :: menu-items(menus=${topMenus.menus})}"/>

                <li class="nav-header"
                    th:with="componentsTitle=#{components.title}"
                    th:text="${#strings.toUpperCase(componentsTitle)}"
                    th:if="${adminRoles.isAccessibleAny({'/plugins', '/themes', '/socket-apps'})}"></li>
                <li class="nav-item has-treeview"
                    th:classappend="${currentOpen == 'plugins'} ? 'menu-open' : ''"
                    th:if="${adminRoles.isAccessible('/plugins')}">
                    <a href="/plugins" class="nav-link"
                       th:classappend="${currentMenu == 'plugins'} ? active : ''">
                        <i class="nav-icon fas fa-plug"></i>
                        <p>
                            [[#{plugins}]]
                            <i class="fas fa-angle-left right"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/web-plugins')}">
                            <a href="/web-plugins" class="nav-link"
                               th:classappend="${currentMenu == 'plugins.web'} ? active : ''">
                                <i class="fab fa-firefox nav-icon"></i>
                                <p>
                                    [[#{web}]]
                                    <span class="badge badge-info right commas-number-string"
                                          th:text="${totalWebPlugin}" />
                                </p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/socket-plugins')}">
                            <a href="/socket-plugins" class="nav-link"
                               th:classappend="${currentMenu == 'plugins.socket'} ? active : ''">
                                <i class="fa fa-rocket nav-icon"></i>
                                <p>
                                    [[#{socket}]]
                                    <span class="badge badge-info right commas-number-string"
                                          th:text="${totalSocketPlugin}" />
                                </p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/admin-plugins')}">
                            <a href="/admin-plugins" class="nav-link"
                               th:classappend="${currentMenu == 'plugins.admin'} ? active : ''">
                                <i class="fa fa-suitcase nav-icon"></i>
                                <p>
                                    [[#{admin}]]
                                    <span class="badge badge-info right commas-number-string"
                                          th:text="${totalAdminPlugin}" />
                                </p>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item" th:if="${adminRoles.isAccessible('/themes')}">
                    <a href="/themes" class="nav-link"
                       th:classappend="${currentMenu == 'themes'} ? active : ''">
                        <i class="nav-icon fa fa-window-restore"></i>
                        <p>
                            [[#{themes}]]
                            <span class="badge badge-info right commas-number-string"
                                  th:text="${totalTheme}" />
                        </p>
                    </a>
                </li>
                <li class="nav-item" th:if="${adminRoles.isAccessible('/socket-apps')}">
                    <a href="/socket-apps" class="nav-link"
                       th:classappend="${currentMenu == 'socket.apps'} ? active : ''">
                        <i class="nav-icon fa fa-cubes"></i>
                        <p>
                            [[#{socket_apps}]]
                            <span class="badge badge-info right commas-number-string"
                                  th:text="${totalSocketApp}" />
                        </p>
                    </a>
                </li>

                <th:block th:replace="~{fragments/menu-items :: menu-items(menus=${componentsMenus.menus})}"/>

                <li class="nav-header"
                    th:if="${adminRoles.isAccessibleAny({'/admins', '/admin-list'})}"
                    th:with="administratorTitle=#{administrator.title}"
                    th:text="${#strings.toUpperCase(administratorTitle)}"></li>
                <li class="nav-item has-treeview"
                    th:classappend="${currentOpen == 'admins'} ? 'menu-open' : ''">
                    <a href="/admins" class="nav-link"
                       th:if="${adminRoles.isAccessible('/admins')}"
                       th:classappend="${currentMenu == 'admins'} ? active : ''">
                        <i class="nav-icon fa fa-user-circle"></i>
                        <p>
                            [[#{admins}]]
                            <i class="fas fa-angle-left right"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/admins')}">
                            <a href="/admins" class="nav-link"
                               th:classappend="${currentMenu == 'admins.list'} ? active : ''">
                                <i class="fa fa-list nav-icon"></i>
                                <p>
                                    [[#{list}]]
                                    <span class="badge badge-info right commas-number-string"
                                          th:text="${totalAdmin}" />
                                </p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/admins/roles')}">
                            <a href="/admins/roles" class="nav-link"
                               th:classappend="${currentMenu == 'admins.roles'} ? active : ''">
                                <i class="fas fa-users-cog nav-icon"></i>
                                <p>
                                    [[#{roles}]]
                                    <span class="badge badge-info right commas-number-string"
                                          th:text="${totalAdminRoles}" />
                                </p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/admins/add')}">
                            <a href="/admins/add" class="nav-link"
                               th:classappend="${currentMenu == 'admins.add'} ? active : ''">
                                <i class="fa fa-plus-circle nav-icon"></i>
                                <p>[[#{add_new}]]</p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/admins/me')}">
                            <a href="/admins/me" class="nav-link"
                               th:classappend="${currentMenu == 'admins.profile'} ? active : ''">
                                <i class="fa fa-user nav-icon"></i>
                                <p>[[#{profile}]]</p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/admins/inbox')}">
                            <a th:href="${'/admins/inbox'}" class="nav-link"
                               th:classappend="${currentMenu == 'admins.inbox'} ? active : ''">
                                <i class="fas fa-envelope-open-text nav-icon"></i>
                                <p>
                                    [[#{inbox}]]
                                    <span class="badge badge-info right letter-count"></span>
                                </p>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item has-treeview"
                    th:classappend="${currentOpen == 'users'} ? 'menu-open' : ''"
                    th:if="${adminRoles.isAccessible('/users')}">
                    <a href="/users" class="nav-link"
                       th:classappend="${currentMenu == 'users'} ? active : ''">
                        <i class="nav-icon fas fa-users"></i>
                        <p>
                            [[#{users}]]
                            <i class="fas fa-angle-left right"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/users')}">
                            <a href="/users" class="nav-link"
                               th:classappend="${currentMenu == 'users.list'} ? active : ''">
                                <i class="fa fa-list nav-icon"></i>
                                <p>
                                    [[#{list}]]
                                    <span class="badge badge-info right commas-number-string"
                                          th:text="${totalUser}" />
                                </p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/users/roles')}">
                            <a href="/users/roles" class="nav-link"
                               th:classappend="${currentMenu == 'users.roles'} ? active : ''">
                                <i class="fas fa-users-cog nav-icon"></i>
                                <p>
                                    [[#{roles}]]
                                    <span class="badge badge-info right commas-number-string"
                                          th:text="${totalUserRoles}" />
                                </p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/users/add')}">
                            <a href="/users/add" class="nav-link"
                               th:classappend="${currentMenu == 'users.add'} ? active : ''">
                                <i class="fa fa-plus-circle nav-icon"></i>
                                <p>[[#{add_new}]]</p>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item has-treeview"
                    th:classappend="${currentOpen == 'settings'} ? 'menu-open' : ''"
                    th:if="${adminRoles.isAccessible('/settings')}">
                    <a href="/settings" class="nav-link"
                       th:classappend="${currentMenu == 'settings'} ? active : ''">
                        <i class="nav-icon fas fa-tools"></i>
                        <p>
                            [[#{settings}]]
                            <i class="fas fa-angle-left right"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview">
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/settings/regular')}">
                            <a href="/settings/regular" class="nav-link"
                               th:classappend="${currentMenu == 'settings.regular'} ? active : ''">
                                <i class="fas fa-cogs nav-icon"></i>
                                <p>[[#{regular}]]</p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/settings/website')}">
                            <a href="/settings/website" class="nav-link"
                               th:classappend="${currentMenu == 'settings.website'} ? active : ''">
                                <i class="fab fa-firefox nav-icon"></i>
                                <p>[[#{website}]]</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="/settings" class="nav-link"
                               th:classappend="${currentMenu == 'settings.list'} ? active : ''">
                                <i class="fa fa-list nav-icon"></i>
                                <p>
                                    [[#{list}]]
                                    <span class="badge badge-info right commas-number-string"
                                          id="totalSetting"
                                          th:text="${totalSetting}" />
                                </p>
                            </a>
                        </li>
                        <li class="nav-item" th:if="${adminRoles.isAccessible('/settings/encryption')}">
                            <a href="/settings/encryption" class="nav-link"
                               th:classappend="${currentMenu == 'settings.encryption'} ? active : ''">
                                <i class="fas fa-key nav-icon"></i>
                                <p>
                                    [[#{encryption}]]
                                </p>
                            </a>
                        </li>
                    </ul>
                </li>

                <th:block th:replace="~{fragments/menu-items :: menu-items(menus=${administratorMenus.menus})}"/>

                <li th:if="${extensionsMenus.hasMenus()}" class="nav-header"
                    th:with="extensionsTitle=#{extensions.title}"
                    th:text="${#strings.toUpperCase(extensionsTitle)}"></li>

                <th:block th:replace="~{fragments/menu-items :: menu-items(menus=${extensionsMenus.menus})}"/>

                <li class="nav-item has-treeview">
                    <a href="#" class="nav-link" onclick="ezyadmin.logout()">
                        <i class="nav-icon fas fa-sign-out-alt"></i>
                        <p>[[#{logout}]]</p>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
</aside>
</body>

</html>
