<?php
/**
 * Partial Template: Learning Workspace Navigation Drawer
 * File Location: partials/learning-sidebar.php
 */
?>
<aside class="h-screen w-64 fixed left-0 top-0 bg-surface shadow-[0px_4px_20px_rgba(48,20,70,0.05)] flex flex-col py-8 px-4 gap-y-6 z-50">
    <div class="flex items-center gap-3 px-2">
        <div class="w-10 h-10 rounded-xl bg-primary flex items-center justify-center text-on-primary">
            <span class="material-symbols-outlined">school</span>
        </div>
        <div class="flex flex-col">
            <span class="font-headline-md text-[18px] font-bold text-primary">Primary 4</span>
            <span class="font-body-md text-xs text-on-surface-variant">Mathematics</span>
        </div>
    </div>

    <nav class="flex-1 space-y-2 overflow-y-auto custom-scrollbar">
        <a href="#" onclick="navigateWorkspace('active-lesson-player'); return false;" class="flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 text-primary font-bold border-r-4 border-primary bg-surface-container-high active:scale-[0.98]">
            <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">menu_book</span>
            <span class="font-label-lg text-label-lg">Curriculum</span>
        </a>
        
        <div class="pt-4 pb-2">
            <p class="px-4 text-[11px] font-bold uppercase tracking-wider text-on-surface-variant opacity-60">Topics</p>
        </div>

        <div class="space-y-1">
            <button class="w-full flex items-center justify-between px-4 py-3 rounded-xl bg-surface-container-low hover:bg-surface-container-highest transition-colors text-primary font-bold">
                <div class="flex items-center gap-3">
                    <span class="material-symbols-outlined">calculate</span>
                    <span class="font-label-lg text-label-lg">Algebra</span>
                </div>
                <span class="material-symbols-outlined">expand_more</span>
            </button>
            <div class="pl-12 space-y-1">
                <a class="block py-2 text-primary font-semibold text-sm" href="#" onclick="navigateWorkspace('active-lesson-player'); return false;">Linear Equations</a>
                <a class="block py-2 text-on-surface-variant font-medium text-sm hover:text-primary transition-colors" href="#">Polynomials</a>
                <a class="block py-2 text-on-surface-variant font-medium text-sm hover:text-primary transition-colors" href="#">Quadratic Exp.</a>
            </div>
        </div>

        <button class="w-full flex items-center justify-between px-4 py-3 rounded-xl text-on-surface-variant font-medium hover:bg-surface-container-low transition-colors">
            <div class="flex items-center gap-3">
                <span class="material-symbols-outlined">square_foot</span>
                <span class="font-label-lg text-label-lg">Geometry</span>
            </div>
            <span class="material-symbols-outlined">chevron_right</span>
        </button>
        <button class="w-full flex items-center justify-between px-4 py-3 rounded-xl text-on-surface-variant font-medium hover:bg-surface-container-low transition-colors">
            <div class="flex items-center gap-3">
                <span class="material-symbols-outlined">show_chart</span>
                <span class="font-label-lg text-label-lg">Statistics</span>
            </div>
            <span class="material-symbols-outlined">chevron_right</span>
        </button>
    </nav>

    <div class="mt-auto bg-primary-fixed rounded-2xl p-4 flex flex-col gap-3">
        <div class="flex items-center gap-3">
            <img class="w-10 h-10 rounded-full border-2 border-white object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCvt-bM2uunnr7ALY90cC3Tor_JWu4HV38lnsxU3rp_fKd3zguit4uKMG66hmpzzhC3NnzlmGzuNlgF5NUt1tpBcJt9N2yP7D4Vo2ZVWJwR9Htee1f8Op1dCr1pN4BOIcxZV6bX8QBWs6iD7Uy4Zn6F_XfhusdiUm_NBWF0Uxg2EaTEPyXd-QgdHSp2Yi9P9J2S3F6qwMy7gS5L-H2Ba8xXhICuc6QuPjsDCMib4tGJsWXWVkiXB3WqaXGxTgFzPrNouH3qUeppeaA"/>
            <div class="flex flex-col">
                <span class="font-label-lg text-on-primary-fixed text-xs">Resume Learning</span>
                <span class="font-body-md text-sm font-bold text-on-primary-fixed">Module 4: Algebra</span>
            </div>
        </div>
        <button onclick="navigateWorkspace('active-lesson-player');" class="w-full bg-primary text-on-primary py-2 rounded-xl font-label-lg hover:opacity-90 transition-opacity">
            Go to Lesson
        </button>
    </div>
</aside>