
<!-- Menu Button -->
 <div class="flex items-center space-x-4">
    <button class="text-gray-500 hover:text-gray-700 focus:outline-none" onclick="apx.adminskull.togglesidebarmobile(this)">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
    </button>

    <!-- Search Bar -->
    <div class="relative">
        <input type="text" class="bg-gray-100 rounded-full pl-10 pr-10 py-2 text-sm text-black focus:outline-none" placeholder="Rechercher...">
        <!-- Icône de loupe cliquable à droite -->
        <button onclick="apx.adminskull.search(this);" class="absolute inset-y-0 right-0 pr-3 flex items-center">
            <svg class="h-5 w-5 text-black-400 hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
        </button>
    </div>
</div>

<!-- Right: Icons and Profile -->
<div class="flex items-center space-x-6">

    <!-- Notification Icon -->
    {{#notifnumber}}
    <div class="relative">
        <button class="relative text-gray-700 hover:text-gray-900 focus:outline-none" onclick="apx.adminskull.toggleheadnav('notifications')">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405C18.79 14.79 19 13.895 19 13V10c0-3.866-3.134-7-7-7S5 6.134 5 10v3c0 .895.21 1.79.595 2.595L4 17h5m6 0v2a2 2 0 11-4 0v-2m4 0H9" />
            </svg>
            <span class="absolute top-0 right-0 inline-block w-3 h-3 bg-{{notifcolor}}-500 rounded-full text-white text-xs text-center">{{{notifnumber}}}</span>
        </button>
        <!-- Dropdown Menu -->
        <div class="dropdown notifications hidden absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-50">
            <ul class="py-2">
                {{#notif}}
                <li>
                <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">{{text}}<br>{{from}} -- {{date}}</a>
                </li>
                {{/notif}}
                <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">En voir plus...</a></li>
            </ul>
        </div>
    </div>    
    {{/notifnumber}}
    <!-- Message Icon -->
    {{#msgnumber}}
    <div class="relative">
        <button class="text-gray-700 hover:text-gray-900 focus:outline-none" onclick="apx.adminskull.toggleheadnav('messages')">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h8m-8 4h8M5 21l3.386-2.258A8.976 8.976 0 0112 19c4.971 0 9-3.806 9-8.5S16.971 2 12 2 3 5.806 3 10.5c0 1.771.651 3.411 1.748 4.742L5 21z" />
            </svg>
            <span class="absolute top-0 right-0 inline-block w-3 h-3 bg-{{msgcolor}}-500 rounded-full text-white text-xs text-center">{{{msgnumber}}}</span>
        </button>
        <!-- Dropdown Menu -->
        <div class="dropdown messages hidden absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-50">
            <ul class="py-2">
                {{#msg}}
                <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">{{{text}}}<br>{{from}} -- {{date}}</a></li>
                {{/msg}}
                <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Voir les discussions</a></li>
            </ul>
        </div>
    </div>
    {{/msgnumber}}
    <!-- Language Icon -->
    <div class="relative">
        <button class="text-gray-700 hover:text-gray-900 focus:outline-none" onclick="apx.adminskull.toggleheadnav('language')">
            <span class="inline-block text-sm">🇬🇧</span>
        </button>
        <!-- Dropdown Menu -->
        <div class="dropdown language hidden absolute right-0 mt-2 w-13 bg-white rounded-lg shadow-lg z-50">
            <ul class="py-2">
                <li>
                    <a href="admindata_en.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                    🇬🇧 
                    </a>
                </li>
                <li>
                    <a href="admindata_fr.html" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">
                    🇫🇷
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="relative flex flex-col items-center justify-center text-center">
    <!-- Profile Avatar -->
        <img src="{{{aliasimg}}}" class="rounded-full h-9 w-9" alt="{{alias}}">
        <span class="text-sm mt-2">{{alias}}</span>
    </div>
</div>