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