src/ApplicationBundle/Resources/views/inc/central_header.html.twig line 1

Open in your IDE?
  1. {# ═══════════════════════════════════════════════════════════════════════════
  2.    Central Header — HoneyBee Ecosystem
  3.    Scandinavian SaaS design · single source of truth for all public pages
  4.    ═══════════════════════════════════════════════════════════════════════════ #}
  5. {% if not include_html is defined %}
  6.     {% set include_html = 1 %}
  7.     {% if app.request.request.get('skipHTML') != '' %}{% set include_html = 0 %}{% endif %}
  8.     {% if app.request.query.get('skipHTML')   != '' %}{% set include_html = 0 %}{% endif %}
  9. {% endif %}
  10. {% if include_html == 1 %}
  11. <!DOCTYPE html>
  12. <html lang="en">
  13. <head>
  14.     <meta charset="UTF-8">
  15.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  16.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  17.     <meta name="description"
  18.           content="{{ og_description is defined ? og_description : 'HoneyBee connects Business ERP, Project ERP, HoneyCore Edge EMS, AI and mobile field operations in one ecosystem — so business, project, finance, site, asset and energy data work together. ERP from €7.99/user/month; HoneyCore Edge+ deployment from €2,999/site.' }}">
  19.     <meta name="keywords"
  20.           content="HoneyBee, project ERP Germany, EPC ERP, ERP for engineering companies, business ERP for SMEs, ERP Singapore, HoneyCore Edge EMS, HoneyCore Edge+ project quotation software, energy infrastructure intelligence, EMS, SCADA business integration, O&amp;M billing software, DATEV-ready ERP, NIS2-aware software governance">
  21.     <meta name="author" content="HoneyBee Ecosystem">
  22.     {% set page_title = page_title|default('HoneyBee Ecosystem') %}
  23.     <title id="pageTitle">{{ page_title }}</title>
  25.     <meta property="og:title" content="{{ og_title       is defined ? og_title       : page_title }}"/>
  26.     <meta property="og:description"
  27.           content="{{ og_description is defined ? og_description : 'HoneyBee — Operating system for EPC companies, system integrators, energy asset owners, and multi-site industrial businesses.' }}"/>
  28.     <meta property="og:image"
  29.           content="{{ og_image       is defined ? (absolute_url(path('dashboard'))~og_image) : (absolute_url(path('dashboard'))~'honeybee_web_assets/icons/honeybeeicon.svg') }}"/>
  30.     {% set _noindex_routes = ['user_login','sign_up','reset_password','verify_email','verify_otp','reset_new_password','honeybee_otp_verification','hb360_my_estimate','hb360_shared_estimate'] %}
  31.     {% if app.request.get('_route') in _noindex_routes %}
  32.         <meta name="robots" content="noindex, nofollow">
  33.     {% else %}
  34.         <meta name="robots" content="index, follow">
  35.     {% endif %}
  37.     {# ── Favicons ──────────────────────────────────────────────────────────── #}
  38.     <link rel="shortcut icon" type="image/x-icon"
  39.           href="{{ asset('favicon.ico') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  40.     <link rel="apple-touch-icon" sizes="180x180"
  41.           href="{{ asset('apple-icon.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  42.     <link rel="icon" type="image/png" sizes="32x32"
  43.           href="{{ asset('favicon-32x32.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  44.     <link rel="icon" type="image/png" sizes="16x16"
  45.           href="{{ asset('favicon-16x16.png') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  46.     <link rel="manifest" href="{{ asset('site.webmanifest') }}">
  47.     <link rel="mask-icon" href="{{ asset('safari-pinned-tab.svg') }}" color="#C07D2A">
  48.     <meta name="msapplication-TileColor" content="#1A1D2E">
  49.     <meta name="theme-color" content="#F7F5F0">
  51.     {# ── Fonts ─────────────────────────────────────────────────────────────── #}
  52.     <link rel="preconnect" href="https://fonts.googleapis.com">
  53.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  54.     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Montserrat:wght@500&display=swap"
  55.           rel="stylesheet">
  56.     {# Material Icons served locally (web/css/iconfont/) — no external CDN, so icons never flicker/break when offline or the CDN is slow #}
  57.     <link rel="stylesheet" href="{{ asset('css/iconfont/material-icons.css') }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  59.     {# ── Core stylesheets ──────────────────────────────────────────────────── #}
  60.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
  61.           integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
  62.           crossorigin="anonymous" referrerpolicy="no-referrer">
  63.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
  64.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  65.     <link rel="stylesheet"
  66.           href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/css/bootstrap-material-datetimepicker.min.css">
  67.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.css">
  68.     <link rel="stylesheet"
  69.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/bootstrap.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  70.     <link rel="stylesheet"
  71.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/style.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  72.     <link rel="stylesheet" id="dark-theme-css"
  73.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/dark.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  74.           disabled="true">
  75.     <link rel="stylesheet"
  76.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/responsive.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  77.     <link rel="stylesheet"
  78.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/central_responsive.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  79.     {# ── CW1 consolidated central-web spine (base=tokens, pages=marketing, admin=shell).
  80.          Replaces the retired temporary_inline.css; loaded last so tokens/utilities
  81.          are available to every central page. ──────────────────────────────────── #}
  82.     <link rel="stylesheet"
  83.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/base.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  84.     <link rel="stylesheet"
  85.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/pages.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  86.     <link rel="stylesheet"
  87.           href="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/css/admin.css?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}">
  89.     {# ── Dev toolbar suppression ───────────────────────────────────────────── #}
  90.     <style>{% if app.session.get('devAdminMode') != 1 %}.sf-toolbar {
  91.             display: none !important
  92.         }{% endif %}</style>
  94.     {# ── Preloader ─────────────────────────────────────────────────────────── #}
  95.     <style>
  96.         #hb-preloader {
  97.             position: fixed;
  98.             top: 0;
  99.             left: 0;
  100.             width: 100%;
  101.             height: 100vh;
  102.             background: #F7F5F0;
  103.             display: flex;
  104.             flex-direction: column;
  105.             justify-content: center;
  106.             align-items: center;
  107.             z-index: 99999;
  108.         }
  110.         .hb-pre-logo {
  111.             display: flex;
  112.             align-items: center;
  113.             gap: 12px;
  114.             margin-bottom: 28px;
  115.         }
  117.         .hb-pre-logo img {
  118.             width: 34px;
  119.             height: 34px;
  120.         }
  122.         .hb-pre-logo span {
  123.             font-family: 'DM Sans', sans-serif;
  124.             font-size: 17px;
  125.             font-weight: 800;
  126.             color: #1A1D2E;
  127.             letter-spacing: -.01em;
  128.         }
  130.         .hb-pre-logo span b {
  131.             color: #C07D2A;
  132.             font-weight: 800;
  133.         }
  135.         .hb-pre-bar-wrap {
  136.             width: 120px;
  137.             height: 2px;
  138.             background: rgba(26, 29, 46, .08);
  139.             border-radius: 2px;
  140.             overflow: hidden;
  141.         }
  143.         .hb-pre-bar {
  144.             height: 100%;
  145.             width: 40%;
  146.             background: #C07D2A;
  147.             border-radius: 2px;
  148.             animation: hb-slide 1.5s ease-in-out infinite;
  149.         }
  151.         @keyframes hb-slide {
  152.             0% {
  153.                 transform: translateX(-100%);
  154.             }
  155.             50% {
  156.                 transform: translateX(250%);
  157.             }
  158.             100% {
  159.                 transform: translateX(-100%);
  160.             }
  161.         }
  162.     </style>
  164.     {# ── Inline JS (runs before body paint) ───────────────────────────────── #}
  165.     <script>
  166.         var logger = (function () {
  167.             var _old = null, pub = {};
  168.             pub.enableLogger = function () {
  169.                 if (_old) window['console']['log'] = _old;
  170.             };
  171.             pub.disableLogger = function () {
  172.                 _old = console.log;
  173.                 window['console']['log'] = function () {
  174.                 };
  175.             };
  176.             return pub;
  177.         }());
  178.         {% if app.session.get('devAdminMode') != 1 %}
  179.         window['console']['log'] = function () {
  180.         };
  181.         {% endif %}
  182.     </script>
  184.     <script>
  185.         function changeTheme(isDark) {
  186.             var darkCss = document.getElementById('dark-theme-css');
  187.             var cb = document.getElementById('theme-toggle-checkbox');
  188.             var track = document.getElementById('hbThemeTrack');
  189.             document.querySelectorAll('img').forEach(function (img) {
  190.                 if (isDark) {
  191.                     img.src = img.src.replace('/honeybee_web_assets/', '/honeybee_web_assets/dark/');
  192.                 } else {
  193.                     img.src = img.src.replace('/honeybee_web_assets/dark/', '/honeybee_web_assets/');
  194.                 }
  195.             });
  196.             if (darkCss) darkCss.disabled = !isDark;
  197.             if (cb) cb.checked = isDark;
  198.             if (track) track.classList.toggle('hb-dark', isDark);
  199.             localStorage.setItem('theme', isDark ? 'dark' : 'light');
  200.         }
  201.     </script>
  203.     <script>if (typeof module === 'object') {
  204.             window.module = module;
  205.             module = undefined;
  206.         }</script>
  208.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"
  209.             integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  210.     <script data-ad-client="ca-pub-8286883017903771" async
  211.             src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  212.     <script>var BaseURL = '{{ url('dashboard') }}';</script>
  213. </head>
  215. {# ── Google Analytics ──────────────────────────────────────────────────────── #}
  216. <script async src="https://www.googletagmanager.com/gtag/js?id=G-V22132YMJ3"></script>
  217. <script>
  218.     window.dataLayer = window.dataLayer || [];
  220.     function gtag() {
  221.         dataLayer.push(arguments);
  222.     }
  224.     gtag('js', new Date());
  225.     gtag('config', 'G-V22132YMJ3');
  226. </script>
  228. {# ── Resolve admin level & consultant flag ────────────────────────────────── #}
  229. {% set BUDDYBEE_ADMIN_LEVEL = 0 %}
  230. {% set isConsultant         = 0 %}
  231. {% if session[UserConstants.USER_ID] is defined %}
  232.     {% set isConsultant         = session[UserConstants.IS_CONSULTANT]        is defined ? session[UserConstants.IS_CONSULTANT]        : 0 %}
  233.     {% set BUDDYBEE_ADMIN_LEVEL = session[UserConstants.BUDDYBEE_ADMIN_LEVEL] is defined ? session[UserConstants.BUDDYBEE_ADMIN_LEVEL] : 0 %}
  234. {% endif %}
  236. {# Single <body> tag — classes set in one place, no duplicate tags #}
  237. {% if BUDDYBEE_ADMIN_LEVEL >= 1 %}
  238. <body class="buddybee_body has_admin_bar body-mask">
  239. {% elseif session[UserConstants.USER_ID] is defined %}
  240. <body class="buddybee_body body-mask">
  241. {% else %}
  242. <body class="body-mask">
  243. {% endif %}
  245. {# ── Preloader ─────────────────────────────────────────────────────────────── #}
  246. <div id="hb-preloader">
  247.     <div class="hb-pre-logo">
  248.         <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/honeybeeicon.svg?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  249.              alt="HoneyBee">
  250.         <span>Honey<b>Bee</b></span>
  251.     </div>
  252.     <div class="hb-pre-bar-wrap">
  253.         <div class="hb-pre-bar"></div>
  254.     </div>
  255. </div>
  257. {# ── Processing overlay (shown during AJAX) ────────────────────────────────── #}
  258. <div id="buddybee_processing_loader">
  259.     <div><p>Processing</p></div>
  260. </div>
  262. {# ══════════════════════════════ NAVBAR ═══════════════════════════════════════
  263.    Scandinavian navbar: glass-morphism, fixed, minimal, fully responsive
  264.    ═══════════════════════════════════════════════════════════════════════════ #}
  265. <style>
  266.     /* ── Design tokens ──────────────────────────────────────────────────────────── */
  267.     :root {
  268.         --hb-ink: #1A1D2E;
  269.         --hb-ink-2: #252840;
  270.         --hb-amber: #C07D2A;
  271.         --hb-amber-lt: #D4954A;
  272.         --hb-muted: #6B6E7F;
  273.         --hb-border: rgba(26, 29, 46, .08);
  274.         --hb-border-md: rgba(26, 29, 46, .14);
  275.         --hb-cream: #F7F5F0;
  276.         --hb-white: #FFFFFF;
  277.         --hb-shadow: 0 2px 20px rgba(26, 29, 46, .07);
  278.         --hb-shadow-lg: 0 8px 32px rgba(26, 29, 46, .10);
  279.         --hb-radius: 10px;
  280.         --hb-font: 'DM Sans', 'Gilroy', system-ui, sans-serif;
  281.     }
  283.     /* ── Navbar shell ─────────────────────────────────────────────────────────── */
  284.     .hb-navbar {
  285.         position: fixed;
  286.         top: 0;
  287.         left: 0;
  288.         right: 0;
  289.         z-index: 9999;
  290.         background: rgba(247, 245, 240, .97);
  291.         backdrop-filter: blur(20px) saturate(180%);
  292.         -webkit-backdrop-filter: blur(20px) saturate(180%);
  293.         border-bottom: 1px solid var(--hb-border);
  294.         transition: box-shadow .2s, border-color .2s;
  295.         font-family: var(--hb-font);
  296.     }
  298.     .hb-navbar.hb-scrolled {
  299.         box-shadow: var(--hb-shadow);
  300.         border-color: var(--hb-border-md);
  301.     }
  303.     /* ── Inner container ──────────────────────────────────────────────────────── */
  304.     .hb-nav-inner {
  305.         max-width: 1280px;
  306.         margin: 0 auto;
  307.         padding: 0 28px;
  308.         height: 64px;
  309.         display: flex;
  310.         align-items: center;
  311.         gap: 24px;
  312.     }
  314.     /* ── Brand ────────────────────────────────────────────────────────────────── */
  315.     .hb-brand {
  316.         display: flex;
  317.         align-items: center;
  318.         gap: 9px;
  319.         text-decoration: none;
  320.         flex-shrink: 0;
  321.     }
  323.     .hb-brand img {
  324.         height: 30px;
  325.         width: auto;
  326.     }
  328.     .hb-brand-name {
  329.         font-size: 15.5px;
  330.         font-weight: 800;
  331.         color: var(--hb-ink);
  332.         letter-spacing: -.01em;
  333.         line-height: 1;
  334.     }
  336.     .hb-brand-name b {
  337.         color: var(--hb-amber);
  338.         font-weight: 800;
  339.     }
  341.     /* ── Nav links ────────────────────────────────────────────────────────────── */
  342.     .hb-links {
  343.         display: flex;
  344.         align-items: center;
  345.         gap: 2px;
  346.         list-style: none;
  347.         margin: 0;
  348.         padding: 0;
  349.         flex: 1;
  350.     }
  352.     .hb-links .hb-link > a,
  353.     .hb-links .hb-drop > a {
  354.         display: inline-flex;
  355.         align-items: center;
  356.         gap: 5px;
  357.         padding: 7px 11px;
  358.         font-size: 13.5px;
  359.         font-weight: 500;
  360.         color: var(--hb-muted);
  361.         text-decoration: none;
  362.         border-radius: 7px;
  363.         white-space: nowrap;
  364.         transition: color .15s, background .15s;
  365.         position: relative;
  366.     }
  368.     .hb-links .hb-link > a:hover,
  369.     .hb-links .hb-drop > a:hover {
  370.         color: var(--hb-ink);
  371.         background: rgba(26, 29, 46, .04);
  372.     }
  374.     .hb-links .hb-link > a.active {
  375.         color: var(--hb-ink);
  376.         font-weight: 600;
  377.     }
  379.     .hb-links .hb-link > a.active::after {
  380.         content: '';
  381.         position: absolute;
  382.         bottom: 2px;
  383.         left: 11px;
  384.         right: 11px;
  385.         height: 1.5px;
  386.         background: var(--hb-amber);
  387.         border-radius: 2px;
  388.     }
  390.     /* ── Dropdown ─────────────────────────────────────────────────────────────── */
  391.     .hb-drop {
  392.         position: relative;
  393.     }
  395.     .hb-caret {
  396.         font-size: 9px;
  397.         opacity: .5;
  398.         transition: transform .2s;
  399.     }
  401.     .hb-drop:hover .hb-caret {
  402.         transform: rotate(180deg);
  403.     }
  405.     .hb-dd-menu {
  406.         position: absolute;
  407.         top: 100%;
  408.         left: 50%;
  409.         transform: translateX(-50%) translateY(0);
  410.         min-width: 195px;
  411.         background: var(--hb-white);
  412.         border: 1px solid var(--hb-border-md);
  413.         border-radius: var(--hb-radius);
  414.         box-shadow: var(--hb-shadow-lg);
  415.         padding: 6px;
  416.         padding-top: 12px; /* gap lives inside → no dead zone */
  417.         opacity: 0;
  418.         pointer-events: none;
  419.         transition: opacity .16s, transform .16s;
  420.         transition-delay: 0s, 0s; /* show instantly */
  421.         list-style: none;
  422.         margin: 0;
  423.         z-index: 10001;
  424.     }
  426.     .hb-drop:hover .hb-dd-menu,
  427.     .hb-dd-menu:hover {
  428.         opacity: 1;
  429.         pointer-events: all;
  430.         transform: translateX(-50%) translateY(0);
  431.     }
  433.     .hb-drop:not(:hover) .hb-dd-menu:not(:hover) {
  434.         transition-delay: .12s;
  435.     }
  437.     /* slight lag on hide */
  438.     .hb-dd-menu li a {
  439.         display: block;
  440.         padding: 8px 12px;
  441.         font-size: 13px;
  442.         font-weight: 500;
  443.         color: var(--hb-muted);
  444.         text-decoration: none;
  445.         border-radius: 6px;
  446.         transition: color .12s, background .12s;
  447.     }
  449.     .hb-dd-menu li a:hover {
  450.         color: var(--hb-ink);
  451.         background: rgba(26, 29, 46, .04);
  452.     }
  454.     .hb-dd-menu li a.active {
  455.         color: var(--hb-ink);
  456.         font-weight: 600;
  457.     }
  459.     .hb-dd-div {
  460.         height: 1px;
  461.         background: var(--hb-border);
  462.         margin: 4px 6px;
  463.     }
  465.     /* ── Right side ───────────────────────────────────────────────────────────── */
  466.     .hb-nav-right {
  467.         display: flex;
  468.         align-items: center;
  469.         gap: 6px;
  470.         flex-shrink: 0;
  471.     }
  473.     /* ── Language switcher ────────────────────────────────────────────────────── */
  474.     .hb-lang {
  475.         position: relative;
  476.     }
  478.     .hb-lang-btn {
  479.         display: flex;
  480.         align-items: center;
  481.         gap: 5px;
  482.         padding: 6px 10px;
  483.         font-size: 12.5px;
  484.         font-weight: 600;
  485.         color: var(--hb-muted);
  486.         background: none;
  487.         border: 1px solid var(--hb-border);
  488.         border-radius: 7px;
  489.         cursor: pointer;
  490.         transition: all .15s;
  491.         font-family: var(--hb-font);
  492.     }
  494.     .hb-lang-btn:hover {
  495.         color: var(--hb-ink);
  496.         border-color: var(--hb-border-md);
  497.         background: rgba(26, 29, 46, .03);
  498.     }
  500.     .hb-lang-menu {
  501.         position: absolute;
  502.         top: 100%;
  503.         right: 0;
  504.         min-width: 155px;
  505.         background: var(--hb-white);
  506.         border: 1px solid var(--hb-border-md);
  507.         border-radius: var(--hb-radius);
  508.         box-shadow: var(--hb-shadow-lg);
  509.         padding: 6px;
  510.         padding-top: 10px; /* gap lives inside → no dead zone */
  511.         opacity: 0;
  512.         pointer-events: none;
  513.         transform: translateY(0);
  514.         transition: opacity .15s;
  515.         z-index: 10001;
  516.         list-style: none;
  517.         margin: 0;
  518.     }
  520.     .hb-lang:hover .hb-lang-menu,
  521.     .hb-lang-menu:hover {
  522.         opacity: 1;
  523.         pointer-events: all;
  524.     }
  526.     .hb-lang:not(:hover) .hb-lang-menu:not(:hover) {
  527.         transition-delay: .12s;
  528.     }
  530.     .hb-lang-menu li a {
  531.         display: block;
  532.         padding: 7px 12px;
  533.         font-size: 13px;
  534.         font-weight: 500;
  535.         color: var(--hb-muted);
  536.         text-decoration: none;
  537.         border-radius: 6px;
  538.         transition: all .12s;
  539.     }
  541.     .hb-lang-menu li a:hover {
  542.         color: var(--hb-ink);
  543.         background: rgba(26, 29, 46, .04);
  544.     }
  546.     /* ── User dropdown ────────────────────────────────────────────────────────── */
  547.     .hb-user {
  548.         position: relative;
  549.     }
  551.     .hb-user-btn {
  552.         display: flex;
  553.         align-items: center;
  554.         gap: 7px;
  555.         background: none;
  556.         border: none;
  557.         cursor: pointer;
  558.         padding: 4px 6px;
  559.         border-radius: 8px;
  560.         transition: background .15s;
  561.     }
  563.     .hb-user-btn:hover {
  564.         background: rgba(26, 29, 46, .05);
  565.     }
  567.     .hb-user-avatar {
  568.         width: 30px;
  569.         height: 30px;
  570.         border-radius: 50%;
  571.         background-size: cover !important;
  572.         background-position: center !important;
  573.         border: 1.5px solid var(--hb-border-md);
  574.         flex-shrink: 0;
  575.     }
  577.     .hb-user-name {
  578.         font-size: 13px;
  579.         font-weight: 600;
  580.         color: var(--hb-ink);
  581.         max-width: 110px;
  582.         white-space: nowrap;
  583.         overflow: hidden;
  584.         text-overflow: ellipsis;
  585.     }
  587.     .hb-user-menu {
  588.         position: absolute;
  589.         top: 100%;
  590.         right: 0;
  591.         min-width: 185px;
  592.         background: var(--hb-white);
  593.         border: 1px solid var(--hb-border-md);
  594.         border-radius: var(--hb-radius);
  595.         box-shadow: var(--hb-shadow-lg);
  596.         padding: 6px;
  597.         padding-top: 12px; /* gap lives inside → no dead zone */
  598.         opacity: 0;
  599.         pointer-events: none;
  600.         transform: translateY(0);
  601.         transition: opacity .15s;
  602.         z-index: 10001;
  603.         list-style: none;
  604.         margin: 0;
  605.     }
  607.     .hb-user:hover .hb-user-menu {
  608.         opacity: 1;
  609.         pointer-events: all;
  610.     }
  612.     .hb-user:not(:hover) .hb-user-menu:not(:hover) {
  613.         transition-delay: .12s;
  614.     }
  616.     .hb-user-menu li a {
  617.         display: flex;
  618.         align-items: center;
  619.         gap: 8px;
  620.         padding: 8px 12px;
  621.         font-size: 13px;
  622.         font-weight: 500;
  623.         color: var(--hb-muted);
  624.         text-decoration: none;
  625.         border-radius: 6px;
  626.         transition: all .12s;
  627.     }
  629.     .hb-user-menu li a:hover {
  630.         color: var(--hb-ink);
  631.         background: rgba(26, 29, 46, .04);
  632.     }
  634.     .hb-user-menu li a i {
  635.         font-size: 12px;
  636.         width: 14px;
  637.         opacity: .5;
  638.     }
  640.     .hb-u-div {
  641.         height: 1px;
  642.         background: var(--hb-border);
  643.         margin: 4px 6px;
  644.     }
  646.     /* ── Auth + Companies buttons ─────────────────────────────────────────────── */
  647.     .hb-btn-login {
  648.         padding: 7px 16px;
  649.         font-size: 13px;
  650.         font-weight: 600;
  651.         color: var(--hb-ink);
  652.         background: none;
  653.         border: 1.5px solid var(--hb-border-md);
  654.         border-radius: 8px;
  655.         text-decoration: none;
  656.         transition: all .15s;
  657.     }
  659.     .hb-btn-login:hover {
  660.         color: var(--hb-ink);
  661.         border-color: var(--hb-ink);
  662.         background: rgba(26, 29, 46, .03);
  663.     }
  665.     .hb-btn-signup {
  666.         padding: 7px 16px;
  667.         font-size: 13px;
  668.         font-weight: 700;
  669.         color: #fff;
  670.         background: var(--hb-ink);
  671.         border: 1.5px solid transparent;
  672.         border-radius: 8px;
  673.         text-decoration: none;
  674.         transition: all .15s;
  675.     }
  677.     .hb-btn-signup:hover {
  678.         color: #fff;
  679.         background: var(--hb-ink-2);
  680.         box-shadow: 0 4px 14px rgba(26, 29, 46, .2);
  681.     }
  683.     .hb-btn-companies {
  684.         display: inline-flex;
  685.         align-items: center;
  686.         gap: 6px;
  687.         padding: 7px 15px;
  688.         font-size: 13px;
  689.         font-weight: 700;
  690.         color: #fff;
  691.         background: var(--hb-amber);
  692.         border: none;
  693.         border-radius: 8px;
  694.         text-decoration: none;
  695.         transition: all .15s;
  696.     }
  698.     .hb-btn-companies:hover {
  699.         color: #fff;
  700.         background: var(--hb-amber-lt);
  701.         box-shadow: 0 4px 14px rgba(192, 125, 42, .28);
  702.     }
  704.     /* ── Switch-user panel (admin only) ──────────────────────────────────────── */
  705.     .hb-switch {
  706.         position: relative;
  707.     }
  709.     .hb-switch-btn {
  710.         padding: 6px 11px;
  711.         font-size: 12px;
  712.         font-weight: 600;
  713.         color: var(--hb-muted);
  714.         background: none;
  715.         border: 1px solid var(--hb-border);
  716.         border-radius: 7px;
  717.         cursor: pointer;
  718.         font-family: var(--hb-font);
  719.         transition: all .15s;
  720.     }
  722.     .hb-switch-btn:hover {
  723.         color: var(--hb-ink);
  724.         border-color: var(--hb-border-md);
  725.     }
  727.     .hb-switch-panel {
  728.         position: absolute;
  729.         top: 100%;
  730.         right: 0;
  731.         min-width: 225px;
  732.         background: var(--hb-white);
  733.         border: 1px solid var(--hb-border-md);
  734.         border-radius: var(--hb-radius);
  735.         box-shadow: var(--hb-shadow-lg);
  736.         padding: 10px;
  737.         padding-top: 14px; /* gap lives inside → no dead zone */
  738.         opacity: 0;
  739.         pointer-events: none;
  740.         transform: translateY(0);
  741.         transition: opacity .15s;
  742.         z-index: 10001;
  743.         list-style: none;
  744.         margin: 0;
  745.     }
  747.     .hb-switch:hover .hb-switch-panel {
  748.         opacity: 1;
  749.         pointer-events: all;
  750.     }
  752.     .hb-switch:not(:hover) .hb-switch-panel:not(:hover) {
  753.         transition-delay: .12s;
  754.     }
  756.     .hb-switch-panel li a {
  757.         display: block;
  758.         padding: 8px 10px;
  759.         font-size: 13px;
  760.         font-weight: 500;
  761.         color: var(--hb-muted);
  762.         text-decoration: none;
  763.         border-radius: 6px;
  764.         transition: all .12s;
  765.     }
  767.     .hb-switch-panel li a:hover {
  768.         color: var(--hb-ink);
  769.         background: rgba(26, 29, 46, .04);
  770.     }
  772.     .hb-sw-div {
  773.         height: 1px;
  774.         background: var(--hb-border);
  775.         margin: 6px 0;
  776.     }
  778.     .hb-switch-panel select {
  779.         width: 100%;
  780.         font-size: 12px;
  781.         font-family: var(--hb-font);
  782.         border: 1px solid var(--hb-border-md);
  783.         border-radius: 6px;
  784.         padding: 6px 8px;
  785.         color: var(--hb-ink);
  786.         background: var(--hb-cream);
  787.     }
  789.     /* ── Theme toggle ─────────────────────────────────────────────────────────── */
  790.     .hb-theme {
  791.         display: flex;
  792.         align-items: center;
  793.         gap: 6px;
  794.         padding: 0 2px;
  795.     }
  797.     .hb-theme-img {
  798.         width: 14px;
  799.         height: 14px;
  800.         opacity: .45;
  801.         display: block;
  802.     }
  804.     #theme-toggle-checkbox {
  805.         display: none;
  806.     }
  808.     .hb-theme-track {
  809.         position: relative;
  810.         width: 34px;
  811.         height: 19px;
  812.         background: rgba(26, 29, 46, .14);
  813.         border-radius: 10px;
  814.         cursor: pointer;
  815.         transition: background .2s;
  816.         flex-shrink: 0;
  817.         display: block;
  818.     }
  820.     .hb-theme-track::after {
  821.         content: '';
  822.         position: absolute;
  823.         top: 2px;
  824.         left: 2px;
  825.         width: 15px;
  826.         height: 15px;
  827.         background: white;
  828.         border-radius: 50%;
  829.         box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  830.         transition: transform .2s;
  831.     }
  833.     .hb-theme-track.hb-dark {
  834.         background: var(--hb-amber);
  835.     }
  837.     .hb-theme-track.hb-dark::after {
  838.         transform: translateX(15px);
  839.     }
  841.     /* ── Mobile hamburger ─────────────────────────────────────────────────────── */
  842.     .hb-toggler {
  843.         display: none;
  844.         background: none;
  845.         border: none;
  846.         cursor: pointer;
  847.         padding: 8px;
  848.         flex-direction: column;
  849.         gap: 5px;
  850.         border-radius: 7px;
  851.         margin-left: auto;
  852.         flex-shrink: 0;
  853.         transition: background .15s;
  854.     }
  856.     .hb-toggler:hover {
  857.         background: rgba(26, 29, 46, .06);
  858.     }
  860.     .hb-toggler span {
  861.         display: block;
  862.         width: 21px;
  863.         height: 1.5px;
  864.         background: var(--hb-ink);
  865.         border-radius: 2px;
  866.         transition: all .22s;
  867.     }
  869.     .hb-toggler.hb-open span:nth-child(1) {
  870.         transform: rotate(45deg) translate(4.5px, 4.5px);
  871.     }
  873.     .hb-toggler.hb-open span:nth-child(2) {
  874.         opacity: 0;
  875.         transform: scaleX(0);
  876.     }
  878.     .hb-toggler.hb-open span:nth-child(3) {
  879.         transform: rotate(-45deg) translate(4.5px, -4.5px);
  880.     }
  882.     /* ── Responsive ───────────────────────────────────────────────────────────── */
  883.     @media (max-width: 1024px) {
  884.         .hb-toggler {
  885.             display: flex;
  886.         }
  888.         .hb-links, .hb-nav-right {
  889.             display: none;
  890.         }
  892.         .hb-nav-inner {
  893.             height: 56px;
  894.         }
  896.         .hb-navbar.hb-open .hb-nav-inner {
  897.             height: auto;
  898.             flex-wrap: wrap;
  899.             padding-top: 12px;
  900.             padding-bottom: 14px;
  901.             align-items: flex-start;
  902.         }
  904.         .hb-navbar.hb-open .hb-links {
  905.             display: flex;
  906.             flex-direction: column;
  907.             align-items: flex-start;
  908.             width: 100%;
  909.             flex: 0 0 100%;
  910.             gap: 2px; /* flex: 0 0 100% overrides base flex:1 to force row wrap */
  911.         }
  913.         .hb-navbar.hb-open .hb-links .hb-link,
  914.         .hb-navbar.hb-open .hb-links .hb-drop {
  915.             width: 100%;
  916.         }
  918.         .hb-navbar.hb-open .hb-links .hb-link > a,
  919.         .hb-navbar.hb-open .hb-links .hb-drop > a {
  920.             width: 100%;
  921.             justify-content: space-between;
  922.         }
  924.         .hb-navbar.hb-open .hb-dd-menu {
  925.             position: static;
  926.             transform: none;
  927.             opacity: 0;
  928.             pointer-events: none;
  929.             display: none;
  930.             box-shadow: none;
  931.             border: none;
  932.             background: rgba(26, 29, 46, .03);
  933.             border-radius: 7px;
  934.             margin: 2px 0 2px 12px;
  935.         }
  937.         .hb-navbar.hb-open .hb-drop.hb-mob-open .hb-dd-menu {
  938.             display: block;
  939.             opacity: 1;
  940.             pointer-events: all;
  941.         }
  943.         .hb-navbar.hb-open .hb-nav-right {
  944.             display: flex;
  945.             flex-wrap: wrap;
  946.             width: 100%;
  947.             flex: 0 0 100%;
  948.             gap: 8px;
  949.             padding-top: 12px;
  950.             border-top: 1px solid var(--hb-border);
  951.             margin-top: 4px;
  952.         }
  953.     }
  955.     /* ── Body offset for fixed navbar ─────────────────────────────────────────── */
  956.     body {
  957.         padding-top: 64px;
  958.     }
  960.     @media (max-width: 1024px) {
  961.         body {
  962.             padding-top: 56px;
  963.         }
  964.     }
  966.     /* ── Processing loader ────────────────────────────────────────────────────── */
  967.     #buddybee_processing_loader {
  968.         position: fixed;
  969.         inset: 0;
  970.         background: rgba(247, 245, 240, .88);
  971.         backdrop-filter: blur(4px);
  972.         z-index: 999999;
  973.         display: none;
  974.         align-items: center;
  975.         justify-content: center;
  976.     }
  978.     #buddybee_processing_loader div {
  979.         background: var(--hb-white);
  980.         border-radius: 14px;
  981.         padding: 28px 44px;
  982.         box-shadow: 0 12px 40px rgba(26, 29, 46, .12);
  983.         text-align: center;
  984.     }
  986.     #buddybee_processing_loader p {
  987.         color: var(--hb-ink);
  988.         font-weight: 700;
  989.         font-size: 12px;
  990.         letter-spacing: .1em;
  991.         text-transform: uppercase;
  992.         margin: 0;
  993.         font-family: var(--hb-font);
  994.     }
  996.     a:hover {
  997.         text-decoration: none;
  998.     }
  999. </style>
  1001. <nav class="hb-navbar" id="hbNavbar">
  1002.     <div class="hb-nav-inner">
  1004.         {# Brand #}
  1005.         <a class="hb-brand" href="{{ url('dashboard') }}">
  1006.             <img src="{{ absolute_url(path('dashboard')) }}honeybee_web_assets/icons/honeybeeicon.svg?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}"
  1007.                  alt="HoneyBee">
  1008.             <span class="hb-brand-name">Honey<b>Bee</b></span>
  1009.         </a>
  1011.         {# Mobile hamburger #}
  1012.         <button class="hb-toggler" id="hbToggler" aria-label="Open menu" type="button">
  1013.             <span></span><span></span><span></span>
  1014.         </button>
  1016.         {# Primary navigation #}
  1017.         <ul class="hb-links">
  1018.             <li class="hb-drop">
  1019.                 <a href="#">Platform <i class="fa-solid fa-chevron-down hb-caret"></i></a>
  1020.                 <ul class="hb-dd-menu">
  1021.                     <li><a href="{{ url('honeybee_product') }}"
  1022.                            class="{{ app.request.get('_route') == 'honeybee_product' ? 'active' : '' }}">Platform overview</a></li>
  1023.                     <li><a href="{{ url('honeybee_project_erp') }}"
  1024.                            class="{{ app.request.get('_route') == 'honeybee_project_erp' ? 'active' : '' }}">Project ERP</a></li>
  1025.                     <li><a href="{{ url('honeybee_business_erp') }}"
  1026.                            class="{{ app.request.get('_route') == 'honeybee_business_erp' ? 'active' : '' }}">Business ERP</a></li>
  1027.                     <li><a href="{{ url('honeybee_edge') }}"
  1028.                            class="{{ app.request.get('_route') == 'honeybee_edge' ? 'active' : '' }}">HoneyCore Edge EMS</a></li>
  1029.                     <li><a href="{{ url('honeybee_edge_projects') }}"
  1030.                            class="{{ app.request.get('_route') == 'honeybee_edge_projects' ? 'active' : '' }}">HoneyCore Edge+ Projects</a></li>
  1031.                 </ul>
  1032.             </li>
  1033.             <li class="hb-link">
  1034.                 <a href="{{ url('honeybee_solutions') }}"
  1035.                    class="{{ app.request.get('_route') == 'honeybee_solutions' ? 'active' : '' }}">Solutions</a>
  1036.             </li>
  1037.             <li class="hb-drop">
  1038.                 <a href="#">Tools <i class="fa-solid fa-chevron-down hb-caret"></i></a>
  1039.                 <ul class="hb-dd-menu">
  1040.                     <li><a href="{{ url('honeybee_tool', {'slug': 'rooftop-estimate'}) }}"
  1041.                            class="{{ app.request.get('slug') == 'rooftop-estimate' ? 'active' : '' }}">Instant Solar Estimate</a></li>
  1042.                     {% if app.session.get('userType') == 8 %}
  1043.                     <li><a href="{{ url('hb360_my_estimate') }}"
  1044.                            class="{{ app.request.get('_route') == 'hb360_my_estimate' ? 'active' : '' }}">My Solar Estimates</a></li>
  1045.                     {% endif %}
  1046.                     <li><a href="{{ url('honeybee_tool', {'slug': 'cost-leakage-calculator'}) }}"
  1047.                            class="{{ app.request.get('slug') == 'cost-leakage-calculator' ? 'active' : '' }}">Project Cost Leakage Calculator</a></li>
  1048.                     <li><a href="{{ url('honeybee_tool', {'slug': 'roi-calculator'}) }}"
  1049.                            class="{{ app.request.get('slug') == 'roi-calculator' ? 'active' : '' }}">ERP ROI Calculator</a></li>
  1050.                     <li><a href="{{ url('honeybee_tool', {'slug': 'site-assessment-estimator'}) }}"
  1051.                            class="{{ app.request.get('slug') == 'site-assessment-estimator' ? 'active' : '' }}">HoneyCore Site Assessment Estimator</a></li>
  1052.                 </ul>
  1053.             </li>
  1054.             <li class="hb-link">
  1055.                 <a href="{{ url('honeybee_pricing') }}"
  1056.                    class="{{ app.request.get('_route') == 'honeybee_pricing' ? 'active' : '' }} trn"
  1057.                    data-trn-key="_PRICING_">Pricing</a>
  1058.             </li>
  1059.             <li class="hb-link">
  1060.                 <a href="{{ url('honeybee_partners') }}"
  1061.                    class="{{ app.request.get('_route') == 'honeybee_partners' ? 'active' : '' }}">Partners</a>
  1062.             </li>
  1063.             <li class="hb-link">
  1064.                 <a href="{{ url('honeybee_trust') }}"
  1065.                    class="{{ app.request.get('_route') == 'honeybee_trust' ? 'active' : '' }}">Trust</a>
  1066.             </li>
  1067.             <li class="hb-drop">
  1068.                 <a href="#">Company <i class="fa-solid fa-chevron-down hb-caret"></i></a>
  1069.                 <ul class="hb-dd-menu">
  1070.                     <li><a href="{{ url('honeybee_about_us') }}"
  1071.                            class="{{ app.request.get('_route') == 'honeybee_about_us' ? 'active' : '' }}">About</a></li>
  1072.                     <li><a href="{{ url('honeybee_experience') }}"
  1073.                            class="{{ app.request.get('_route') == 'honeybee_experience' ? 'active' : '' }}">Experience</a></li>
  1074.                     <li><a href="{{ url('honeybee_investor') }}"
  1075.                            class="{{ app.request.get('_route') == 'honeybee_investor' ? 'active' : '' }}">Investor Snapshot</a></li>
  1076.                     <li><a href="{{ url('honeybee_FAQ') }}"
  1077.                            class="{{ app.request.get('_route') == 'honeybee_FAQ' ? 'active' : '' }}">FAQ</a></li>
  1078.                     <li><a href="{{ url('honeybee_contact') }}"
  1079.                            class="{{ app.request.get('_route') == 'honeybee_contact' ? 'active' : '' }}">Contact</a>
  1080.                     </li>
  1081.                 </ul>
  1082.             </li>
  1083.         </ul>
  1085.         {# Right-side controls #}
  1086.         <div class="hb-nav-right">
  1088.             {# Language switcher #}
  1089.             <div class="hb-lang">
  1090.                 <button class="hb-lang-btn" type="button">
  1091.                     <i class="fa-solid fa-globe" style="font-size:12px"></i>
  1092.                     <span class="curr_locale_text">en</span>
  1093.                     <i class="fa-solid fa-chevron-down" style="font-size:8px;opacity:.5"></i>
  1094.                 </button>
  1095.                 <ul class="hb-lang-menu">
  1096.                     <li><a href="#" class="locale_changer en" data-locale="en">🇬🇧 English</a></li>
  1097.                     <li><a href="#" class="locale_changer bn" data-locale="bn">🇧🇩 বাংলা</a></li>
  1098.                     <li><a href="#" class="locale_changer it" data-locale="it">🇮🇹 Italiano</a></li>
  1099.                     <li><a href="#" class="locale_changer de" data-locale="de">🇩🇪 Deutsch</a></li>
  1100.                     <li><a href="#" class="locale_changer fr" data-locale="fr">🇫🇷 Français</a></li>
  1101.                     <li><a href="#" class="locale_changer sp" data-locale="sp">🇪🇸 Español</a></li>
  1102.                     <li><a href="#" class="locale_changer cn" data-locale="cn">🇨🇳 中文</a></li>
  1103.                 </ul>
  1104.             </div>
  1106.             {# Admin only: switch user #}
  1107.             {% if session[UserConstants.USER_ID] is defined and (BUDDYBEE_ADMIN_LEVEL >= 1 or session['actualUserIsAdmin'] is defined) %}
  1108.                 <div class="hb-switch">
  1109.                     <button class="hb-switch-btn" type="button">Switch User</button>
  1110.                     <ul class="hb-switch-panel">
  1111.                         <li>
  1112.                             <a href="{{ absolute_url(path('view_as_user_central')) }}/{{ session['actualUserId'] is defined ? session['actualUserId'] : session['userId'] }}">
  1113.                                 ↩ Back to Mine
  1114.                             </a>
  1115.                         </li>
  1116.                         <li class="hb-sw-div"></li>
  1117.                         <li style="padding:2px 0"><select name="viewAsId" id="viewAsId"></select></li>
  1118.                     </ul>
  1119.                 </div>
  1120.             {% endif %}
  1122.             {% if session[UserConstants.USER_ID] is defined %}
  1124.                 {# Authenticated: user avatar + dropdown #}
  1125.                 <div class="hb-user">
  1126.                     <button class="hb-user-btn" type="button">
  1127.                         <div class="hb-user-avatar"
  1128.                                 {% if session[UserConstants.USER_IMAGE] != '' and session[UserConstants.USER_IMAGE] is not null %}
  1129.                                     style="background:url('{{ url('dashboard') }}{{ session[UserConstants.USER_IMAGE] }}?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}')"
  1130.                                 {% else %}
  1131.                                     style="background:url('{{ url('dashboard') }}honeybee_web_assets/images/profiles/profile.png?v={{ constant('ApplicationBundle\\Constants\\GeneralConstant::ENTITY_APP_VERSION') }}')"
  1132.                                 {% endif %}
  1133.                         ></div>
  1134.                         <span class="hb-user-name">{{ session[UserConstants.USER_NAME] }}</span>
  1135.                         <i class="fa-solid fa-chevron-down" style="font-size:9px;color:var(--hb-muted);opacity:.55"></i>
  1136.                     </button>
  1137.                     <ul class="hb-user-menu">
  1138.                         <li>
  1139.                             <a href="{{ url('honeybee_my_freelancer_profile') }}"
  1140.                                class="{{ app.request.get('_route') == 'honeybee_my_freelancer_profile' ? 'active' : '' }}">
  1141.                                 <i class="fa-regular fa-circle-user"></i> Profile
  1142.                             </a>
  1143.                         </li>
  1144.                         <li>
  1145.                             <a href="{{ url('ticket_list') }}"
  1146.                                class="{{ app.request.get('_route') == 'ticket_list' ? 'active' : '' }}">
  1147.                                 <i class="fa-regular fa-ticket"></i> <span class="trn" data-trn-key="_MY_TICKETS_">My Tickets</span>
  1148.                             </a>
  1149.                         </li>
  1150.                         <li>
  1151.                             <a href="{{ url('central_landing') }}"
  1152.                                class="{{ app.request.get('_route') == 'central_landing' ? 'active' : '' }}">
  1153.                                 <i class="fas fa-border-all"></i> <span class="trn" data-trn-key="_MY_COMPANIES_">My Companies</span>
  1154.                             </a>
  1155.                         </li>
  1156.                         {% if BUDDYBEE_ADMIN_LEVEL >= 1 %}
  1157.                             <li class="hb-u-div"></li>
  1158.                             <li>
  1159.                                 <a href="{{ url('super_admin_command_center') }}"
  1160.                                    class="{{ app.request.get('_route') == 'super_admin_command_center' ? 'active' : '' }}">
  1161.                                     <i class="fa-solid fa-gauge-high"></i> Super Admin
  1162.                                 </a>
  1163.                             </li>
  1164.                             <li class="hb-u-div"></li>
  1165.                             <li>
  1166.                                 <a href="{{ url('datev_home') }}"
  1167.                                    class="{{ app.request.get('_route') == 'datev_home' ? 'active' : '' }}">
  1168.                                     <i class="fa-solid fa-gauge-high"></i> Datev Control
  1169.                                 </a>
  1170.                             </li>
  1172.                         {% endif %}
  1173.                         {% if BUDDYBEE_ADMIN_LEVEL > 1 %}
  1174.                             <li class="hb-u-div"></li>
  1175.                             <li>
  1176.                                 <a href="{{ url('admin_demo_pending_list') }}"
  1177.                                    class="{{ app.request.get('_route') in ['admin_demo_pending_list','admin_demo_request_detail'] ? 'active' : '' }}">
  1178.                                     <i class="fa-solid fa-calendar-check"></i> Demo Requests
  1179.                                 </a>
  1180.                             </li>
  1181.                             <li>
  1182.                                 <a href="{{ url('admin_demo_all_list') }}"
  1183.                                    class="{{ app.request.get('_route') == 'admin_demo_all_list' ? 'active' : '' }}">
  1184.                                     <i class="fa-solid fa-list-check"></i> All Bookings
  1185.                                 </a>
  1186.                             </li>
  1187.                         {% endif %}
  1188.                         <li class="hb-u-div"></li>
  1189.                         <li>
  1190.                             <a href="{{ url('user_logout') }}" style="color:#B04030">
  1191.                                 <i class="fa-solid fa-right-from-bracket"></i> Logout
  1192.                             </a>
  1193.                         </li>
  1194.                     </ul>
  1195.                 </div>
  1197.                 {# Companies shortcut #}
  1198.                 <a href="{{ url('central_landing') }}" class="hb-btn-companies trn" data-trn-key="_COMPANIES_">
  1199.                     <i class="fa-solid fa-building" style="font-size:11px"></i>
  1200.                     <span>Companies</span>
  1201.                 </a>
  1203.                 {# Book Demo CTA (authenticated) #}
  1204.                 <a href="{{ url('honeybee_contact') }}" class="hb-btn-companies" style="background:var(--hb-amber)">Book
  1205.                     Demo</a>
  1207.             {% else %}
  1209.                 {# Guest: login + get started + book demo #}
  1210.                 <a href="{{ url('user_login') }}" class="hb-btn-login trn" data-trn-key="_LOGIN_">Login</a>
  1211.                 <a href="{{ url('sign_up') }}" class="hb-btn-signup trn" data-trn-key="_CREATE_ACCOUNT_">Get Started</a>
  1212.                 <a href="{{ url('honeybee_contact') }}" class="hb-btn-companies" style="background:var(--hb-amber)">Book
  1213.                     Demo</a>
  1215.             {% endif %}
  1217.             {# Dark / Light mode toggle #}
  1218.             {#            <div class="hb-theme"> #}
  1219.             {#                <img class="hb-theme-img" src="{{ absolute_url(asset('honeybee_web_assets/icons/sun.svg')) }}" alt="Light mode"> #}
  1220.             {#                <input type="checkbox" id="theme-toggle-checkbox"> #}
  1221.             {#                <label for="theme-toggle-checkbox" class="hb-theme-track" id="hbThemeTrack"></label> #}
  1222.             {#                <img class="hb-theme-img" src="{{ absolute_url(asset('honeybee_web_assets/icons/moon.svg')) }}" alt="Dark mode"> #}
  1223.             {#            </div> #}
  1225.         </div>{# /hb-nav-right #}
  1226.     </div>{# /hb-nav-inner #}
  1227. </nav>
  1229. {# ── Apply saved theme immediately (no flash of wrong theme) ─────────────── #}
  1230. <script>
  1231.     (function () {
  1232.         var saved = localStorage.getItem('theme') || 'light';
  1233.         if (saved === 'dark') {
  1234.             var css = document.getElementById('dark-theme-css');
  1235.             var cb = document.getElementById('theme-toggle-checkbox');
  1236.             var track = document.getElementById('hbThemeTrack');
  1237.             if (css) css.disabled = false;
  1238.             if (cb) cb.checked = true;
  1239.             if (track) track.classList.add('hb-dark');
  1240.         }
  1241.     }());
  1242. </script>
  1244. {# ── Navbar interaction scripts ───────────────────────────────────────────── #}
  1245. <script>
  1246.     (function () {
  1247.         var navbar = document.getElementById('hbNavbar');
  1248.         var toggler = document.getElementById('hbToggler');
  1250.         window.addEventListener('scroll', function () {
  1251.             navbar.classList.toggle('hb-scrolled', window.scrollY > 6);
  1252.         }, {passive: true});
  1254.         if (toggler) {
  1255.             toggler.addEventListener('click', function () {
  1256.                 navbar.classList.toggle('hb-open');
  1257.                 toggler.classList.toggle('hb-open');
  1258.             });
  1259.         }
  1261.         navbar.querySelectorAll('.hb-drop > a').forEach(function (a) {
  1262.             a.addEventListener('click', function (e) {
  1263.                 if (window.innerWidth <= 1024) {
  1264.                     e.preventDefault();
  1265.                     a.closest('.hb-drop').classList.toggle('hb-mob-open');
  1266.                 }
  1267.             });
  1268.         });
  1270.         var cb = document.getElementById('theme-toggle-checkbox');
  1271.         var track = document.getElementById('hbThemeTrack');
  1272.         if (cb && track) {
  1273.             track.addEventListener('click', function () {
  1274.                 changeTheme(!cb.checked);
  1275.             });
  1276.         }
  1277.     }());
  1278. </script>
  1280. {# ── Preloader: hide on load ──────────────────────────────────────────────── #}
  1281. <script>
  1282.     document.body.style.overflow = 'hidden';
  1283.     window.addEventListener('load', function () {
  1284.         var pre = document.getElementById('hb-preloader');
  1285.         if (pre) {
  1286.             pre.style.transition = 'opacity .35s ease';
  1287.             pre.style.opacity = '0';
  1288.             setTimeout(function () {
  1289.                 pre.style.display = 'none';
  1290.             }, 360);
  1291.         }
  1292.         document.body.style.overflow = 'auto';
  1293.     });
  1294. </script>
  1297. {% set full_js_included = 0 %}
  1298. {% endif %}{# /include_html #}
  1300. <input type="hidden" id="timeStampOnHeaderLoad" value="{{ 'now'|date('U') }}">
  1301. {% include '@Application/inc/ajax_route_library.html.twig' %}
  1303. {# Date-picker scripts #}
  1304. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1305. <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  1306. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/js/bootstrap-material-datetimepicker.min.js"></script>