<?php
ob_start();
session_start();
include_once("include/functions.php");
if(empty($_SESSION['login_id']))
redirect("index.php");
$instructorPageTitle = isset($instructorPageTitle) ? $instructorPageTitle : "Instructor Dashboard";
$instructorExtraStyles = isset($instructorExtraStyles) && is_array($instructorExtraStyles) ? $instructorExtraStyles : [];
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="LMS Student Dashboard - top primary navigation with contextual sidebar.">
  <title><?php echo htmlspecialchars($instructorPageTitle, ENT_QUOTES, "UTF-8"); ?> | LMS</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
<?php foreach ($instructorExtraStyles as $stylePath): ?>
  <link href="<?php echo htmlspecialchars($stylePath, ENT_QUOTES, "UTF-8"); ?>" rel="stylesheet">
<?php endforeach; ?>
</head>
<body>
  <!-- Primary Top Navigation -->
  <header class="top-nav">
    <div class="container-fluid top-nav__inner">
      <div class="top-nav__brand">
        <button class="top-nav__menu-toggle d-lg-none" id="sidebarToggle" aria-label="Toggle sidebar">
          <i class="bi bi-list"></i>
        </button>
        <a href="dashboard.php" class="logo">
          <img src="images/logo.jpg" style="width: 240px;border-radius: 20px;" > &nbsp; &nbsp;
        </a>
      </div>

      <nav class="top-nav__menu" aria-label="Primary menu">
        <a href="#" class="top-link is-active" data-section="dashboard">Dashboard</a>
        <a href="#" class="top-link" data-section="courses">My Courses</a>
        <a href="#" class="top-link" data-section="certificates">Certificates</a>
        <a href="#" class="top-link" data-section="messages">Messages</a>
        <a href="#" class="top-link" data-section="orders">Orders</a>
      </nav>

      <div class="top-nav__right">
        <div class="dropdown">
          <button class="profile-btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="profile-btn__avatar">AK</span>
            <span class="d-none d-md-inline">Profile</span>
          </button>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>My Profile</a></li>
            <li><a class="dropdown-item" href="#"><i class="bi bi-sliders me-2"></i>Preferences</a></li>
            <li><a class="dropdown-item" href="change_password.php"><i class="bi bi-lock me-2"></i>Change Password</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="logout.php"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>

  <div class="layout">
    <!-- Secondary Context Sidebar -->
    <aside class="context-sidebar" id="contextSidebar">
      <div class="context-sidebar__head">
        <button class="context-sidebar__close d-lg-none" id="sidebarClose" aria-label="Close sidebar">
          <i class="bi bi-x-lg"></i>
        </button>
        <h2 id="contextTitle">Dashboard</h2>
      </div>
      <nav class="context-links" id="contextLinks" aria-label="Context links">
        <!-- injected by JS -->
      </nav>
    </aside>

    <div class="layout-overlay" id="layoutOverlay"></div>
    