<?php
/**
 * Partial Template: Workspace Command Header Utility Bar
 * File Location: partials/learning-topbar.php
 */
?>
<header class="flex justify-between items-center w-full px-margin-desktop h-16 ml-64 max-w-[calc(100%-16rem)] bg-surface shadow-sm sticky top-0 z-40">
    <div class="flex items-center gap-4" style="padding-top: 10px; padding-bottom: 10px;">
        <h1 class="font-headline-md text-headline-md font-black text-primary">uLesson</h1>
        <div class="h-6 w-[1px] bg-surface-container-highest"></div>
        <nav class="hidden md:flex items-center gap-6">
            <a id="nav-link-dashboard" class="text-on-surface-variant font-medium hover:text-primary transition-colors font-label-lg text-label-lg" href="<?php echo home_url('/portal-dashboard'); ?>">Dashboard</a>
            <a id="nav-link-live" class="text-on-surface-variant font-medium hover:text-primary transition-colors font-label-lg text-label-lg" href="#" onclick="navigateWorkspace('live-stream-room'); return false;">Live Classes</a>
        </nav>
        <div class="h-6 w-[1px] hidden md:block bg-surface-container-highest"></div>
        <div class="flex items-center gap-2 bg-surface-container-low px-3 py-1.5 rounded-full">
            <span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">account_circle</span>
            <span class="text-label-lg font-label-lg">Alex Johnson</span>
            <span class="material-symbols-outlined text-on-surface-variant text-sm">expand_more</span>
        </div>
    </div>

    <div class="flex items-center gap-6">
        <div class="relative flex items-center">
            <span class="material-symbols-outlined absolute left-3 text-on-surface-variant">search</span>
            <input class="pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-full text-sm w-64 focus:ring-2 focus:ring-primary-container transition-all" placeholder="Search lessons..." type="text"/>
        </div>
        <div class="flex items-center gap-4">
            <button class="text-on-surface-variant hover:text-primary transition-colors relative">
                <span class="material-symbols-outlined">notifications</span>
                <span class="absolute top-0 right-0 w-2 h-2 bg-alert-coral rounded-full"></span>
            </button>
            <button class="text-on-surface-variant hover:text-primary transition-colors">
                <span class="material-symbols-outlined">settings</span>
            </button>
            <img class="w-10 h-10 rounded-full border-2 border-white shadow-md" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmgRDF9F2miYcHJJx5VL0szH4IVOTUNwGjCWKIyfItoB_35YyZFgk2MBsOSDCxDguJCGZjoW0TbPyIMceq26k9K28lPypJ4brSQKvyLmc2pcf-jHTQvAiZvoxMlzRnU_1s-kf5FZ0CoM-0Z4oMl9_PtqKLBpJW1rUJlQ5qvsQxqJ50ZEKFe9jP53DfKMkruM1Y6CEkbtTcpdczQ2yoAIqwc5uIw4D8JWazX8fHtonQu2-on73payet"/>
        </div>
    </div>
</header>