<header class="flex items-center justify-between p-4 bg-white shadow-md border-b">
    <div class="text-xl font-semibold text-gray-800">
        South Sudan Football Federation Admin Panel
    </div>
    <div class="flex items-center space-x-4">
        <a href="#" class="text-gray-500 hover:text-indigo-600">
            <i class="fas fa-bell"></i>
        </a>
        <div class="relative group">
            <button class="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 focus:outline-none">
                <img class="h-8 w-8 rounded-full object-cover" src="https://ui-avatars.com/api/?name={{ Auth::user()->name ?? 'Admin' }}&background=5a67d8&color=ffffff" alt="Admin Avatar">
                <span class="font-medium text-sm">{{ Auth::user()->name ?? 'Administrator' }}</span>
                <i class="fas fa-chevron-down text-xs"></i>
            </button>
            <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-xl py-1 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
                <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">
                    <i class="fas fa-user-circle mr-2"></i> Profile
                </a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600">
                        <i class="fas fa-sign-out-alt mr-2"></i> Log Out
                    </button>
                </form>
            </div>
        </div>
    </div>
</header>