```


<!-- Enhanced ChatEdge Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm sticky-top">
  <div class="container-fluid">

    <!-- Logo and Brand -->
    <a class="navbar-brand d-flex align-items-center" href="/chatEdge/">
      <img src="https://hodebaba.com/chatEdge/img/ChatEdgelogo.png" alt="ChatEdge Logo" width="36" height="36" class="me-2 rounded" style="object-fit: contain;">
      <span class="fw-bold fs-5">ChatEdge</span>
    </a>

    <!-- Mobile Toggle -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collapsible Content -->
    <div class="collapse navbar-collapse" id="mainNavbar">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">




        <!-- Welcome Message -->
        <li class="nav-item me-3 text-white">
          <span class="navbar-text d-flex align-items-center">
            <i class="bi bi-person-circle me-1"></i>
            <span class="fw-semibold">Welcome, Guest </span>
          </span>
        </li>

        <!-- Services Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdownMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-grid-fill me-1"></i> Services
          </a>
          <ul class="dropdown-menu dropdown-menu-end animate__animated animate__fadeIn" aria-labelledby="dropdownMenu">
            <li><a class="dropdown-item" href="/chatEdge/sites/learn/tutor_Dashboard.cfm"><i class="bi bi-person-badge"></i> Tutor Dashboard</a></li>
            <li><a class="dropdown-item" href="/chatEdge/sites/learn/student_Dashboard.cfm"><i class="bi bi-mortarboard"></i> Student Dashboard</a></li>
                        <li><a class="dropdown-item" href="/chatedge/sites/learn/TutorApplicationForm.cfm"><i class="bi bi-mortarboard"></i> Apply New Tutor</a></li>
                <li><a class="dropdown-item" href="/chatedge/sites/learn/TutorsProfile.cfm"><i class="bi bi-mortarboard"></i>Browse Tutors</a></li>
                                <li><a class="dropdown-item" href="/chatedge/sites/learn/browseLessons.cfm"><i class="bi bi-mortarboard"></i>Browse Lessons</a></li>

      <li><a class="dropdown-item" href="/chatedge/sites/learn/admin_dashboard.cfm"><i class="bi bi-mortarboard"></i>Admin</a></li>


            <li><a class="dropdown-item" href="/chatEdge/contactUS.cfm"><i class="bi bi-question-circle"></i> Contact & Help</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="https://hodebaba.com/chatEdge/logout.cfm"><i class="bi bi-box-arrow-right"></i> Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Bootstrap & Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- Optional: Animations -->
<link href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" rel="stylesheet">
<!-- TutorMenu.cfm -->

<!-- Bootstrap and Font Awesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />

<style>
  .tutor-menu {
    background: linear-gradient(to right, #4a148c, #7b1fa2);
    color: white;
    padding: 15px 20px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    font-family: 'Segoe UI', sans-serif;
  }
  .tutor-menu h5 {
    margin-bottom: 20px;
    color: #ffeb3b;
  }
  .tutor-menu a {
    color: white;
    display: block;
    margin: 8px 0;
    text-decoration: none;
    transition: 0.2s;
  }
  .tutor-menu a:hover {
    color: #ffeb3b;
    padding-left: 5px;
  }
  .tutor-menu i {
    margin-right: 10px;
  }
</style>

<div class="tutor-menu">
    
  <h5><i class="fas fa-chalkboard-teacher"></i> Tutor Menu</h5>
<a href="/chatEdge/welcome.cfm"><i class="fas fa-home"></i> Home</a>

  <a href="tutor_Dashboard.cfm"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
  
  <a href="manageLessons.cfm"><i class="fas fa-edit"></i> Manage Lessons</a>
  <a href="tutorProfile.cfm"><i class="fas fa-user"></i> My Profile</a>
  <a href="/chatEdge/logout.cfm"><i class="fas fa-sign-out-alt"></i> Logout</a>
</div>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Manage Lessons</title>
    <link rel="stylesheet" href="/chatEdge/assets/bootstrap.min.css">
    <style>
        .container { margin-top: 40px; }
        .action-icons i { margin-right: 10px; cursor: pointer; }
    </style>
</head>
<body>
    

<!-- Top Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
  <div class="container-fluid px-4">

    <!-- Logo / Brand -->
    <a class="navbar-brand fw-bold text-primary" href="/chatEdge/welcome.cfm">
      <i class="bi bi-lightbulb"></i> Manage Lessons <span class="text-dark"> 
      

    <!-- Mobile Toggle Button -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="##learnNav" aria-controls="learnNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navigation Menu -->
    <div class="collapse navbar-collapse" id="learnNav">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">

        <li class="nav-item">
          <a class="nav-link" href="addNewLessonForm.cfm"><i class="bi bi-house-door"></i>Add New Lesson</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="availabilityDashboard.cfm"><i class="bi bi-book"></i> Tutoring Availability</a>
        </li>

        
        <!--
        <li class="nav-item">
          <a class="nav-link" href="bookTutor.cfm"><i class="bi bi-calendar-check"></i> Booking</a>
        </li>
        -->
      </ul>

      <ul class="navbar-nav mb-2 mb-lg-0">
  <!-- Language Toggle -->
 <!-- Language Toggle -->
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="langDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    ?? Language
  </a>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="langDropdown">
    <li><a class="dropdown-item" href="?lang=en">???? English</a></li>
    <li><a class="dropdown-item" href="?lang=am">???? ????</a></li>
    <li><a class="dropdown-item" href="?lang=ar" dir="rtl">???? ???????</a></li>
    <li><a class="dropdown-item" href="?lang=mo">???? Mooré</a></li>
  </ul>
</li>


        <!-- User Info / Login -->
        
            <li class="nav-item">
              <a class="nav-link text-success" href="/chatEdge/userLogin.cfm"><i class="bi bi-box-arrow-in-right"></i> Login</a>
            </li>
          
      </ul>
    </div>
  </div>
</nav>

<!-- Optional JS to collapse menu on link click (mobile UX improvement) -->
<script>
  document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
    link.addEventListener('click', () => {
      const navbarCollapse = document.querySelector('.navbar-collapse');
      if (navbarCollapse.classList.contains('show')) {
        new bootstrap.Collapse(navbarCollapse).toggle();
      }
    });
  });
  
  async function loadLanguageContent(lang) {
  const response = await fetch(`/lang/${lang}.json`);
  const translations = await response.json();

  document.querySelectorAll("[data-i18n]").forEach(el => {
    const key = el.getAttribute("data-i18n");
    el.textContent = translations[key] || key;
  });
}
function translateMessage(text, targetLang) {
  // Call backend or API to translate `text` to `targetLang`
}

</script>


    
<div class="container">
    <h2 class="mb-4"> Manage Lessons</h2>

</center></div>
    <!-- Flash messages -->
    

    <div class="mb-3 text-end">
        <a href="addNewLessonForm.cfm" class="btn btn-primary">? Add New Lesson</a>
    </div>

    <table class="table table-bordered table-striped table-hover">
        <thead class="table-dark">
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Subject</th>
                <th>Level</th>
                <th>Duration</th>
                <th>Price</th>
                <th>Created</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            
                    <tr>
                        <td>1015</td>
                        <td>HoverLegends Africa</td>
                        <td>Africa</td>
                        <td>Beginner</td>
                        <td>30 mins</td>
                        <td>$1.00</td>
                        <td>Jun 13, 2025</td>
                        <td class="action-icons">
                            <a href="editLesson.cfm?lesson_id=1015" title="Edit"><i class="bi bi-pencil-square text-primary"></i></a>
                            <a href="deleteLesson.cfm?id=1015" onclick="return confirm('Are you sure you want to delete this lesson?')" title="Delete"><i class="bi bi-trash text-danger"></i></a>
                        </td>
                    </tr>
                
                    <tr>
                        <td>1009</td>
                        <td>Prompt Engineering Basics </td>
                        <td>Prompt Engineering </td>
                        <td>Beginner</td>
                        <td>30 mins</td>
                        <td>$1.00</td>
                        <td>Jun 08, 2025</td>
                        <td class="action-icons">
                            <a href="editLesson.cfm?lesson_id=1009" title="Edit"><i class="bi bi-pencil-square text-primary"></i></a>
                            <a href="deleteLesson.cfm?id=1009" onclick="return confirm('Are you sure you want to delete this lesson?')" title="Delete"><i class="bi bi-trash text-danger"></i></a>
                        </td>
                    </tr>
                
        </tbody>
    </table>
</div>

<!-- Bootstrap + Icons -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</body>
</html>