<div
        class="bg-zinc-50/80 backdrop-blur-sm dark:bg-zinc-950 flex shrink-0 items-center justify-between px-4 lg:px-8 h-16 z-50 sticky top-0 app-header">
    <div class="shrink-0 flex items-center space-x-1">


        <h5 class="text ms-3 logo-text font-display"> <?= esc($data['event']["eve_nom_fr"].' / '.$data['course']["cou_type_fr"]) ?></h5>
    </div>
    <div class="flex items-center space-x-1">



        <!--:Theme color switcher:-->
        <div class="relative">
            <button type="button"
                    class="cursor-pointer relative flex items-center justify-center size-8 rounded-lg hover:bg-zinc-200 hover:text-black dark:hover:text-white dark:hover:bg-zinc-800"
                    data-bs-toggle="dropdown" data-bs-display="static" data-bs-auto-close="outside">
                <span class="icon-[lucide--settings] text-lg"></span>
            </button>
            <div class="dropdown-menu absolute min-w-56 abslute ltr:right-0 rtl:left-0 top-full z-50 !p-2 mt-4.5">
                <div class="mb-3 px-3 pt-2">
                    <h5>Theme</h5>
                </div>

                <div class="flex flex-wrap px-3 pb-2 gap-2">
                    <button id="indigoTheme" class="theme-switcher cursor-pointer">
                    <span class="flex items-center justify-center size-7 rounded-full text-white"
                          style="background-color: #636DFF;">
                      <span class="icon-[lucide--check] theme-check text-lg"></span>
                    </span>
                    </button>
                    <button id="navyTheme" class="theme-switcher cursor-pointer">
                    <span class="flex items-center justify-center size-7 rounded-full text-white"
                          style="background-color: #0E6DD9;">
                      <span class="icon-[lucide--check] theme-check text-lg"></span>
                    </span>
                    </button>
                    <button id="emeraldTheme" class="theme-switcher cursor-pointer">
                    <span class="flex items-center justify-center size-7 rounded-full text-white"
                          style="background-color: #049772;">
                      <span class="icon-[lucide--check] theme-check text-lg"></span>
                    </span>
                    </button>
                    <button id="purpleTheme" class="theme-switcher cursor-pointer">
                    <span class="flex items-center justify-center size-7 rounded-full text-white"
                          style="background-color: #D300C5;">
                      <span class="icon-[lucide--check] theme-check text-lg"></span>
                    </span>
                    </button>
                </div>
                <div class="pt-2 mt-2 border-t border-dashed border-zinc-200 dark:border-zinc-700">
                    <label class="flex items-center cursor-pointer dropdown-item">
                        <span class="icon-[lucide--sun-moon] me-1"></span>
                        <span class="flex-grow text-sm me-2">Dark mode</span>
                        <input class="input-switch" data-theme-switch="dark" name="check_theme" type="checkbox" value="1">
                    </label>
                </div>
                <div class="pt-2 mt-2 border-t border-dashed border-zinc-200 dark:border-zinc-700">
                    <label for="toggleRTL" class="flex items-center justify-between cursor-pointer dropdown-item">
                        <span class="text-sm">Enable RTL</span>
                        <input type="checkbox" class="input-switch" id="toggleRTL" />
                    </label>

                </div>
                <div class="pt-2 dark:hidden mt-2 border-t border-dashed border-zinc-200 dark:border-zinc-700">
                    <h5 class="px-3 mb-2">Sidebar</h5>
                    <div class="radio-group flex items-center">
                        <div class="radio-option flex-grow">
                            <input class="appearance-none hidden" type="radio" id="sidebarLight" name="sidebarTheme" value="light" checked>
                            <label for="sidebarLight" class="block text-center cursor-pointer sidebar-label">
                                  <span class="w-24 h-16 mb-2 overflow-hidden flex mx-auto p-1 rounded-sm bg-zinc-100 dark:bg-zinc-950 border border-dashed border-zinc-200">
                                    <span class="w-6 h-full bg-white rounded-sm"></span>
                                  </span>
                                <span class="block text-sm text-zinc-400">
                                    Light
                                  </span>
                            </label>
                        </div>
                        <div class="radio-option flex-grow">
                            <input class="appearance-none hidden" type="radio" id="sidebarDark" name="sidebarTheme" value="dark">
                            <label for="sidebarDark" class="block text-center cursor-pointer sidebar-label">
                                   <span class="w-24 h-16 mb-2 overflow-hidden flex mx-auto p-1 rounded-sm bg-zinc-100 dark:bg-zinc-950 border border-dashed border-zinc-200">
                                     <span class="w-6 h-full bg-zinc-900 rounded-sm"></span>
                                  </span>
                                <span class="block text-sm text-zinc-400">
                                    Dark
                                  </span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="sm:relative">
            <a href="/" class="dropdown-item">
                        <span class="dropdown-icon">
                            <span class="icon-[lucide--log-out]"></span>
                        </span>Sign out</a>
        </div>
    </div>
</div>
