<%
  const shellRoleName =
    (user && user.role && user.role.name && typeof user.role.name === 'object')
      ? (user.role.name?.[user.lang] || '')
      : (user && user.role ? (user.role.name || '') : '');
  const isCommandHome = currentMenu === 'index';
  const shellLocale = i18n.getLocale() === 'en' ? 'en' : 'ar';
  const shellNotificationCount = Math.max(0, Math.floor(Number(user?.notifyCount) || 0));
  const shellNotificationDisplay = shellNotificationCount > 99
    ? '99+'
    : String(shellNotificationCount);
  const shellNotificationLabel = shellNotificationCount > 0
    ? `${i18n.__('notifications.notifications')} (${shellNotificationDisplay})`
    : (shellLocale === 'ar' ? 'لا توجد إشعارات جديدة' : 'No new notifications');
  const shellPageTitle = title ? title : i18n.__('home.home');
  const shellAvatarCandidate = typeof user?.avatar === 'string'
    ? user.avatar.trim()
    : '';
  const shellAvatarUrl = /^\/(?!\/)/.test(shellAvatarCandidate)
    ? shellAvatarCandidate
    : '';
  const shellAdminInitials = String(user?.name || 'KT')
    .trim()
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part.charAt(0))
    .join('')
    .toUpperCase() || 'KT';
%>
<nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme kt-ui kt-shell-navbar kt-app-header kt-enterprise-header <%= isCommandHome ? 'kt-dashboard-command__navbar' : '' %>"
    id="layout-navbar"
    aria-label="<%= shellLocale === 'ar' ? 'رأس تطبيق لوحة التحكم' : 'Dashboard app header' %>"
    data-kt-command-bar
    data-kt-app-header
    data-kt-enterprise-header>
    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none kt-shell-navbar__menu">
        <a class="nav-item nav-link px-0 me-xl-4 kt-shell-icon-button" href="javascript:void(0)"
            role="button" aria-controls="layout-menu" aria-expanded="false"
            aria-label="<%= i18n.getLocale() === 'ar' ? 'القائمة' : 'Menu' %>"
            data-kt-sidebar-toggle>
            <i class="ti ti-menu-2 ti-sm"></i>
        </a>
    </div>

    <div class="navbar-nav-right d-flex align-items-center kt-shell-navbar__content kt-workspace-header"
        id="navbar-collapse"
        data-kt-workspace-header>
        <div class="kt-shell-navbar__context <%= isCommandHome ? '' : 'kt-page-nav-context' %>"
            aria-label="<%= shellPageTitle %>"
            data-kt-workspace-context>
            <% if (isCommandHome) { %>
            <span class="kt-shell-navbar__location-icon kt-dashboard-command__context-icon" aria-hidden="true">
              <i class="ti ti-command"></i>
            </span>
            <span class="kt-shell-navbar__location">
              <span class="kt-shell-navbar__eyebrow">
                <%= shellLocale === 'ar' ? 'مركز القيادة' : 'Command center' %>
              </span>
              <span class="kt-shell-navbar__title"><%= shellPageTitle %></span>
            </span>
            <% } else { %>
            <span class="kt-page-nav-context__accent" aria-hidden="true"></span>
            <span class="kt-page-nav-context__title"><%= shellPageTitle %></span>
            <% } %>
        </div>

        <% if (isCommandHome) { %>
        <div class="kt-dashboard-command__search-shell" data-dashboard-search-shell>
          <label class="kt-dashboard-command__search">
            <i class="ti ti-search" aria-hidden="true"></i>
            <input
              type="search"
              aria-label="<%= shellLocale === 'ar' ? 'البحث في أقسام لوحة التحكم' : 'Search dashboard sections' %>"
              placeholder="<%= shellLocale === 'ar' ? 'ابحث في أقسام لوحة التحكم...' : 'Search dashboard sections...' %>"
              autocomplete="off"
              role="combobox"
              aria-autocomplete="list"
              aria-haspopup="listbox"
              aria-controls="dashboard-command-results"
              aria-expanded="false"
              data-dashboard-search>
            <kbd>⌘ K</kbd>
          </label>
          <section
            class="kt-dashboard-command__search-panel"
            id="dashboard-command-search-panel"
            aria-label="<%= shellLocale === 'ar' ? 'نتائج البحث' : 'Search results' %>"
            data-dashboard-search-panel
            hidden>
            <header class="kt-dashboard-command__search-head">
              <span><%= shellLocale === 'ar' ? 'انتقل مباشرة' : 'Go directly' %></span>
              <small data-dashboard-search-count></small>
            </header>
            <div
              class="kt-dashboard-command__search-results"
              id="dashboard-command-results"
              role="listbox"
              data-dashboard-search-results></div>
            <p class="kt-dashboard-command__search-empty" data-dashboard-search-empty hidden>
              <i class="ti ti-search-off" aria-hidden="true"></i>
              <span><%= shellLocale === 'ar' ? 'لا توجد أقسام مطابقة' : 'No matching sections' %></span>
            </p>
            <footer class="kt-dashboard-command__search-help">
              <span><kbd>↑</kbd><kbd>↓</kbd> <%= shellLocale === 'ar' ? 'للتنقل' : 'Navigate' %></span>
              <span><kbd>↵</kbd> <%= shellLocale === 'ar' ? 'للفتح' : 'Open' %></span>
              <span><kbd>Esc</kbd> <%= shellLocale === 'ar' ? 'للإغلاق' : 'Close' %></span>
            </footer>
          </section>
        </div>
        <% } %>

        <div class="kt-shell-navbar__actions kt-dashboard-command__action-dock" data-kt-workspace-tools>
            <div class="kt-theme-switcher" data-kt-theme-switcher>
              <button
                class="nav-link kt-shell-icon-button kt-theme-switcher__trigger"
                type="button"
                aria-label="<%= shellLocale === 'ar' ? 'اختيار مظهر لوحة التحكم' : 'Choose dashboard theme' %>"
                aria-haspopup="menu"
                aria-expanded="false"
                data-kt-theme-trigger>
                <i class="ti ti-device-desktop" data-kt-theme-icon aria-hidden="true"></i>
                <span class="kt-theme-switcher__chevron-zone" aria-hidden="true">
                  <svg
                    class="kt-theme-switcher__chevron"
                    viewBox="0 0 20 20"
                    width="20"
                    height="20"
                    fill="none"
                    focusable="false">
                    <path
                      d="M5.5 7.5 10 12l4.5-4.5"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round" />
                  </svg>
                </span>
              </button>
              <div
                class="kt-theme-switcher__menu kt-dashboard-command__theme-popover"
                role="menu"
                aria-label="<%= shellLocale === 'ar' ? 'مظهر لوحة التحكم' : 'Dashboard theme' %>"
                data-kt-theme-menu
                hidden>
                <button type="button" role="menuitemradio" aria-checked="false" aria-pressed="false"
                  data-kt-theme-option="light">
                  <i class="ti ti-sun" aria-hidden="true"></i>
                  <span><%= shellLocale === 'ar' ? 'فاتح' : 'Light' %></span>
                  <i class="ti ti-check" data-kt-theme-check aria-hidden="true"></i>
                </button>
                <button type="button" role="menuitemradio" aria-checked="false" aria-pressed="false"
                  data-kt-theme-option="dark">
                  <i class="ti ti-moon-stars" aria-hidden="true"></i>
                  <span><%= shellLocale === 'ar' ? 'داكن' : 'Dark' %></span>
                  <i class="ti ti-check" data-kt-theme-check aria-hidden="true"></i>
                </button>
                <button type="button" role="menuitemradio" aria-checked="true" aria-pressed="true"
                  data-kt-theme-option="system">
                  <i class="ti ti-device-desktop" aria-hidden="true"></i>
                  <span><%= shellLocale === 'ar' ? 'حسب النظام' : 'System' %></span>
                  <i class="ti ti-check" data-kt-theme-check aria-hidden="true"></i>
                </button>
              </div>
            </div>

            <ul class="navbar-nav flex-row align-items-center kt-shell-navbar__account">
            <li class="nav-item kt-shell-notifications" data-kt-notifications>
                <a class="nav-link kt-shell-icon-button kt-shell-notifications__link"
                    href="/dashboard/notifications/showNotifications"
                    aria-label="<%= shellNotificationLabel %>"
                    title="<%= shellNotificationLabel %>"
                    data-kt-notification-link>
                    <i class="ti ti-bell" aria-hidden="true"></i>
                    <% if (shellNotificationCount > 0) { %>
                      <span class="kt-shell-notification-count"
                        data-kt-notification-count
                        aria-hidden="true"><%= shellNotificationDisplay %></span>
                    <% } else { %>
                      <span class="visually-hidden" data-kt-notification-empty>
                        <%= shellNotificationLabel %>
                      </span>
                    <% } %>
                </a>
            </li>

            <li class="nav-item navbar-dropdown dropdown-user dropdown kt-shell-user">
                <a class="nav-link dropdown-toggle hide-arrow kt-shell-user__trigger" href="javascript:void(0);"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                    aria-haspopup="true"
                    aria-label="<%= i18n.__('common.profileAdmin') %>">
                    <span class="kt-shell-user__summary">
                        <strong><%= user.name %></strong>
                        <% if (shellRoleName) { %><small><%= shellRoleName %></small><% } %>
                    </span>
                    <div class="avatar avatar-online kt-shell-user__avatar">
                        <% if (shellAvatarUrl) { %>
                          <img src="<%= shellAvatarUrl %>" alt="<%= user.name %>" class="rounded-circle"
                            data-kt-admin-avatar />
                        <% } %>
                        <span class="avatar-initial rounded-circle kt-shell-avatar-fallback"
                          data-kt-admin-avatar-fallback
                          <%- shellAvatarUrl ? 'hidden' : '' %>
                          aria-hidden="<%= shellAvatarUrl ? 'true' : 'false' %>"><%= shellAdminInitials %></span>
                    </div>
                    <svg class="kt-shell-user__chevron" viewBox="0 0 20 20" width="20" height="20"
                      fill="none" aria-hidden="true" focusable="false">
                      <path d="M5.5 7.5 10 12l4.5-4.5" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </a>

                <ul class="dropdown-menu dropdown-menu-end dropdown-menu-custom kt-shell-user-menu kt-dashboard-command__account-popover"
                    role="menu"
                    aria-label="<%= i18n.__('common.profileAdmin') %>">
                    <li class="kt-shell-user-menu__header" role="presentation">
                        <span class="kt-shell-user-menu__avatar-frame">
                          <% if (shellAvatarUrl) { %>
                            <img src="<%= shellAvatarUrl %>" alt="" class="kt-shell-user-menu__avatar"
                              data-kt-admin-avatar />
                          <% } %>
                          <span class="kt-shell-user-menu__avatar kt-shell-avatar-fallback"
                            data-kt-admin-avatar-fallback
                            <%- shellAvatarUrl ? 'hidden' : '' %>
                            aria-hidden="true"><%= shellAdminInitials %></span>
                        </span>
                        <div class="kt-shell-user-menu__meta">
                            <span class="kt-shell-user-menu__name"><%= user.name %></span>
                            <% if (shellRoleName) { %>
                              <span class="kt-shell-user-role" data-role="<%= (user.role?.key || 'user').toLowerCase() %>">
                                <%= shellRoleName %>
                              </span>
                            <% } %>
                        </div>
                    </li>

                    <li role="none">
                        <a class="kt-shell-user-menu__item" role="menuitem" href="/dashboard/profile/<%= user._id %>">
                            <span class="kt-shell-user-menu__icon" aria-hidden="true">
                              <i class="ti ti-user"></i>
                            </span>
                            <span><%= i18n.__('common.profileAdmin') %></span>
                        </a>
                    </li>

                    <li role="none">
                        <a class="kt-shell-user-menu__item" role="menuitem" href="/dashboard/settings">
                            <span class="kt-shell-user-menu__icon" aria-hidden="true">
                              <i class="ti ti-settings"></i>
                            </span>
                            <span><%= i18n.__('common.settings') %></span>
                        </a>
                    </li>

                    <li class="kt-shell-user-menu__divider" role="separator"></li>

                    <li role="none">
                        <a class="kt-shell-user-menu__item kt-shell-user-menu__item--danger"
                            id="logoutDashboard"
                            href="javascript:void(0);"
                            role="menuitem">
                            <span class="kt-shell-user-menu__icon" aria-hidden="true">
                              <i class="ti ti-logout"></i>
                            </span>
                            <span><%= i18n.__('auth.logoutBtn') %></span>
                        </a>
                    </li>
                </ul>
            </li>

            <!--/ User -->
            </ul>
        </div>
    </div>
</nav>
