Repository: Learnathon-By-Geeky-Solutions/mindjunkies
Pull request #146: feature: added pdf viewer
Author: login: ShafayetSadi
Created: 2025-04-15T21:07:35Z | Merged: 2025-04-15T21:08:18Z



Diff:
diff --git a/mindjunkies/lecture/templates/lecture/lecture_content.html b/mindjunkies/lecture/templates/lecture/lecture_content.html
index 995adc7d..4b81d67d 100644
--- a/mindjunkies/lecture/templates/lecture/lecture_content.html
+++ b/mindjunkies/lecture/templates/lecture/lecture_content.html
@@ -22,7 +22,7 @@ <h2 class="font-bold text-lg">{{lecture.title}}</h2>
                 <ul class="menu menu-compact">
                   {% for pdf in lecture.pdf_files.all %}
                     <li>
-                      <a href="{% url 'lecture_pdf_content' lecture.slug pdf.id %}"
+                      <a href="{% url 'lecture_pdf' course.slug lecture.id pdf.id %}"
                          class="flex items-center gap-2 hover:bg-base-300 rounded-lg py-2"
                          aria-label="View PDF: {{ pdf.pdf_title }}">
                         <svg class="h-4 w-4 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
@@ -53,7 +53,7 @@ <h2 class="font-bold text-lg">{{lecture.title}}</h2>
                 <ul class="menu menu-compact">
                   {% for video in lecture.videos.all %}
                     <li>
-                      <a href="{% url 'lecture_video_content' lecture.slug video.id %}"
+                      <a href="#"
                          class="flex items-center gap-2 hover:bg-base-300 rounded-lg py-2"
                          aria-label="Watch video: {{ video.video_title }}">
                         <svg class="h-4 w-4 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
diff --git a/mindjunkies/lecture/templates/lecture/lecture_home.html b/mindjunkies/lecture/templates/lecture/lecture_home.html
index 270e2946..9ecf2346 100644
--- a/mindjunkies/lecture/templates/lecture/lecture_home.html
+++ b/mindjunkies/lecture/templates/lecture/lecture_home.html
@@ -1,383 +1,164 @@
 {% extends 'lecture/base.html' %} {% load static %}
 {% block lecture_content %}
-<!-- Main Content with Responsive Layout -->
-{% if current_module %}
-<main class="flex flex-col lg:flex-row flex-grow overflow-auto bg-slate-50">
-    <!-- Center Content Area -->
-    <div class="flex-grow p-4 lg:p-8 overflow-y-auto">
-        <!-- Module Title at Top Center -->
-        <div
-            class="text-center mb-6 bg-white p-6 rounded-xl shadow-sm border border-slate-100 transition-all hover:shadow-md"
-        >
-            <div class="flex items-center justify-center gap-3">
-                <h1 class="text-2xl font-bold text-slate-800">
-                    Module {{ current_module.order }}: {{ current_module.title }}
-                </h1>
-                {% if isTeacher %}
-                    <a
-                        href="{% url 'create_lecture' course.slug current_module.id %}"
-                        class="transition-all hover:scale-110 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 rounded-full p-1"
-                    >
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <circle cx="12" cy="12" r="10" stroke="#4F46E5" stroke-width="2"/>
-                            <path
-                                d="M12 7V17M7 12H17"
-                                stroke="#4F46E5"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            />
-                        </svg>
-                    </a>
-                {% endif %}
-            </div>
-        </div>
-
-        <!-- Weeks/Lectures in Module -->
-
-        {% for lecture in current_module.lectures.all %}
-            <div
-                class="collapse collapse-arrow bg-white border border-slate-100 rounded-xl mb-5 shadow-sm overflow-hidden transition-all hover:shadow-md"
-            >
-            <input
-                type="checkbox"
-                id="collapse-{{ lecture.id }}"
-                class="peer"
-                {%
-                if
-                forloop.first
-                %}checked{%
-                endif
-                %}
-            />
-            <div
-                class="collapse-title text-xl font-medium flex items-center peer-checked:bg-indigo-50/50 transition-colors">
-                <div class="flex items-center gap-3 w-full">
-                    <span class="text-slate-800 flex-grow">Lecture {{ lecture.order }}: {{ lecture.title }}</span>
-
-                </div>
-            </div>
-
-            <!-- Week Content -->
-            <div class="collapse-content bg-white">
-            <div class="mt-3">
-                {% if isTeacher %}
-                    <a href="{% url 'edit_lecture' course.slug lecture.slug %}"
-                       class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-100 rounded-md transition-all hover:bg-indigo-100 hover:text-indigo-700 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 edit-link">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
-                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-                        </svg>
-                        Edit
-                    </a>
-                {% endif %}
-            </div>
-            <!-- Week Stats -->
-            <div class="flex flex-wrap gap-4 p-5 bg-slate-50 rounded-lg mt-2 border border-slate-100">
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
-                    <div class="flex items-center gap-2 text-sm">
-                        <div class="bg-indigo-100 p-2 rounded-full">
-                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
-                                <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
-                                />
-                            </svg>
-                        </div>
-                        <span>1h 30m of videos left</span>
-                    </div>
-                    <div class="flex items-center gap-2 text-sm">
-                        <div class="bg-indigo-100 p-2 rounded-full">
-                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
-                                <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-                                />
-                            </svg>
-                        </div>
-                        <span>45m of readings left</span>
-                    </div>
-                    <div class="flex items-center gap-2 text-sm">
-                        <div class="bg-indigo-100 p-2 rounded-full">
-                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
-                                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
-                            </svg>
-                        </div>
-                        <span>2 graded assessments left</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Week Description -->
-            <div class="mt-5 bg-white p-5 rounded-lg border border-slate-100">
-                <h3 class="text-lg font-medium text-slate-800 mb-2">Description</h3>
-                <p class="text-slate-600">{{ lecture.description }}</p>
-                <div class="collapse mt-4 border border-slate-100 rounded-lg overflow-hidden">
-                    <input type="checkbox" class="peer" id="toggle-{{ lecture.id }}"/>
-                    <div
-                        class="collapse-title text-md text-indigo-600 font-medium flex items-center space-x-2 bg-slate-50 peer-checked:bg-indigo-50"
-                    >
-                        <svg
-                            class="w-5 h-5 text-indigo-600 peer-checked:rotate-180 transition-transform"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M19 9l-7 7-7-7"
-                            />
-                        </svg>
-                        <span>Show Learning Objectives</span>
-                    </div>
-                    <div class="collapse-content bg-white">
-                        <div class="py-3 px-1">{{ lecture.learning_objective }}</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Lecture Items -->
-            <div class="card bg-base-100 shadow-lg p-6 mt-5">
-            <h3 class="text-xl font-serif font-medium text-slate-800 mb-4 px-1">Learning Materials</h3>
-
-            <!-- Attachments Section -->
-            <div class="w-full mt-3 flex justify-between items-center">
-                <h2 class="text-base font-medium">Attachment</h2>
-                {% if isTeacher %}
-                    <div class="relative group">
-                        <a
-                            href="{% url 'create_content' course.slug lecture.slug 'attachment' %}"
-                            class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 text-indigo-600 border-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
-                        >
-                            <svg
-                                class="h-4 w-4 mr-1.5"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
+    <!-- Main Content with Responsive Layout -->
+    {% if current_module %}
+        <main class="flex flex-col lg:flex-row flex-grow overflow-auto bg-slate-50">
+            <!-- Center Content Area -->
+            <div class="flex-grow p-4 lg:p-8 overflow-y-auto">
+                <!-- Module Title at Top Center -->
+                <div
+                    class="text-center mb-6 bg-white p-6 rounded-xl shadow-sm border border-slate-100 transition-all hover:shadow-md"
+                >
+                    <div class="flex items-center justify-center gap-3">
+                        <h1 class="text-2xl font-bold text-slate-800">
+                            Module {{ current_module.order }}: {{ current_module.title }}
+                        </h1>
+                        {% if isTeacher %}
+                            <a
+                                href="{% url 'create_lecture' course.slug current_module.id %}"
+                                class="transition-all hover:scale-110 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 rounded-full p-1"
                             >
-                                <path
-                                    d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"
-                                />
-                            </svg>
-                            Attachment
-                        </a>
-                    </div>
-                {% endif %}
-            </div>
-
-            <!-- PDF Files Section -->
-            <div class="space-y-3 mt-4">
-                {% if lecture.pdf_files %}
-                    {% for pdf in lecture.pdf_files.all %}
-                        <div
-                            class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
-                        >
-                            <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
-                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                                     xmlns="http://www.w3.org/2000/svg">
+                                    <circle cx="12" cy="12" r="10" stroke="#4F46E5" stroke-width="2"/>
                                     <path
-                                        d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+                                        d="M12 7V17M7 12H17"
+                                        stroke="#4F46E5"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
                                     />
                                 </svg>
-                            </div>
-                            <div class="flex-1">
-                                <h4 class="font-medium text-slate-800">
-                                    <a href="" class="hover:text-indigo-600 transition-colors">
-                                        {{ pdf.pdf_title }}
-                                    </a>
-                                </h4>
-                                <p class="text-xs text-slate-500">
-                                    Reading • {% if item_num == "1" %}15{% elif item_num == "2" %}20{% else %}
-                                    25{% endif %} min
-                                </p>
-                            </div>
-                            <a
-                                href="{{ pdf.pdf_file.url }}"
-                                class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                                download
-                            >
-                                Download
                             </a>
-                        </div>
-                    {% endfor %}
-                {% endif %} {% if not lecture.pdf_files.all %}
-                <p class="text-slate-500 italic">No attachment available</p>
-            {% endif %}
-            </div>
-
-            <!-- Videos Section -->
-            <div class="mt-6">
-            {% if isTeacher %}
-                <div class="flex justify-between items-center mb-3">
-                    <h2 class="text-base font-medium">Videos</h2>
-                    <div class="relative group">
-                        <a
-                            href="{% url 'create_content' course.slug lecture.slug 'video' %}"
-                            class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 border-indigo-600 text-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
-                        >
-                            <svg
-                                class="h-4 w-4 mr-1.5"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <polygon points="23 7 16 12 23 17 23 7"/>
-                                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
-                            </svg>
-                            Video
-                        </a>
+                        {% endif %}
                     </div>
                 </div>
-            {% endif %}
 
-            <div class="space-y-3">
-            {% for video in lecture.videos.all %}
-            <div
-                class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
-            >
-                <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
-                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
-                        <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
+                <!-- Weeks/Lectures in Module -->
+
+                {% for lecture in current_module.lectures.all %}
+                    <div
+                        class="collapse collapse-arrow bg-white border border-slate-100 rounded-xl mb-5 shadow-sm overflow-hidden transition-all hover:shadow-md"
+                    >
+                        <input
+                            type="checkbox"
+                            id="collapse-{{ lecture.id }}"
+                            class="peer"
+                            {% if forloop.first %}
+                            checked
+                            {% endif %}
                         />
-                    </svg>
-                </div>
-                <div class="flex-1">
-                    <h4 class="font-medium text-slate-800">
-                        <a href="#" class="hover:text-indigo-600 transition-colors">
-                            {{ video.video_title }}
-                        </a>
-                    </h4>
-                    <p class="text-xs text-slate-500">Video • 45 min</p>
-                </div>
-                <a
-                    href="{% url 'lecture_video_content' course.slug current_module.id lecture.id video.id %}"
-                    class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                >
-                    Resume
-                </a>
-            </div>
-        {% endfor %} {% if not lecture.videos.all %}
-        <p class="text-slate-500 italic">No videos available</p>
-    {% endif %}
-        </div>
-        </div>
-        </div>
-        </div>
-        </div>
-        {% endfor %}
-    </div>
+                        <div
+                            class="collapse-title text-xl font-medium flex items-center peer-checked:bg-indigo-50/50 transition-colors">
+                            <div class="flex items-center gap-3 w-full">
+                                <span
+                                    class="text-slate-800 flex-grow">Lecture {{ lecture.order }}: {{ lecture.title }}</span>
 
-    <!-- Right Sidebar - Live Classes Section -->
-    <div class="w-full lg:w-80 p-4 border-t lg:border-t-0 lg:border-l border-slate-200 bg-white">
-        <div class="lg:sticky lg:top-0 pt-2">
-            <div class="card bg-white shadow-sm rounded-xl border border-slate-100">
-                <div class="card-body p-5">
-                    <h2 class="card-title text-lg font-bold flex items-center text-slate-800 mb-4">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-5 w-5 mr-2 text-indigo-600"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        >
-                            <path d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
-                            <path d="M12 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z"></path>
-                            <path d="m16.8 17.7-.7-.7"></path>
-                            <path d="m7.9 7-.7-.7"></path>
-                            <path d="M12 18v2"></path>
-                            <path d="M12 4V2"></path>
-                            <path d="m17.5 7-1.4 1.4"></path>
-                            <path d="M4 12H2"></path>
-                            <path d="M7.9 17 7 17.9"></path>
-                            <path d="M22 12h-2"></path>
-                        </svg>
-                        Live Classes
-                    </h2>
-                    <div class="mt-4">
-                        <a
-                            href="{% url 'create_live_class' course.slug %}"
-                            class="inline-flex items-center justify-center w-full h-10 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                class="h-4 w-4 mr-2"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <path d="M12 5v14M5 12h14"/>
-                            </svg>
-                            Schedule a live session
-                        </a>
-                    </div>
+                            </div>
+                        </div>
 
-                    <!-- Current Live Class (Blinking) -->
-                    {% if current_live_class %}
-                        <div
-                            class="mt-5 card bg-white shadow-sm relative overflow-hidden border border-slate-100 rounded-xl hover:shadow-md transition-all"
-                        >
-                            <div class="absolute inset-0 bg-gradient-to-r from-indigo-50/50 to-transparent"></div>
-                            <div class="card-body p-4 relative">
-                                <h3 class="font-bold text-md text-slate-800">{{ current_live_class.topic }}</h3>
-                                <p class="text-sm text-slate-600">{{ current_live_class.teacher }}</p>
-                                <div class="flex items-center text-xs text-slate-500 mt-2">
-                                <span class="flex h-3 w-3 mr-2">
-                                    <span
-                                        class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"
-                                    ></span>
-                                    <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
-                                </span>
-                                    Live Now (Started
-                                    {% with current_live_class.scheduled_at|timesince as time_elapsed %}
-                                        {{ time_elapsed }} ago {% endwith %})
-                                </div>
-                                <div class="card-actions justify-end mt-3">
-                                    <a
-                                        href="{% url 'join_live_class' current_live_class.meeting_id %}"
-                                        class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                                    >
-                                        Join Now
+                        <!-- Week Content -->
+                        <div class="collapse-content bg-white">
+                            <div class="mt-3">
+                                {% if isTeacher %}
+                                    <a href="{% url 'edit_lecture' course.slug lecture.slug %}"
+                                       class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-100 rounded-md transition-all hover:bg-indigo-100 hover:text-indigo-700 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 edit-link">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24"
+                                             fill="none"
+                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                             stroke-linejoin="round">
+                                            <path
+                                                d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                                        </svg>
+                                        Edit
                                     </a>
+                                {% endif %}
+                            </div>
+                            <!-- Week Stats -->
+                            <div class="flex flex-wrap gap-4 p-5 bg-slate-50 rounded-lg mt-2 border border-slate-100">
+                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
+                                    <div class="flex items-center gap-2 text-sm">
+                                        <div class="bg-indigo-100 p-2 rounded-full">
+                                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24"
+                                                 fill="currentColor">
+                                                <path
+                                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
+                                                />
+                                            </svg>
+                                        </div>
+                                        <span>1h 30m of videos left</span>
+                                    </div>
+                                    <div class="flex items-center gap-2 text-sm">
+                                        <div class="bg-indigo-100 p-2 rounded-full">
+                                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24"
+                                                 fill="currentColor">
+                                                <path
+                                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+                                                />
+                                            </svg>
+                                        </div>
+                                        <span>45m of readings left</span>
+                                    </div>
+                                    <div class="flex items-center gap-2 text-sm">
+                                        <div class="bg-indigo-100 p-2 rounded-full">
+                                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24"
+                                                 fill="currentColor">
+                                                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+                                            </svg>
+                                        </div>
+                                        <span>2 graded assessments left</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    {% endif %}
 
-                    <!-- Upcoming Classes Accordion -->
-                    <div class="mt-5 space-y-3">
-                        <div
-                            class="collapse collapse-plus bg-white border border-slate-100 rounded-lg overflow-hidden hover:shadow-sm transition-all"
-                        >
-                            <input type="checkbox" checked/>
-                            <div class="collapse-title text-sm font-medium text-slate-700 bg-slate-50">
-                                Today's Classes
-                            </div>
-                            <div class="collapse-content">
-                                {% for classes in todays_live_classes %}
+                            <!-- Week Description -->
+                            <div class="mt-5 bg-white p-5 rounded-lg border border-slate-100">
+                                <h3 class="text-lg font-medium text-slate-800 mb-2">Description</h3>
+                                <p class="text-slate-600">{{ lecture.description }}</p>
+                                <div class="collapse mt-4 border border-slate-100 rounded-lg overflow-hidden">
+                                    <input type="checkbox" class="peer" id="toggle-{{ lecture.id }}"/>
                                     <div
-                                        class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
+                                        class="collapse-title text-md text-indigo-600 font-medium flex items-center space-x-2 bg-slate-50 peer-checked:bg-indigo-50"
                                     >
-                                        <div class="card-body p-3">
-                                            <h3 class="font-bold text-md text-slate-800">{{ classes.topic }}</h3>
-                                            <p class="text-sm text-slate-600">{{ classes.teacher }}</p>
-                                            <div class="flex items-center text-xs text-slate-500 mt-2">
+                                        <svg
+                                            class="w-5 h-5 text-indigo-600 peer-checked:rotate-180 transition-transform"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                            stroke="currentColor"
+                                        >
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                stroke-width="2"
+                                                d="M19 9l-7 7-7-7"
+                                            />
+                                        </svg>
+                                        <span>Show Learning Objectives</span>
+                                    </div>
+                                    <div class="collapse-content bg-white">
+                                        <div class="py-3 px-1">{{ lecture.learning_objective }}</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Lecture Items -->
+                            <div class="card bg-base-100 shadow-lg p-6 mt-5">
+                                <h3 class="text-xl font-serif font-medium text-slate-800 mb-4 px-1">Learning
+                                    Materials</h3>
+
+                                <!-- Attachments Section -->
+                                <div class="w-full mt-3 flex justify-between items-center">
+                                    <h2 class="text-base font-medium">Attachment</h2>
+                                    {% if isTeacher %}
+                                        <div class="relative group">
+                                            <a
+                                                href="{% url 'create_content' course.slug lecture.slug 'attachment' %}"
+                                                class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 text-indigo-600 border-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
+                                            >
                                                 <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-4 w-4 mr-1 text-indigo-600"
+                                                    class="h-4 w-4 mr-1.5"
                                                     viewBox="0 0 24 24"
                                                     fill="none"
                                                     stroke="currentColor"
@@ -385,21 +166,70 @@ <h3 class="font-bold text-md text-slate-800">{{ classes.topic }}</h3>
                                                     stroke-linecap="round"
                                                     stroke-linejoin="round"
                                                 >
-                                                    <circle cx="12" cy="12" r="10"></circle>
-                                                    <polyline points="12 6 12 12 16 14"></polyline>
+                                                    <path
+                                                        d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"
+                                                    />
                                                 </svg>
-                                                Today, {% with start_time=classes.scheduled_at|date:"g:i A" %}
-                                                {{ start_time }}{% endwith %}<br/>
-                                                Duration {{ classes.duration }} min
+                                                Attachment
+                                            </a>
+                                        </div>
+                                    {% endif %}
+                                </div>
+
+                                <!-- PDF Files Section -->
+                                <div class="space-y-3 mt-4">
+                                    {% if lecture.pdf_files %}
+                                        {% for pdf in lecture.pdf_files.all %}
+                                            <div
+                                                class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
+                                            >
+
+                                                    <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
+                                                        <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
+                                                            <path
+                                                                d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+                                                            />
+                                                        </svg>
+                                                    </div>
+                                                    <div class="flex-1">
+                                                        <a href="{% url 'lecture_pdf' course.slug lecture.id pdf.id %}">
+                                                        <h4 class="font-medium text-slate-800">
+                                                            {{ pdf.pdf_title }}
+                                                        </h4>
+                                                        <p class="text-xs text-slate-500">
+                                                            Reading • {% if item_num == "1" %}
+                                                            15{% elif item_num == "2" %}
+                                                            20{% else %}
+                                                            25{% endif %} min
+                                                        </p>
+                                                        </a>
+                                                    </div>
+                                                    <a
+                                                        href="{{ pdf.pdf_file.url }}"
+                                                        class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
+                                                        download
+                                                    >
+                                                        Download
+                                                    </a>
                                             </div>
-                                            <div class="card-actions justify-end mt-2">
+                                        {% endfor %}
+                                    {% endif %} {% if not lecture.pdf_files.all %}
+                                    <p class="text-slate-500 italic">No attachment available</p>
+                                {% endif %}
+                                </div>
+
+                                <!-- Videos Section -->
+                                <div class="mt-6">
+                                    {% if isTeacher %}
+                                        <div class="flex justify-between items-center mb-3">
+                                            <h2 class="text-base font-medium">Videos</h2>
+                                            <div class="relative group">
                                                 <a
-                                                    href="#"
-                                                    class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
+                                                    href="{% url 'create_content' course.slug lecture.slug 'video' %}"
+                                                    class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 border-indigo-600 text-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
                                                 >
                                                     <svg
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        class="h-3 w-3 mr-1"
+                                                        class="h-4 w-4 mr-1.5"
                                                         viewBox="0 0 24 24"
                                                         fill="none"
                                                         stroke="currentColor"
@@ -407,184 +237,366 @@ <h3 class="font-bold text-md text-slate-800">{{ classes.topic }}</h3>
                                                         stroke-linecap="round"
                                                         stroke-linejoin="round"
                                                     >
-                                                        <path
-                                                            d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-                                                        ></path>
-                                                        <path
-                                                            d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-                                                        ></path>
+                                                        <polygon points="23 7 16 12 23 17 23 7"/>
+                                                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                                                     </svg>
-                                                    Set Reminder
+                                                    Video
                                                 </a>
                                             </div>
                                         </div>
+                                    {% endif %}
+
+                                    <div class="space-y-3">
+                                        {% for video in lecture.videos.all %}
+                                            <div
+                                                class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
+                                            >
+                                                <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
+                                                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
+                                                        <path
+                                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
+                                                        />
+                                                    </svg>
+                                                </div>
+                                                <div class="flex-1">
+                                                    <h4 class="font-medium text-slate-800">
+                                                        <a href="#" class="hover:text-indigo-600 transition-colors">
+                                                            {{ video.video_title }}
+                                                        </a>
+                                                    </h4>
+                                                    <p class="text-xs text-slate-500">Video • 45 min</p>
+                                                </div>
+                                                <a
+                                                    href="{% url 'lecture_video_content' course.slug current_module.id lecture.id video.id %}"
+                                                    class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
+                                                >
+                                                    Resume
+                                                </a>
+                                            </div>
+                                        {% endfor %} {% if not lecture.videos.all %}
+                                        <p class="text-slate-500 italic">No videos available</p>
+                                    {% endif %}
                                     </div>
-                                {% endfor %}
+                                </div>
                             </div>
                         </div>
+                    </div>
+                {% endfor %}
+            </div>
 
-                        <div
-                            class="collapse collapse-plus bg-white border border-slate-100 rounded-lg overflow-hidden hover:shadow-sm transition-all"
-                        >
-                            <input type="checkbox"/>
-                            <div class="collapse-title text-sm font-medium text-slate-700 bg-slate-50">
-                                This Week's Classes
+            <!-- Right Sidebar - Live Classes Section -->
+            <div class="w-full lg:w-80 p-4 border-t lg:border-t-0 lg:border-l border-slate-200 bg-white">
+                <div class="lg:sticky lg:top-0 pt-2">
+                    <div class="card bg-white shadow-sm rounded-xl border border-slate-100">
+                        <div class="card-body p-5">
+                            <h2 class="card-title text-lg font-bold flex items-center text-slate-800 mb-4">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    class="h-5 w-5 mr-2 text-indigo-600"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                >
+                                    <path d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
+                                    <path d="M12 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z"></path>
+                                    <path d="m16.8 17.7-.7-.7"></path>
+                                    <path d="m7.9 7-.7-.7"></path>
+                                    <path d="M12 18v2"></path>
+                                    <path d="M12 4V2"></path>
+                                    <path d="m17.5 7-1.4 1.4"></path>
+                                    <path d="M4 12H2"></path>
+                                    <path d="M7.9 17 7 17.9"></path>
+                                    <path d="M22 12h-2"></path>
+                                </svg>
+                                Live Classes
+                            </h2>
+                            <div class="mt-4">
+                                <a
+                                    href="{% url 'create_live_class' course.slug %}"
+                                    class="inline-flex items-center justify-center w-full h-10 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
+                                >
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        class="h-4 w-4 mr-2"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    >
+                                        <path d="M12 5v14M5 12h14"/>
+                                    </svg>
+                                    Schedule a live session
+                                </a>
                             </div>
-                            <div class="collapse-content">
+
+                            <!-- Current Live Class (Blinking) -->
+                            {% if current_live_class %}
                                 <div
-                                    class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
+                                    class="mt-5 card bg-white shadow-sm relative overflow-hidden border border-slate-100 rounded-xl hover:shadow-md transition-all"
                                 >
-                                    <div class="card-body p-3">
-                                        <h3 class="font-bold text-md text-slate-800">Database Systems</h3>
-                                        <p class="text-sm text-slate-600">Prof. Emily Rodriguez</p>
+                                    <div
+                                        class="absolute inset-0 bg-gradient-to-r from-indigo-50/50 to-transparent"></div>
+                                    <div class="card-body p-4 relative">
+                                        <h3 class="font-bold text-md text-slate-800">{{ current_live_class.topic }}</h3>
+                                        <p class="text-sm text-slate-600">{{ current_live_class.teacher }}</p>
                                         <div class="flex items-center text-xs text-slate-500 mt-2">
-                                            <svg
-                                                xmlns="http://www.w3.org/2000/svg"
-                                                class="h-4 w-4 mr-1 text-indigo-600"
-                                                viewBox="0 0 24 24"
-                                                fill="none"
-                                                stroke="currentColor"
-                                                stroke-width="2"
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                            >
-                                                <circle cx="12" cy="12" r="10"></circle>
-                                                <polyline points="12 6 12 12 16 14"></polyline>
-                                            </svg>
-                                            Mar 8, 2:00 PM - 3:30 PM
+                                <span class="flex h-3 w-3 mr-2">
+                                    <span
+                                        class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"
+                                    ></span>
+                                    <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+                                </span>
+                                            Live Now (Started
+                                            {% with current_live_class.scheduled_at|timesince as time_elapsed %}
+                                                {{ time_elapsed }} ago {% endwith %})
                                         </div>
-                                        <div class="card-actions justify-end mt-2">
+                                        <div class="card-actions justify-end mt-3">
                                             <a
-                                                href="#"
-                                                class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
+                                                href="{% url 'join_live_class' current_live_class.meeting_id %}"
+                                                class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
                                             >
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-3 w-3 mr-1"
-                                                    viewBox="0 0 24 24"
-                                                    fill="none"
-                                                    stroke="currentColor"
-                                                    stroke-width="2"
-                                                    stroke-linecap="round"
-                                                    stroke-linejoin="round"
-                                                >
-                                                    <path
-                                                        d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-                                                    ></path>
-                                                    <path
-                                                        d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-                                                    ></path>
-                                                </svg>
-                                                Set Reminder
+                                                Join Now
                                             </a>
                                         </div>
                                     </div>
                                 </div>
+                            {% endif %}
 
+                            <!-- Upcoming Classes Accordion -->
+                            <div class="mt-5 space-y-3">
                                 <div
-                                    class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
+                                    class="collapse collapse-plus bg-white border border-slate-100 rounded-lg overflow-hidden hover:shadow-sm transition-all"
                                 >
-                                    <div class="card-body p-3">
-                                        <h3 class="font-bold text-md text-slate-800">Machine Learning Fundamentals</h3>
-                                        <p class="text-sm text-slate-600">Prof. David Kim</p>
-                                        <div class="flex items-center text-xs text-slate-500 mt-2">
-                                            <svg
-                                                xmlns="http://www.w3.org/2000/svg"
-                                                class="h-4 w-4 mr-1 text-indigo-600"
-                                                viewBox="0 0 24 24"
-                                                fill="none"
-                                                stroke="currentColor"
-                                                stroke-width="2"
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
+                                    <input type="checkbox" checked/>
+                                    <div class="collapse-title text-sm font-medium text-slate-700 bg-slate-50">
+                                        Today's Classes
+                                    </div>
+                                    <div class="collapse-content">
+                                        {% for classes in todays_live_classes %}
+                                            <div
+                                                class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
                                             >
-                                                <circle cx="12" cy="12" r="10"></circle>
-                                                <polyline points="12 6 12 12 16 14"></polyline>
-                                            </svg>
-                                            Mar 10, 11:00 AM - 12:30 PM
+                                                <div class="card-body p-3">
+                                                    <h3 class="font-bold text-md text-slate-800">{{ classes.topic }}</h3>
+                                                    <p class="text-sm text-slate-600">{{ classes.teacher }}</p>
+                                                    <div class="flex items-center text-xs text-slate-500 mt-2">
+                                                        <svg
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                            class="h-4 w-4 mr-1 text-indigo-600"
+                                                            viewBox="0 0 24 24"
+                                                            fill="none"
+                                                            stroke="currentColor"
+                                                            stroke-width="2"
+                                                            stroke-linecap="round"
+                                                            stroke-linejoin="round"
+                                                        >
+                                                            <circle cx="12" cy="12" r="10"></circle>
+                                                            <polyline points="12 6 12 12 16 14"></polyline>
+                                                        </svg>
+                                                        Today, {% with start_time=classes.scheduled_at|date:"g:i A" %}
+                                                        {{ start_time }}{% endwith %}<br/>
+                                                        Duration {{ classes.duration }} min
+                                                    </div>
+                                                    <div class="card-actions justify-end mt-2">
+                                                        <a
+                                                            href="#"
+                                                            class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
+                                                        >
+                                                            <svg
+                                                                xmlns="http://www.w3.org/2000/svg"
+                                                                class="h-3 w-3 mr-1"
+                                                                viewBox="0 0 24 24"
+                                                                fill="none"
+                                                                stroke="currentColor"
+                                                                stroke-width="2"
+                                                                stroke-linecap="round"
+                                                                stroke-linejoin="round"
+                                                            >
+                                                                <path
+                                                                    d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+                                                                ></path>
+                                                                <path
+                                                                    d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+                                                                ></path>
+                                                            </svg>
+                                                            Set Reminder
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+
+                                <div
+                                    class="collapse collapse-plus bg-white border border-slate-100 rounded-lg overflow-hidden hover:shadow-sm transition-all"
+                                >
+                                    <input type="checkbox"/>
+                                    <div class="collapse-title text-sm font-medium text-slate-700 bg-slate-50">
+                                        This Week's Classes
+                                    </div>
+                                    <div class="collapse-content">
+                                        <div
+                                            class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
+                                        >
+                                            <div class="card-body p-3">
+                                                <h3 class="font-bold text-md text-slate-800">Database Systems</h3>
+                                                <p class="text-sm text-slate-600">Prof. Emily Rodriguez</p>
+                                                <div class="flex items-center text-xs text-slate-500 mt-2">
+                                                    <svg
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        class="h-4 w-4 mr-1 text-indigo-600"
+                                                        viewBox="0 0 24 24"
+                                                        fill="none"
+                                                        stroke="currentColor"
+                                                        stroke-width="2"
+                                                        stroke-linecap="round"
+                                                        stroke-linejoin="round"
+                                                    >
+                                                        <circle cx="12" cy="12" r="10"></circle>
+                                                        <polyline points="12 6 12 12 16 14"></polyline>
+                                                    </svg>
+                                                    Mar 8, 2:00 PM - 3:30 PM
+                                                </div>
+                                                <div class="card-actions justify-end mt-2">
+                                                    <a
+                                                        href="#"
+                                                        class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
+                                                    >
+                                                        <svg
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                            class="h-3 w-3 mr-1"
+                                                            viewBox="0 0 24 24"
+                                                            fill="none"
+                                                            stroke="currentColor"
+                                                            stroke-width="2"
+                                                            stroke-linecap="round"
+                                                            stroke-linejoin="round"
+                                                        >
+                                                            <path
+                                                                d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+                                                            ></path>
+                                                            <path
+                                                                d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+                                                            ></path>
+                                                        </svg>
+                                                        Set Reminder
+                                                    </a>
+                                                </div>
+                                            </div>
                                         </div>
-                                        <div class="card-actions justify-end mt-2">
-                                            <a
-                                                href="#"
-                                                class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
-                                            >
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-3 w-3 mr-1"
-                                                    viewBox="0 0 24 24"
-                                                    fill="none"
-                                                    stroke="currentColor"
-                                                    stroke-width="2"
-                                                    stroke-linecap="round"
-                                                    stroke-linejoin="round"
-                                                >
-                                                    <path
-                                                        d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-                                                    ></path>
-                                                    <path
-                                                        d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-                                                    ></path>
-                                                </svg>
-                                                Set Reminder
-                                            </a>
+
+                                        <div
+                                            class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
+                                        >
+                                            <div class="card-body p-3">
+                                                <h3 class="font-bold text-md text-slate-800">Machine Learning
+                                                    Fundamentals</h3>
+                                                <p class="text-sm text-slate-600">Prof. David Kim</p>
+                                                <div class="flex items-center text-xs text-slate-500 mt-2">
+                                                    <svg
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        class="h-4 w-4 mr-1 text-indigo-600"
+                                                        viewBox="0 0 24 24"
+                                                        fill="none"
+                                                        stroke="currentColor"
+                                                        stroke-width="2"
+                                                        stroke-linecap="round"
+                                                        stroke-linejoin="round"
+                                                    >
+                                                        <circle cx="12" cy="12" r="10"></circle>
+                                                        <polyline points="12 6 12 12 16 14"></polyline>
+                                                    </svg>
+                                                    Mar 10, 11:00 AM - 12:30 PM
+                                                </div>
+                                                <div class="card-actions justify-end mt-2">
+                                                    <a
+                                                        href="#"
+                                                        class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
+                                                    >
+                                                        <svg
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                            class="h-3 w-3 mr-1"
+                                                            viewBox="0 0 24 24"
+                                                            fill="none"
+                                                            stroke="currentColor"
+                                                            stroke-width="2"
+                                                            stroke-linecap="round"
+                                                            stroke-linejoin="round"
+                                                        >
+                                                            <path
+                                                                d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+                                                            ></path>
+                                                            <path
+                                                                d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+                                                            ></path>
+                                                        </svg>
+                                                        Set Reminder
+                                                    </a>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    </div>
 
-                    <div class="mt-5">
-                        <a
-                            href="#"
-                            class="inline-flex items-center justify-center w-full h-9 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-sm transition-colors"
-                        >
-                            View All Classes
-                        </a>
+                            <div class="mt-5">
+                                <a
+                                    href="#"
+                                    class="inline-flex items-center justify-center w-full h-9 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-sm transition-colors"
+                                >
+                                    View All Classes
+                                </a>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
-</main>
-{% else %}
-<div class="card w-full bg-base-100 shadow-xl border border-base-300">
-    <div class="card-body items-center text-center">
-        <div class="flex flex-col items-center gap-4 py-6">
-            <!-- Empty state illustration -->
-            <div class="w-24 h-24 rounded-full bg-base-200 flex items-center justify-center">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-12 w-12 text-base-content opacity-50"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
-                    />
-                </svg>
-            </div>
+        </main>
+    {% else %}
+        <div class="card w-full bg-base-100 shadow-xl border border-base-300">
+            <div class="card-body items-center text-center">
+                <div class="flex flex-col items-center gap-4 py-6">
+                    <!-- Empty state illustration -->
+                    <div class="w-24 h-24 rounded-full bg-base-200 flex items-center justify-center">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="h-12 w-12 text-base-content opacity-50"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"
+                            />
+                        </svg>
+                    </div>
 
-            <h2 class="card-title text-xl font-bold">No Modules Available</h2>
-            <p class="text-base-content/70 mb-4">Get started by creating your first module for this course.</p>
+                    <h2 class="card-title text-xl font-bold">No Modules Available</h2>
+                    <p class="text-base-content/70 mb-4">Get started by creating your first module for this course.</p>
 
-            <a href="{% url 'create_module' course.slug %}" class="btn btn-primary gap-2">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                    <path
-                        fill-rule="evenodd"
-                        d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
-                        clip-rule="evenodd"
-                    />
-                </svg>
-                Create Module
-            </a>
+                    <a href="{% url 'create_module' course.slug %}" class="btn btn-primary gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
+                             fill="currentColor">
+                            <path
+                                fill-rule="evenodd"
+                                d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+                                clip-rule="evenodd"
+                            />
+                        </svg>
+                        Create Module
+                    </a>
+                </div>
+            </div>
         </div>
-    </div>
-</div>
 
-{% endif %}
+    {% endif %}
 {% endblock lecture_content %}
diff --git a/mindjunkies/lecture/templates/lecture/lecture_pdf.html b/mindjunkies/lecture/templates/lecture/lecture_pdf.html
index 747cc697..851ba6e4 100644
--- a/mindjunkies/lecture/templates/lecture/lecture_pdf.html
+++ b/mindjunkies/lecture/templates/lecture/lecture_pdf.html
@@ -2,66 +2,168 @@
 {% load static %}
 
 {% block main_content %}
-<div class="drawer lg:drawer-open">
-  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content flex flex-col">
-    <!-- Page content here -->
-    <div class="navbar bg-base-100 lg:hidden">
-        <div class="flex-none">
-          <div class="btn btn-square btn-ghost drawer-button">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
-          </div>
-        </div>
-        <div class="flex-1">
-          <a class="btn btn-ghost normal-case text-xl">{{lecture.title}}</a>
-        </div>
-      </div>
-
-
-    <!-- Main Content -->
-    <main class="flex-1 overflow-y-auto">
-      <!-- Breadcrumb Navigation -->
-      <div class="flex items-center justify-between p-4 border-b bg-base-100">
-        <div class="flex items-center gap-2 text-sm">
-          <a href="#" class="text-primary hover:underline">Supervised Machine Learning: Regression and Classification</a>
-          <span class="text-base-content/70">›</span>
-          <a href="#" class="text-primary hover:underline">Week 1</a>
-          <span class="text-base-content/70">›</span>
-          <span>Welcome to machine learning!</span>
-        </div>
-        <a href="#" class="btn btn-primary btn-sm">Next</a>
-      </div>
-
-      <!-- Video Content -->
-      <div class="p-4">
-        <div class="rounded-xl overflow-hidden bg-base-200">
-          <div class="aspect-w-16 aspect-h-9">
-            {% if video.url %}
-              <video
-                id="videoPlayer"
-                class="w-full h-full"
-                controls
-                poster="{% static 'images/course-thumbnail.jpg' %}"
-              >
-                <source src="{{ video.url }}" type="video/mp4">
-                <track kind="subtitles" src="{% static 'subtitles/video-subtitles.vtt' %}" srclang="en" label="English">
-                Your browser does not support the video tag.
-              </video>
-            {% endif %}
-          </div>
-          <div class="p-4">
-            <button class="btn btn-ghost btn-sm text-primary">
-              <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
-              </svg>
-              Report an issue
-            </button>
-          </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
+    <div class="drawer lg:drawer-open">
+        <input id="my-drawer" type="checkbox" class="drawer-toggle"/>
+        <div class="drawer-content flex flex-col bg-gray-50">
+            <!-- Navbar -->
+            <div class="navbar bg-white shadow-md lg:hidden">
+                <div class="flex-none">
+                    <label for="my-drawer" class="btn btn-square btn-ghost drawer-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                             class="inline-block w-6 h-6 stroke-current">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M4 6h16M4 12h16M4 18h16"></path>
+                        </svg>
+                    </label>
+                </div>
+                <div class="flex-1">
+                    <span class="text-xl font-semibold text-gray-800">{{ lecture.title }}</span>
+                </div>
+            </div>
+
+            <!-- Main Content -->
+            <main class="flex-1 overflow-y-auto">
+                <!-- Breadcrumb Navigation -->
+                <div class="flex items-center justify-between p-1 bg-white shadow-sm">
+                    <div class="flex items-center gap-2 text-sm text-gray-600">
+                        <a href="#" class="text-primary hover:underline">Supervised Machine Learning</a>
+                        <span class="text-gray-400">›</span>
+                        <a href="#" class="text-primary hover:underline">Week 1</a>
+                        <span class="text-gray-400">›</span>
+                        <span>Welcome to machine learning!</span>
+                    </div>
+                    <a href="#" class="btn btn-primary btn-sm">Next</a>
+                </div>
+
+                <!-- PDF Viewer -->
+                <div class="container mx-auto p-2">
+                    <div class="border rounded-lg shadow bg-white p-2">
+                        <h2 class="text-lg font-semibold mb-2 text-gray-800 text-center">{{ pdf.pdf_title }}</h2>
+                        <div class="flex items-center justify-between mb-2">
+                            <div>
+                                <button id="prev-page" class="btn btn-sm btn-secondary">Previous</button>
+                                <button id="next-page" class="btn btn-sm btn-secondary">Next</button>
+                            </div>
+                            <div>
+                                <button id="rotate-left" class="btn btn-sm btn-secondary">⟲</button>
+                            </div>
+                            <span id="page-info" class="text-sm text-gray-600">Page <span id="current-page">1</span> of <span
+                                id="total-pages">0</span></span>
+                            <div>
+                                <button id="rotate-right" class="btn btn-sm btn-secondary">⟳</button>
+                            </div>
+                            <div>
+                                <button id="zoom-out" class="btn btn-sm btn-secondary">-</button>
+                                <button id="zoom-in" class="btn btn-sm btn-secondary">+</button>
+                                <button id="download-pdf" class="btn btn-sm btn-primary">Download</button>
+                            </div>
+                        </div>
+                        <div id="pdf-container"
+                             class="flex justify-center items-center bg-gray-100 p-2 rounded-lg">
+                            <!-- Canvases will be added dynamically -->
+                        </div>
+                    </div>
+                </div>
+            </main>
         </div>
-      </div>
-    </main>
-  </div>
-   <!-- Sidebar Content -->
-  {% include 'lecture/lecture_content.html' %}
-</div>
-{% endblock %}
+
+        <!-- Sidebar Content -->
+        {% include 'lecture/lecture_content.html' %}
+    </div>
+
+    <script>
+        const url = "{{ pdf.pdf_file.url }}";
+
+        const container = document.getElementById("pdf-container");
+        const currentPageElement = document.getElementById("current-page");
+        const totalPagesElement = document.getElementById("total-pages");
+        const zoomInButton = document.getElementById("zoom-in");
+        const zoomOutButton = document.getElementById("zoom-out");
+        const prevPageButton = document.getElementById("prev-page");
+        const nextPageButton = document.getElementById("next-page");
+        const rotateLeftButton = document.getElementById("rotate-left");
+        const rotateRightButton = document.getElementById("rotate-right");
+        const downloadButton = document.getElementById("download-pdf");
+
+        let rotation = 0;
+        let pdfDoc = null;
+        let currentPage = 1;
+        let scale = 1;
+
+        const renderPage = (pageNumber) => {
+            pdfDoc.getPage(pageNumber).then(function (page) {
+                const viewport = page.getViewport({scale, rotation});
+
+                const canvas = document.createElement("canvas");
+                const context = canvas.getContext("2d");
+                canvas.height = viewport.height;
+                canvas.width = viewport.width;
+
+                container.innerHTML = ""; // Clear previous page
+                container.appendChild(canvas);
+
+                const renderContext = {
+                    canvasContext: context,
+                    viewport: viewport,
+                };
+                page.render(renderContext);
+
+                currentPageElement.textContent = pageNumber;
+            });
+        };
+
+        const loadPDF = () => {
+            pdfjsLib.getDocument(url).promise.then(function (doc) {
+                pdfDoc = doc;
+                totalPagesElement.textContent = pdfDoc.numPages;
+                renderPage(currentPage);
+            });
+        };
+
+        rotateLeftButton.addEventListener("click", () => {
+            rotation -= 90;
+            renderPage(currentPage);
+        });
+
+        rotateRightButton.addEventListener("click", () => {
+            rotation += 90;
+            renderPage(currentPage);
+        });
+
+        downloadButton.addEventListener("click", () => {
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = "lecture.pdf";
+            link.click();
+        });
+
+        zoomInButton.addEventListener("click", () => {
+            scale += 0.2;
+            renderPage(currentPage);
+        });
+
+        zoomOutButton.addEventListener("click", () => {
+            if (scale > 0.5) {
+                scale -= 0.2;
+                renderPage(currentPage);
+            }
+        });
+
+        prevPageButton.addEventListener("click", () => {
+            if (currentPage > 1) {
+                currentPage--;
+                renderPage(currentPage);
+            }
+        });
+
+        nextPageButton.addEventListener("click", () => {
+            if (currentPage < pdfDoc.numPages) {
+                currentPage++;
+                renderPage(currentPage);
+            }
+        });
+
+        loadPDF();
+    </script>
+{% endblock %}
\ No newline at end of file
diff --git a/mindjunkies/lecture/urls.py b/mindjunkies/lecture/urls.py
index 3e9aef74..f6c22ea5 100644
--- a/mindjunkies/lecture/urls.py
+++ b/mindjunkies/lecture/urls.py
@@ -25,4 +25,5 @@
     ),
 
     path('lecture/<int:lecture_id>/complete/', views.MarkLectureCompleteView.as_view(), name='mark_lecture_complete'),
+    path('lecture/<int:lecture_id>/pdf/<int:pdf_id>/', views.lecture_pdf, name='lecture_pdf'),
 ]
diff --git a/mindjunkies/lecture/views.py b/mindjunkies/lecture/views.py
index f7f3e8a6..3dc27be0 100644
--- a/mindjunkies/lecture/views.py
+++ b/mindjunkies/lecture/views.py
@@ -110,12 +110,13 @@ def lecture_video(request: HttpRequest, course_slug: str, module_id: str, lectur
 
 @login_required
 @require_http_methods(["GET"])
-def lecture_pdf(request: HttpRequest, slug: str, pdf_id: int) -> HttpResponse:
+def lecture_pdf(request: HttpRequest, course_slug: str, lecture_id: int, pdf_id: int) -> HttpResponse:
     """View to display a lecture PDF."""
     pdf = get_object_or_404(LecturePDF, id=pdf_id)
-    lecture = get_object_or_404(Lecture, slug=slug)
+    lecture = get_object_or_404(Lecture, id=lecture_id)
+    course = get_object_or_404(Course, slug=course_slug)
 
-    context = {"pdf": pdf, "lecture": lecture}
+    context = {"course": course, "pdf": pdf, "lecture": lecture}
     return render(request, "lecture/lecture_pdf.html", context)
 
 


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 8**

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: ASSERTIVE**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 2dd16a6fc3dbfda2a3cf710839be35d6d3c941f9 and 14f290f822927d990dd6090f5cbc06b07a6bc02e.

</details>

<details>
<summary>📒 Files selected for processing (5)</summary>

* `mindjunkies/lecture/templates/lecture/lecture_content.html` (2 hunks)
* `mindjunkies/lecture/templates/lecture/lecture_home.html` (1 hunks)
* `mindjunkies/lecture/templates/lecture/lecture_pdf.html` (1 hunks)
* `mindjunkies/lecture/urls.py` (1 hunks)
* `mindjunkies/lecture/views.py` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (2)</summary>

<details>
<summary>mindjunkies/lecture/views.py (5)</summary><blockquote>

<details>
<summary>mindjunkies/lecture/tests/test_views.py (3)</summary>

* `lecture_pdf` (46-47)
* `lecture` (36-37)
* `course` (26-27)

</details>
<details>
<summary>mindjunkies/lecture/tests/test_models.py (3)</summary>

* `lecture_pdf` (56-59)
* `lecture` (26-34)
* `course` (16-17)

</details>
<details>
<summary>mindjunkies/lecture/models.py (2)</summary>

* `LecturePDF` (38-46)
* `Lecture` (10-35)

</details>
<details>
<summary>mindjunkies/dashboard/tests/test_views.py (1)</summary>

* `course` (22-23)

</details>
<details>
<summary>mindjunkies/courses/models.py (1)</summary>

* `Course` (22-104)

</details>

</blockquote></details>
<details>
<summary>mindjunkies/lecture/urls.py (3)</summary><blockquote>

<details>
<summary>mindjunkies/lecture/views.py (1)</summary>

* `lecture_pdf` (113-120)

</details>
<details>
<summary>mindjunkies/lecture/tests/test_views.py (1)</summary>

* `lecture_pdf` (46-47)

</details>
<details>
<summary>mindjunkies/lecture/tests/test_models.py (1)</summary>

* `lecture_pdf` (56-59)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (12)</summary><blockquote>

<details>
<summary>mindjunkies/lecture/urls.py (1)</summary>

`28-28`: **URL PATTERN SUCCESSFULLY ADDED. SCANNING FOR PARAMETER CONSISTENCY.**

PARAMETERS DETECTED: 'lecture_id' AND 'pdf_id'. 
ROUTE CONNECTS TO: 'views.lecture_pdf'.
DESIGNATION: 'lecture_pdf'.

ANALYSIS COMPLETE: URL PATTERN CORRECTLY FORMATTED TO SUPPORT PDF VIEWING FUNCTIONALITY.

</details>
<details>
<summary>mindjunkies/lecture/templates/lecture/lecture_content.html (1)</summary>

`25-25`: **PDF LINK UPDATED TO NEW URL PATTERN. PARAMETER STRUCTURE VERIFIED.**

PARAMETER ANALYSIS:
- 'course.slug': MATCHES 'course_slug' PARAMETER IN VIEW FUNCTION
- 'lecture.id': MATCHES 'lecture_id' PARAMETER IN VIEW FUNCTION  
- 'pdf.id': MATCHES 'pdf_id' PARAMETER IN VIEW FUNCTION

LINK STRUCTURE PROPERLY ALIGNED WITH 'lecture_pdf' URL CONFIGURATION IN urls.py.

</details>
<details>
<summary>mindjunkies/lecture/templates/lecture/lecture_pdf.html (1)</summary>

`5-5`: **EXTERNAL DEPENDENCY DETECTED: PDF.JS LIBRARY.**

INCLUSION OF PDF.JS PROVIDES ROBUST PDF RENDERING CAPABILITIES. VERSION '2.16.105' IMPORTED FROM CDN.

</details>
<details>
<summary>mindjunkies/lecture/templates/lecture/lecture_home.html (9)</summary>

`195-205`: **Beep boop! PDF links now point to the correct viewer.**

The PDF title now links to the new `lecture_pdf` detail page using all required identifiers. This is the correct and logical way to route users to the in-browser PDF viewer. The anchor wraps both the title and reading time, which is good for accessibility. No issues detected here, human. 🦾

---

`270-274`: **Resume button links to the correct video content.**

The "Resume" button for videos uses the correct URL pattern and passes all necessary identifiers. This is logical and consistent with the rest of the template. No issues detected. Boop beep!

---

`277-278`: **Empty state for videos is handled robotically well.**

If there are no videos, a clear message is shown. This is good for user experience and prevents confusion. No further action required.

---

`216-218`: **Empty state for attachments is handled with robotic precision.**

If there are no PDF files, a clear message is displayed. This is logical and user-friendly. No issues detected.

---

`318-334`: **Live class scheduling button is clear and accessible.**

The "Schedule a live session" button is prominent and uses semantic markup. The SVG icon is decorative and does not interfere with screen readers. All systems nominal.

---

`338-368`: **Current live class block is visually distinct and accessible.**

The live class card uses a blinking indicator and clear call-to-action. The use of `timesince` for elapsed time is logical. The "Join Now" button is prominent. No issues detected, human.

---

`371-433`: **Upcoming classes accordion is well-structured.**

Today's classes are displayed in an accordion with clear times and "Set Reminder" buttons. The use of SVG icons and time formatting is logical. No issues detected.

---

`436-545`: **This week's classes accordion is consistent and clear.**

Classes are listed with all relevant details and reminder buttons. The structure matches the previous accordion, ensuring a consistent user experience. No issues detected.

---

`561-601`: **Empty state for modules is friendly and actionable.**

When no modules exist, a clear empty state with illustration and a call-to-action button is shown. The "Create Module" button is prominent and uses the correct URL. This is optimal for user onboarding. No issues detected.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-15T21:10:38Z

Review comments:
diff_hunk: @@ -53,7 +53,7 @@ <h2 class="font-bold text-lg">{{lecture.title}}</h2>
                 <ul class="menu menu-compact">
                   {% for video in lecture.videos.all %}
                     <li>
-                      <a href="{% url 'lecture_video_content' lecture.slug video.id %}"
+                      <a href="#"
path: mindjunkies/lecture/templates/lecture/lecture_content.html
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**VIDEO LINK FUNCTIONALITY DEACTIVATED. USER EXPERIENCE SUBOPTIMAL.**

PREVIOUS IMPLEMENTATION: FUNCTIONAL LINK TO VIDEO CONTENT.
CURRENT IMPLEMENTATION: NON-NAVIGABLE ANCHOR ('#').

RECOMMENDED ACTION: IMPLEMENT VIDEO VIEWER FUNCTIONALITY OR PROVIDE USER FEEDBACK INDICATING VIDEO CONTENT UNAVAILABILITY.

```diff
-<a href="#"
+<a href="#" class="cursor-not-allowed opacity-50" title="Video content currently unavailable"
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
                      <a href="#" class="cursor-not-allowed opacity-50" title="Video content currently unavailable"
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-15T21:10:36Z
author_association: NONE
diff_hunk: @@ -110,12 +110,13 @@ def lecture_video(request: HttpRequest, course_slug: str, module_id: str, lectur
 
 @login_required
 @require_http_methods(["GET"])
-def lecture_pdf(request: HttpRequest, slug: str, pdf_id: int) -> HttpResponse:
+def lecture_pdf(request: HttpRequest, course_slug: str, lecture_id: int, pdf_id: int) -> HttpResponse:
     """View to display a lecture PDF."""
     pdf = get_object_or_404(LecturePDF, id=pdf_id)
-    lecture = get_object_or_404(Lecture, slug=slug)
+    lecture = get_object_or_404(Lecture, id=lecture_id)
+    course = get_object_or_404(Course, slug=course_slug)
 
-    context = {"pdf": pdf, "lecture": lecture}
+    context = {"course": course, "pdf": pdf, "lecture": lecture}
     return render(request, "lecture/lecture_pdf.html", context)
path: mindjunkies/lecture/views.py
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**VIEW FUNCTION SIGNATURE UPDATED. SECURITY VULNERABILITY DETECTED.**

FUNCTION PARAMETERS CORRECTLY MODIFIED TO ACCEPT: 'course_slug', 'lecture_id', 'pdf_id'.
CONTEXT DATA APPROPRIATELY CONTAINS: 'course', 'pdf', 'lecture' OBJECTS.

CRITICAL DEFICIENCY: AUTHENTICATION CHECK MISSING. FUNCTION 'check_course_enrollment' NOT IMPLEMENTED.


RECOMMENDED IMPLEMENTATION:
```diff
@login_required
@require_http_methods(["GET"])
def lecture_pdf(request: HttpRequest, course_slug: str, lecture_id: int, pdf_id: int) -> HttpResponse:
    """View to display a lecture PDF."""
    pdf = get_object_or_404(LecturePDF, id=pdf_id)
    lecture = get_object_or_404(Lecture, id=lecture_id)
    course = get_object_or_404(Course, slug=course_slug)
    
+   # Ensure the user is enrolled in the related course
+   if not check_course_enrollment(request.user, course):
+       return HttpResponseForbidden("You are not enrolled in this course.")

    context = {"course": course, "pdf": pdf, "lecture": lecture}
    return render(request, "lecture/lecture_pdf.html", context)
```


> Committable suggestion skipped: line range outside the PR's diff.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-15T21:10:36Z
author_association: NONE
diff_hunk: @@ -2,66 +2,168 @@
 {% load static %}
 
 {% block main_content %}
-<div class="drawer lg:drawer-open">
-  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content flex flex-col">
-    <!-- Page content here -->
-    <div class="navbar bg-base-100 lg:hidden">
-        <div class="flex-none">
-          <div class="btn btn-square btn-ghost drawer-button">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
-          </div>
-        </div>
-        <div class="flex-1">
-          <a class="btn btn-ghost normal-case text-xl">{{lecture.title}}</a>
-        </div>
-      </div>
-
-
-    <!-- Main Content -->
-    <main class="flex-1 overflow-y-auto">
-      <!-- Breadcrumb Navigation -->
-      <div class="flex items-center justify-between p-4 border-b bg-base-100">
-        <div class="flex items-center gap-2 text-sm">
-          <a href="#" class="text-primary hover:underline">Supervised Machine Learning: Regression and Classification</a>
-          <span class="text-base-content/70">›</span>
-          <a href="#" class="text-primary hover:underline">Week 1</a>
-          <span class="text-base-content/70">›</span>
-          <span>Welcome to machine learning!</span>
-        </div>
-        <a href="#" class="btn btn-primary btn-sm">Next</a>
-      </div>
-
-      <!-- Video Content -->
-      <div class="p-4">
-        <div class="rounded-xl overflow-hidden bg-base-200">
-          <div class="aspect-w-16 aspect-h-9">
-            {% if video.url %}
-              <video
-                id="videoPlayer"
-                class="w-full h-full"
-                controls
-                poster="{% static 'images/course-thumbnail.jpg' %}"
-              >
-                <source src="{{ video.url }}" type="video/mp4">
-                <track kind="subtitles" src="{% static 'subtitles/video-subtitles.vtt' %}" srclang="en" label="English">
-                Your browser does not support the video tag.
-              </video>
-            {% endif %}
-          </div>
-          <div class="p-4">
-            <button class="btn btn-ghost btn-sm text-primary">
-              <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
-              </svg>
-              Report an issue
-            </button>
-          </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
+    <div class="drawer lg:drawer-open">
+        <input id="my-drawer" type="checkbox" class="drawer-toggle"/>
+        <div class="drawer-content flex flex-col bg-gray-50">
+            <!-- Navbar -->
+            <div class="navbar bg-white shadow-md lg:hidden">
+                <div class="flex-none">
+                    <label for="my-drawer" class="btn btn-square btn-ghost drawer-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                             class="inline-block w-6 h-6 stroke-current">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M4 6h16M4 12h16M4 18h16"></path>
+                        </svg>
+                    </label>
+                </div>
+                <div class="flex-1">
+                    <span class="text-xl font-semibold text-gray-800">{{ lecture.title }}</span>
+                </div>
+            </div>
+
+            <!-- Main Content -->
+            <main class="flex-1 overflow-y-auto">
+                <!-- Breadcrumb Navigation -->
+                <div class="flex items-center justify-between p-1 bg-white shadow-sm">
+                    <div class="flex items-center gap-2 text-sm text-gray-600">
+                        <a href="#" class="text-primary hover:underline">Supervised Machine Learning</a>
+                        <span class="text-gray-400">›</span>
+                        <a href="#" class="text-primary hover:underline">Week 1</a>
+                        <span class="text-gray-400">›</span>
+                        <span>Welcome to machine learning!</span>
+                    </div>
+                    <a href="#" class="btn btn-primary btn-sm">Next</a>
path: mindjunkies/lecture/templates/lecture/lecture_pdf.html
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**NON-FUNCTIONAL NAVIGATION ELEMENT DETECTED.**

"NEXT" BUTTON PRESENT BUT LACKS PROPER DESTINATION LINK.
RECOMMENDATION: IMPLEMENT NAVIGATION TO NEXT LECTURE IF AVAILABLE.

```diff
-<a href="#" class="btn btn-primary btn-sm">Next</a>
+{% if next_lecture %}
+    <a href="{% url 'lecture_pdf' course.slug next_lecture.id next_lecture.pdf_files.first.id %}" class="btn btn-primary btn-sm">Next</a>
+{% else %}
+    <button class="btn btn-primary btn-sm opacity-50 cursor-not-allowed">Next</button>
+{% endif %}
```

REQUIRES MODIFICATION TO VIEW FUNCTION TO PROVIDE 'next_lecture' IN CONTEXT.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
{% if next_lecture %}
    <a href="{% url 'lecture_pdf' course.slug next_lecture.id next_lecture.pdf_files.first.id %}" class="btn btn-primary btn-sm">Next</a>
{% else %}
    <button class="btn btn-primary btn-sm opacity-50 cursor-not-allowed">Next</button>
{% endif %}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-15T21:10:37Z
author_association: NONE
diff_hunk: @@ -2,66 +2,168 @@
 {% load static %}
 
 {% block main_content %}
-<div class="drawer lg:drawer-open">
-  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content flex flex-col">
-    <!-- Page content here -->
-    <div class="navbar bg-base-100 lg:hidden">
-        <div class="flex-none">
-          <div class="btn btn-square btn-ghost drawer-button">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
-          </div>
-        </div>
-        <div class="flex-1">
-          <a class="btn btn-ghost normal-case text-xl">{{lecture.title}}</a>
-        </div>
-      </div>
-
-
-    <!-- Main Content -->
-    <main class="flex-1 overflow-y-auto">
-      <!-- Breadcrumb Navigation -->
-      <div class="flex items-center justify-between p-4 border-b bg-base-100">
-        <div class="flex items-center gap-2 text-sm">
-          <a href="#" class="text-primary hover:underline">Supervised Machine Learning: Regression and Classification</a>
-          <span class="text-base-content/70">›</span>
-          <a href="#" class="text-primary hover:underline">Week 1</a>
-          <span class="text-base-content/70">›</span>
-          <span>Welcome to machine learning!</span>
-        </div>
-        <a href="#" class="btn btn-primary btn-sm">Next</a>
-      </div>
-
-      <!-- Video Content -->
-      <div class="p-4">
-        <div class="rounded-xl overflow-hidden bg-base-200">
-          <div class="aspect-w-16 aspect-h-9">
-            {% if video.url %}
-              <video
-                id="videoPlayer"
-                class="w-full h-full"
-                controls
-                poster="{% static 'images/course-thumbnail.jpg' %}"
-              >
-                <source src="{{ video.url }}" type="video/mp4">
-                <track kind="subtitles" src="{% static 'subtitles/video-subtitles.vtt' %}" srclang="en" label="English">
-                Your browser does not support the video tag.
-              </video>
-            {% endif %}
-          </div>
-          <div class="p-4">
-            <button class="btn btn-ghost btn-sm text-primary">
-              <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
-              </svg>
-              Report an issue
-            </button>
-          </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
+    <div class="drawer lg:drawer-open">
+        <input id="my-drawer" type="checkbox" class="drawer-toggle"/>
+        <div class="drawer-content flex flex-col bg-gray-50">
+            <!-- Navbar -->
+            <div class="navbar bg-white shadow-md lg:hidden">
+                <div class="flex-none">
+                    <label for="my-drawer" class="btn btn-square btn-ghost drawer-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                             class="inline-block w-6 h-6 stroke-current">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M4 6h16M4 12h16M4 18h16"></path>
+                        </svg>
+                    </label>
+                </div>
+                <div class="flex-1">
+                    <span class="text-xl font-semibold text-gray-800">{{ lecture.title }}</span>
+                </div>
+            </div>
+
+            <!-- Main Content -->
+            <main class="flex-1 overflow-y-auto">
+                <!-- Breadcrumb Navigation -->
+                <div class="flex items-center justify-between p-1 bg-white shadow-sm">
+                    <div class="flex items-center gap-2 text-sm text-gray-600">
+                        <a href="#" class="text-primary hover:underline">Supervised Machine Learning</a>
+                        <span class="text-gray-400">›</span>
+                        <a href="#" class="text-primary hover:underline">Week 1</a>
+                        <span class="text-gray-400">›</span>
+                        <span>Welcome to machine learning!</span>
+                    </div>
+                    <a href="#" class="btn btn-primary btn-sm">Next</a>
+                </div>
+
+                <!-- PDF Viewer -->
+                <div class="container mx-auto p-2">
+                    <div class="border rounded-lg shadow bg-white p-2">
+                        <h2 class="text-lg font-semibold mb-2 text-gray-800 text-center">{{ pdf.pdf_title }}</h2>
+                        <div class="flex items-center justify-between mb-2">
+                            <div>
+                                <button id="prev-page" class="btn btn-sm btn-secondary">Previous</button>
+                                <button id="next-page" class="btn btn-sm btn-secondary">Next</button>
+                            </div>
+                            <div>
+                                <button id="rotate-left" class="btn btn-sm btn-secondary">⟲</button>
+                            </div>
+                            <span id="page-info" class="text-sm text-gray-600">Page <span id="current-page">1</span> of <span
+                                id="total-pages">0</span></span>
+                            <div>
+                                <button id="rotate-right" class="btn btn-sm btn-secondary">⟳</button>
+                            </div>
+                            <div>
+                                <button id="zoom-out" class="btn btn-sm btn-secondary">-</button>
+                                <button id="zoom-in" class="btn btn-sm btn-secondary">+</button>
+                                <button id="download-pdf" class="btn btn-sm btn-primary">Download</button>
+                            </div>
+                        </div>
+                        <div id="pdf-container"
+                             class="flex justify-center items-center bg-gray-100 p-2 rounded-lg">
+                            <!-- Canvases will be added dynamically -->
+                        </div>
+                    </div>
+                </div>
+            </main>
         </div>
-      </div>
-    </main>
-  </div>
-   <!-- Sidebar Content -->
-  {% include 'lecture/lecture_content.html' %}
-</div>
-{% endblock %}
+
+        <!-- Sidebar Content -->
+        {% include 'lecture/lecture_content.html' %}
+    </div>
+
+    <script>
+        const url = "{{ pdf.pdf_file.url }}";
+
+        const container = document.getElementById("pdf-container");
+        const currentPageElement = document.getElementById("current-page");
+        const totalPagesElement = document.getElementById("total-pages");
+        const zoomInButton = document.getElementById("zoom-in");
+        const zoomOutButton = document.getElementById("zoom-out");
+        const prevPageButton = document.getElementById("prev-page");
+        const nextPageButton = document.getElementById("next-page");
+        const rotateLeftButton = document.getElementById("rotate-left");
+        const rotateRightButton = document.getElementById("rotate-right");
+        const downloadButton = document.getElementById("download-pdf");
+
+        let rotation = 0;
+        let pdfDoc = null;
+        let currentPage = 1;
+        let scale = 1;
+
+        const renderPage = (pageNumber) => {
+            pdfDoc.getPage(pageNumber).then(function (page) {
+                const viewport = page.getViewport({scale, rotation});
+
+                const canvas = document.createElement("canvas");
+                const context = canvas.getContext("2d");
+                canvas.height = viewport.height;
+                canvas.width = viewport.width;
+
+                container.innerHTML = ""; // Clear previous page
+                container.appendChild(canvas);
+
+                const renderContext = {
+                    canvasContext: context,
+                    viewport: viewport,
+                };
+                page.render(renderContext);
+
+                currentPageElement.textContent = pageNumber;
+            });
+        };
+
+        const loadPDF = () => {
+            pdfjsLib.getDocument(url).promise.then(function (doc) {
+                pdfDoc = doc;
+                totalPagesElement.textContent = pdfDoc.numPages;
+                renderPage(currentPage);
+            });
+        };
+
+        rotateLeftButton.addEventListener("click", () => {
+            rotation -= 90;
+            renderPage(currentPage);
+        });
+
+        rotateRightButton.addEventListener("click", () => {
+            rotation += 90;
+            renderPage(currentPage);
+        });
+
+        downloadButton.addEventListener("click", () => {
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = "lecture.pdf";
+            link.click();
+        });
path: mindjunkies/lecture/templates/lecture/lecture_pdf.html
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**DOWNLOAD FUNCTIONALITY ENHANCEMENT REQUIRED.**

CURRENT IMPLEMENTATION DOWNLOADS FILE WITH GENERIC NAME "lecture.pdf".
RECOMMENDATION: USE ACTUAL PDF TITLE FOR DOWNLOADED FILE.


```diff
downloadButton.addEventListener("click", () => {
    const link = document.createElement("a");
    link.href = url;
-    link.download = "lecture.pdf";
+    link.download = "{{ pdf.pdf_title|slugify }}.pdf";
    link.click();
});
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        downloadButton.addEventListener("click", () => {
            const link = document.createElement("a");
            link.href = url;
            link.download = "{{ pdf.pdf_title|slugify }}.pdf";
            link.click();
        });
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-15T21:10:37Z
author_association: NONE
diff_hunk: @@ -2,66 +2,168 @@
 {% load static %}
 
 {% block main_content %}
-<div class="drawer lg:drawer-open">
-  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content flex flex-col">
-    <!-- Page content here -->
-    <div class="navbar bg-base-100 lg:hidden">
-        <div class="flex-none">
-          <div class="btn btn-square btn-ghost drawer-button">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
-          </div>
-        </div>
-        <div class="flex-1">
-          <a class="btn btn-ghost normal-case text-xl">{{lecture.title}}</a>
-        </div>
-      </div>
-
-
-    <!-- Main Content -->
-    <main class="flex-1 overflow-y-auto">
-      <!-- Breadcrumb Navigation -->
-      <div class="flex items-center justify-between p-4 border-b bg-base-100">
-        <div class="flex items-center gap-2 text-sm">
-          <a href="#" class="text-primary hover:underline">Supervised Machine Learning: Regression and Classification</a>
-          <span class="text-base-content/70">›</span>
-          <a href="#" class="text-primary hover:underline">Week 1</a>
-          <span class="text-base-content/70">›</span>
-          <span>Welcome to machine learning!</span>
-        </div>
-        <a href="#" class="btn btn-primary btn-sm">Next</a>
-      </div>
-
-      <!-- Video Content -->
-      <div class="p-4">
-        <div class="rounded-xl overflow-hidden bg-base-200">
-          <div class="aspect-w-16 aspect-h-9">
-            {% if video.url %}
-              <video
-                id="videoPlayer"
-                class="w-full h-full"
-                controls
-                poster="{% static 'images/course-thumbnail.jpg' %}"
-              >
-                <source src="{{ video.url }}" type="video/mp4">
-                <track kind="subtitles" src="{% static 'subtitles/video-subtitles.vtt' %}" srclang="en" label="English">
-                Your browser does not support the video tag.
-              </video>
-            {% endif %}
-          </div>
-          <div class="p-4">
-            <button class="btn btn-ghost btn-sm text-primary">
-              <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
-              </svg>
-              Report an issue
-            </button>
-          </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
+    <div class="drawer lg:drawer-open">
+        <input id="my-drawer" type="checkbox" class="drawer-toggle"/>
+        <div class="drawer-content flex flex-col bg-gray-50">
+            <!-- Navbar -->
+            <div class="navbar bg-white shadow-md lg:hidden">
+                <div class="flex-none">
+                    <label for="my-drawer" class="btn btn-square btn-ghost drawer-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                             class="inline-block w-6 h-6 stroke-current">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M4 6h16M4 12h16M4 18h16"></path>
+                        </svg>
+                    </label>
+                </div>
+                <div class="flex-1">
+                    <span class="text-xl font-semibold text-gray-800">{{ lecture.title }}</span>
+                </div>
+            </div>
+
+            <!-- Main Content -->
+            <main class="flex-1 overflow-y-auto">
+                <!-- Breadcrumb Navigation -->
+                <div class="flex items-center justify-between p-1 bg-white shadow-sm">
+                    <div class="flex items-center gap-2 text-sm text-gray-600">
+                        <a href="#" class="text-primary hover:underline">Supervised Machine Learning</a>
+                        <span class="text-gray-400">›</span>
+                        <a href="#" class="text-primary hover:underline">Week 1</a>
+                        <span class="text-gray-400">›</span>
+                        <span>Welcome to machine learning!</span>
path: mindjunkies/lecture/templates/lecture/lecture_pdf.html
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**STATIC BREADCRUMB IMPLEMENTATION. DYNAMIC DATA NOT UTILIZED.**

ERROR: HARDCODED TEXT "Supervised Machine Learning", "Week 1", AND "Welcome to machine learning!"
SHOULD BE REPLACED WITH DYNAMIC DATA FROM CONTEXT VARIABLES.


RECOMMENDED IMPLEMENTATION:
```diff
-<a href="#" class="text-primary hover:underline">Supervised Machine Learning</a>
+<a href="{% url 'lecture_home' course.slug %}" class="text-primary hover:underline">{{ course.title }}</a>
 <span class="text-gray-400">›</span>
-<a href="#" class="text-primary hover:underline">Week 1</a>
+<a href="{% url 'lecture_home' course.slug %}?module_id={{lecture.module.id}}" class="text-primary hover:underline">{{ lecture.module.title }}</a>
 <span class="text-gray-400">›</span>
-<span>Welcome to machine learning!</span>
+<span>{{ lecture.title }}</span>
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
                        <a href="{% url 'lecture_home' course.slug %}" class="text-primary hover:underline">{{ course.title }}</a>
                        <span class="text-gray-400">›</span>
                        <a href="{% url 'lecture_home' course.slug %}?module_id={{lecture.module.id}}" class="text-primary hover:underline">{{ lecture.module.title }}</a>
                        <span class="text-gray-400">›</span>
                        <span>{{ lecture.title }}</span>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-15T21:10:37Z
author_association: NONE
diff_hunk: @@ -2,66 +2,168 @@
 {% load static %}
 
 {% block main_content %}
-<div class="drawer lg:drawer-open">
-  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content flex flex-col">
-    <!-- Page content here -->
-    <div class="navbar bg-base-100 lg:hidden">
-        <div class="flex-none">
-          <div class="btn btn-square btn-ghost drawer-button">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
-          </div>
-        </div>
-        <div class="flex-1">
-          <a class="btn btn-ghost normal-case text-xl">{{lecture.title}}</a>
-        </div>
-      </div>
-
-
-    <!-- Main Content -->
-    <main class="flex-1 overflow-y-auto">
-      <!-- Breadcrumb Navigation -->
-      <div class="flex items-center justify-between p-4 border-b bg-base-100">
-        <div class="flex items-center gap-2 text-sm">
-          <a href="#" class="text-primary hover:underline">Supervised Machine Learning: Regression and Classification</a>
-          <span class="text-base-content/70">›</span>
-          <a href="#" class="text-primary hover:underline">Week 1</a>
-          <span class="text-base-content/70">›</span>
-          <span>Welcome to machine learning!</span>
-        </div>
-        <a href="#" class="btn btn-primary btn-sm">Next</a>
-      </div>
-
-      <!-- Video Content -->
-      <div class="p-4">
-        <div class="rounded-xl overflow-hidden bg-base-200">
-          <div class="aspect-w-16 aspect-h-9">
-            {% if video.url %}
-              <video
-                id="videoPlayer"
-                class="w-full h-full"
-                controls
-                poster="{% static 'images/course-thumbnail.jpg' %}"
-              >
-                <source src="{{ video.url }}" type="video/mp4">
-                <track kind="subtitles" src="{% static 'subtitles/video-subtitles.vtt' %}" srclang="en" label="English">
-                Your browser does not support the video tag.
-              </video>
-            {% endif %}
-          </div>
-          <div class="p-4">
-            <button class="btn btn-ghost btn-sm text-primary">
-              <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
-              </svg>
-              Report an issue
-            </button>
-          </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
+    <div class="drawer lg:drawer-open">
+        <input id="my-drawer" type="checkbox" class="drawer-toggle"/>
+        <div class="drawer-content flex flex-col bg-gray-50">
+            <!-- Navbar -->
+            <div class="navbar bg-white shadow-md lg:hidden">
+                <div class="flex-none">
+                    <label for="my-drawer" class="btn btn-square btn-ghost drawer-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                             class="inline-block w-6 h-6 stroke-current">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                  d="M4 6h16M4 12h16M4 18h16"></path>
+                        </svg>
+                    </label>
+                </div>
+                <div class="flex-1">
+                    <span class="text-xl font-semibold text-gray-800">{{ lecture.title }}</span>
+                </div>
+            </div>
+
+            <!-- Main Content -->
+            <main class="flex-1 overflow-y-auto">
+                <!-- Breadcrumb Navigation -->
+                <div class="flex items-center justify-between p-1 bg-white shadow-sm">
+                    <div class="flex items-center gap-2 text-sm text-gray-600">
+                        <a href="#" class="text-primary hover:underline">Supervised Machine Learning</a>
+                        <span class="text-gray-400">›</span>
+                        <a href="#" class="text-primary hover:underline">Week 1</a>
+                        <span class="text-gray-400">›</span>
+                        <span>Welcome to machine learning!</span>
+                    </div>
+                    <a href="#" class="btn btn-primary btn-sm">Next</a>
+                </div>
+
+                <!-- PDF Viewer -->
+                <div class="container mx-auto p-2">
+                    <div class="border rounded-lg shadow bg-white p-2">
+                        <h2 class="text-lg font-semibold mb-2 text-gray-800 text-center">{{ pdf.pdf_title }}</h2>
+                        <div class="flex items-center justify-between mb-2">
+                            <div>
+                                <button id="prev-page" class="btn btn-sm btn-secondary">Previous</button>
+                                <button id="next-page" class="btn btn-sm btn-secondary">Next</button>
+                            </div>
+                            <div>
+                                <button id="rotate-left" class="btn btn-sm btn-secondary">⟲</button>
+                            </div>
+                            <span id="page-info" class="text-sm text-gray-600">Page <span id="current-page">1</span> of <span
+                                id="total-pages">0</span></span>
+                            <div>
+                                <button id="rotate-right" class="btn btn-sm btn-secondary">⟳</button>
+                            </div>
+                            <div>
+                                <button id="zoom-out" class="btn btn-sm btn-secondary">-</button>
+                                <button id="zoom-in" class="btn btn-sm btn-secondary">+</button>
+                                <button id="download-pdf" class="btn btn-sm btn-primary">Download</button>
+                            </div>
+                        </div>
+                        <div id="pdf-container"
+                             class="flex justify-center items-center bg-gray-100 p-2 rounded-lg">
+                            <!-- Canvases will be added dynamically -->
+                        </div>
+                    </div>
+                </div>
+            </main>
         </div>
-      </div>
-    </main>
-  </div>
-   <!-- Sidebar Content -->
-  {% include 'lecture/lecture_content.html' %}
-</div>
-{% endblock %}
+
+        <!-- Sidebar Content -->
+        {% include 'lecture/lecture_content.html' %}
+    </div>
+
+    <script>
+        const url = "{{ pdf.pdf_file.url }}";
+
+        const container = document.getElementById("pdf-container");
+        const currentPageElement = document.getElementById("current-page");
+        const totalPagesElement = document.getElementById("total-pages");
+        const zoomInButton = document.getElementById("zoom-in");
+        const zoomOutButton = document.getElementById("zoom-out");
+        const prevPageButton = document.getElementById("prev-page");
+        const nextPageButton = document.getElementById("next-page");
+        const rotateLeftButton = document.getElementById("rotate-left");
+        const rotateRightButton = document.getElementById("rotate-right");
+        const downloadButton = document.getElementById("download-pdf");
+
+        let rotation = 0;
+        let pdfDoc = null;
+        let currentPage = 1;
+        let scale = 1;
+
+        const renderPage = (pageNumber) => {
+            pdfDoc.getPage(pageNumber).then(function (page) {
+                const viewport = page.getViewport({scale, rotation});
+
+                const canvas = document.createElement("canvas");
+                const context = canvas.getContext("2d");
+                canvas.height = viewport.height;
+                canvas.width = viewport.width;
+
+                container.innerHTML = ""; // Clear previous page
+                container.appendChild(canvas);
+
+                const renderContext = {
+                    canvasContext: context,
+                    viewport: viewport,
+                };
+                page.render(renderContext);
+
+                currentPageElement.textContent = pageNumber;
+            });
+        };
+
+        const loadPDF = () => {
+            pdfjsLib.getDocument(url).promise.then(function (doc) {
+                pdfDoc = doc;
+                totalPagesElement.textContent = pdfDoc.numPages;
+                renderPage(currentPage);
+            });
+        };
+
+        rotateLeftButton.addEventListener("click", () => {
+            rotation -= 90;
+            renderPage(currentPage);
+        });
+
+        rotateRightButton.addEventListener("click", () => {
+            rotation += 90;
+            renderPage(currentPage);
+        });
+
+        downloadButton.addEventListener("click", () => {
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = "lecture.pdf";
+            link.click();
+        });
+
+        zoomInButton.addEventListener("click", () => {
+            scale += 0.2;
+            renderPage(currentPage);
+        });
+
+        zoomOutButton.addEventListener("click", () => {
+            if (scale > 0.5) {
+                scale -= 0.2;
+                renderPage(currentPage);
+            }
+        });
+
+        prevPageButton.addEventListener("click", () => {
+            if (currentPage > 1) {
+                currentPage--;
+                renderPage(currentPage);
+            }
+        });
+
+        nextPageButton.addEventListener("click", () => {
+            if (currentPage < pdfDoc.numPages) {
+                currentPage++;
+                renderPage(currentPage);
+            }
+        });
+
+        loadPDF();
+    </script>
path: mindjunkies/lecture/templates/lecture/lecture_pdf.html
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**PDF VIEWER IMPLEMENTATION. COMPREHENSIVE BUT REQUIRES ENHANCEMENTS.**

FUNCTIONALITY ANALYSIS:
- PDF LOADING: IMPLEMENTED
- PAGE NAVIGATION: IMPLEMENTED
- ZOOM CONTROLS: IMPLEMENTED
- ROTATION CONTROLS: IMPLEMENTED
- DOWNLOAD OPTION: IMPLEMENTED

DEFICIENCIES DETECTED:
1. ERROR HANDLING: ABSENT
2. LOADING INDICATOR: ABSENT
3. KEYBOARD NAVIGATION: ABSENT



RECOMMENDED IMPLEMENTATION IMPROVEMENT:

```diff
const loadPDF = () => {
+    // Show loading indicator
+    container.innerHTML = '<div class="flex justify-center items-center p-8"><div class="loading loading-spinner loading-lg"></div></div>';
+    
    pdfjsLib.getDocument(url).promise.then(function (doc) {
        pdfDoc = doc;
        totalPagesElement.textContent = pdfDoc.numPages;
        renderPage(currentPage);
+    }).catch(function(error) {
+        container.innerHTML = `<div class="alert alert-error shadow-lg"><div><svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><span>Error loading PDF: ${error.message}</span></div></div>`;
+        console.error('Error loading PDF:', error);
    });
};

+// Add keyboard navigation
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowRight' || e.key === 'PageDown') {
+        if (currentPage < pdfDoc?.numPages) {
+            currentPage++;
+            renderPage(currentPage);
+        }
+    } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
+        if (currentPage > 1) {
+            currentPage--;
+            renderPage(currentPage);
+        }
+    } else if (e.key === '+') {
+        scale += 0.2;
+        renderPage(currentPage);
+    } else if (e.key === '-') {
+        if (scale > 0.5) {
+            scale -= 0.2;
+            renderPage(currentPage);
+        }
+    }
+});
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
        const url = "{{ pdf.pdf_file.url }}";

        const container = document.getElementById("pdf-container");
        const currentPageElement = document.getElementById("current-page");
        const totalPagesElement = document.getElementById("total-pages");
        const zoomInButton = document.getElementById("zoom-in");
        const zoomOutButton = document.getElementById("zoom-out");
        const prevPageButton = document.getElementById("prev-page");
        const nextPageButton = document.getElementById("next-page");
        const rotateLeftButton = document.getElementById("rotate-left");
        const rotateRightButton = document.getElementById("rotate-right");
        const downloadButton = document.getElementById("download-pdf");

        let rotation = 0;
        let pdfDoc = null;
        let currentPage = 1;
        let scale = 1;

        const renderPage = (pageNumber) => {
            pdfDoc.getPage(pageNumber).then(function (page) {
                const viewport = page.getViewport({scale, rotation});

                const canvas = document.createElement("canvas");
                const context = canvas.getContext("2d");
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                container.innerHTML = ""; // Clear previous page
                container.appendChild(canvas);

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport,
                };
                page.render(renderContext);

                currentPageElement.textContent = pageNumber;
            });
        };

        const loadPDF = () => {
            // Show loading indicator
            container.innerHTML = '<div class="flex justify-center items-center p-8"><div class="loading loading-spinner loading-lg"></div></div>';
    
            pdfjsLib.getDocument(url).promise.then(function (doc) {
                pdfDoc = doc;
                totalPagesElement.textContent = pdfDoc.numPages;
                renderPage(currentPage);
            }).catch(function(error) {
                container.innerHTML = `<div class="alert alert-error shadow-lg"><div><svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg><span>Error loading PDF: ${error.message}</span></div></div>`;
                console.error('Error loading PDF:', error);
            });
        };

        rotateLeftButton.addEventListener("click", () => {
            rotation -= 90;
            renderPage(currentPage);
        });

        rotateRightButton.addEventListener("click", () => {
            rotation += 90;
            renderPage(currentPage);
        });

        downloadButton.addEventListener("click", () => {
            const link = document.createElement("a");
            link.href = url;
            link.download = "lecture.pdf";
            link.click();
        });

        zoomInButton.addEventListener("click", () => {
            scale += 0.2;
            renderPage(currentPage);
        });

        zoomOutButton.addEventListener("click", () => {
            if (scale > 0.5) {
                scale -= 0.2;
                renderPage(currentPage);
            }
        });

        prevPageButton.addEventListener("click", () => {
            if (currentPage > 1) {
                currentPage--;
                renderPage(currentPage);
            }
        });

        nextPageButton.addEventListener("click", () => {
            if (currentPage < pdfDoc.numPages) {
                currentPage++;
                renderPage(currentPage);
            }
        });

        // Add keyboard navigation
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight' || e.key === 'PageDown') {
                if (currentPage < pdfDoc?.numPages) {
                    currentPage++;
                    renderPage(currentPage);
                }
            } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
                if (currentPage > 1) {
                    currentPage--;
                    renderPage(currentPage);
                }
            } else if (e.key === '+') {
                scale += 0.2;
                renderPage(currentPage);
            } else if (e.key === '-') {
                if (scale > 0.5) {
                    scale -= 0.2;
                    renderPage(currentPage);
                }
            }
        });

        loadPDF();
    </script>
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-15T21:10:37Z
author_association: NONE
diff_hunk: @@ -1,590 +1,602 @@
 {% extends 'lecture/base.html' %} {% load static %}
 {% block lecture_content %}
-<!-- Main Content with Responsive Layout -->
-{% if current_module %}
-<main class="flex flex-col lg:flex-row flex-grow overflow-auto bg-slate-50">
-    <!-- Center Content Area -->
-    <div class="flex-grow p-4 lg:p-8 overflow-y-auto">
-        <!-- Module Title at Top Center -->
-        <div
-            class="text-center mb-6 bg-white p-6 rounded-xl shadow-sm border border-slate-100 transition-all hover:shadow-md"
-        >
-            <div class="flex items-center justify-center gap-3">
-                <h1 class="text-2xl font-bold text-slate-800">
-                    Module {{ current_module.order }}: {{ current_module.title }}
-                </h1>
-                {% if isTeacher %}
-                    <a
-                        href="{% url 'create_lecture' course.slug current_module.id %}"
-                        class="transition-all hover:scale-110 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 rounded-full p-1"
-                    >
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <circle cx="12" cy="12" r="10" stroke="#4F46E5" stroke-width="2"/>
-                            <path
-                                d="M12 7V17M7 12H17"
-                                stroke="#4F46E5"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            />
-                        </svg>
-                    </a>
-                {% endif %}
-            </div>
-        </div>
-
-        <!-- Weeks/Lectures in Module -->
-
-        {% for lecture in current_module.lectures.all %}
-            <div
-                class="collapse collapse-arrow bg-white border border-slate-100 rounded-xl mb-5 shadow-sm overflow-hidden transition-all hover:shadow-md"
-            >
-            <input
-                type="checkbox"
-                id="collapse-{{ lecture.id }}"
-                class="peer"
-                {%
-                if
-                forloop.first
-                %}checked{%
-                endif
-                %}
-            />
-            <div
-                class="collapse-title text-xl font-medium flex items-center peer-checked:bg-indigo-50/50 transition-colors">
-                <div class="flex items-center gap-3 w-full">
-                    <span class="text-slate-800 flex-grow">Lecture {{ lecture.order }}: {{ lecture.title }}</span>
-
-                </div>
-            </div>
-
-            <!-- Week Content -->
-            <div class="collapse-content bg-white">
-            <div class="mt-3">
-                {% if isTeacher %}
-                    <a href="{% url 'edit_lecture' course.slug lecture.slug %}"
-                       class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-100 rounded-md transition-all hover:bg-indigo-100 hover:text-indigo-700 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 edit-link">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
-                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-                        </svg>
-                        Edit
-                    </a>
-                {% endif %}
-            </div>
-            <!-- Week Stats -->
-            <div class="flex flex-wrap gap-4 p-5 bg-slate-50 rounded-lg mt-2 border border-slate-100">
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
-                    <div class="flex items-center gap-2 text-sm">
-                        <div class="bg-indigo-100 p-2 rounded-full">
-                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
-                                <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
-                                />
-                            </svg>
-                        </div>
-                        <span>1h 30m of videos left</span>
-                    </div>
-                    <div class="flex items-center gap-2 text-sm">
-                        <div class="bg-indigo-100 p-2 rounded-full">
-                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
-                                <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-                                />
-                            </svg>
-                        </div>
-                        <span>45m of readings left</span>
-                    </div>
-                    <div class="flex items-center gap-2 text-sm">
-                        <div class="bg-indigo-100 p-2 rounded-full">
-                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
-                                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
-                            </svg>
-                        </div>
-                        <span>2 graded assessments left</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Week Description -->
-            <div class="mt-5 bg-white p-5 rounded-lg border border-slate-100">
-                <h3 class="text-lg font-medium text-slate-800 mb-2">Description</h3>
-                <p class="text-slate-600">{{ lecture.description }}</p>
-                <div class="collapse mt-4 border border-slate-100 rounded-lg overflow-hidden">
-                    <input type="checkbox" class="peer" id="toggle-{{ lecture.id }}"/>
-                    <div
-                        class="collapse-title text-md text-indigo-600 font-medium flex items-center space-x-2 bg-slate-50 peer-checked:bg-indigo-50"
-                    >
-                        <svg
-                            class="w-5 h-5 text-indigo-600 peer-checked:rotate-180 transition-transform"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M19 9l-7 7-7-7"
-                            />
-                        </svg>
-                        <span>Show Learning Objectives</span>
-                    </div>
-                    <div class="collapse-content bg-white">
-                        <div class="py-3 px-1">{{ lecture.learning_objective }}</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Lecture Items -->
-            <div class="card bg-base-100 shadow-lg p-6 mt-5">
-            <h3 class="text-xl font-serif font-medium text-slate-800 mb-4 px-1">Learning Materials</h3>
-
-            <!-- Attachments Section -->
-            <div class="w-full mt-3 flex justify-between items-center">
-                <h2 class="text-base font-medium">Attachment</h2>
-                {% if isTeacher %}
-                    <div class="relative group">
-                        <a
-                            href="{% url 'create_content' course.slug lecture.slug 'attachment' %}"
-                            class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 text-indigo-600 border-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
-                        >
-                            <svg
-                                class="h-4 w-4 mr-1.5"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
+    <!-- Main Content with Responsive Layout -->
+    {% if current_module %}
+        <main class="flex flex-col lg:flex-row flex-grow overflow-auto bg-slate-50">
+            <!-- Center Content Area -->
+            <div class="flex-grow p-4 lg:p-8 overflow-y-auto">
+                <!-- Module Title at Top Center -->
+                <div
+                    class="text-center mb-6 bg-white p-6 rounded-xl shadow-sm border border-slate-100 transition-all hover:shadow-md"
+                >
+                    <div class="flex items-center justify-center gap-3">
+                        <h1 class="text-2xl font-bold text-slate-800">
+                            Module {{ current_module.order }}: {{ current_module.title }}
+                        </h1>
+                        {% if isTeacher %}
+                            <a
+                                href="{% url 'create_lecture' course.slug current_module.id %}"
+                                class="transition-all hover:scale-110 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 rounded-full p-1"
                             >
-                                <path
-                                    d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"
-                                />
-                            </svg>
-                            Attachment
-                        </a>
-                    </div>
-                {% endif %}
-            </div>
-
-            <!-- PDF Files Section -->
-            <div class="space-y-3 mt-4">
-                {% if lecture.pdf_files %}
-                    {% for pdf in lecture.pdf_files.all %}
-                        <div
-                            class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
-                        >
-                            <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
-                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                                     xmlns="http://www.w3.org/2000/svg">
+                                    <circle cx="12" cy="12" r="10" stroke="#4F46E5" stroke-width="2"/>
                                     <path
-                                        d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+                                        d="M12 7V17M7 12H17"
+                                        stroke="#4F46E5"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
                                     />
                                 </svg>
-                            </div>
-                            <div class="flex-1">
-                                <h4 class="font-medium text-slate-800">
-                                    <a href="" class="hover:text-indigo-600 transition-colors">
-                                        {{ pdf.pdf_title }}
-                                    </a>
-                                </h4>
-                                <p class="text-xs text-slate-500">
-                                    Reading • {% if item_num == "1" %}15{% elif item_num == "2" %}20{% else %}
-                                    25{% endif %} min
-                                </p>
-                            </div>
-                            <a
-                                href="{{ pdf.pdf_file.url }}"
-                                class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                                download
-                            >
-                                Download
                             </a>
-                        </div>
-                    {% endfor %}
-                {% endif %} {% if not lecture.pdf_files.all %}
-                <p class="text-slate-500 italic">No attachment available</p>
-            {% endif %}
-            </div>
-
-            <!-- Videos Section -->
-            <div class="mt-6">
-            {% if isTeacher %}
-                <div class="flex justify-between items-center mb-3">
-                    <h2 class="text-base font-medium">Videos</h2>
-                    <div class="relative group">
-                        <a
-                            href="{% url 'create_content' course.slug lecture.slug 'video' %}"
-                            class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 border-indigo-600 text-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
-                        >
-                            <svg
-                                class="h-4 w-4 mr-1.5"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <polygon points="23 7 16 12 23 17 23 7"/>
-                                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
-                            </svg>
-                            Video
-                        </a>
+                        {% endif %}
                     </div>
                 </div>
-            {% endif %}
 
-            <div class="space-y-3">
-            {% for video in lecture.videos.all %}
-            <div
-                class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
-            >
-                <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
-                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
-                        <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
+                <!-- Weeks/Lectures in Module -->
+
+                {% for lecture in current_module.lectures.all %}
+                    <div
+                        class="collapse collapse-arrow bg-white border border-slate-100 rounded-xl mb-5 shadow-sm overflow-hidden transition-all hover:shadow-md"
+                    >
+                        <input
+                            type="checkbox"
+                            id="collapse-{{ lecture.id }}"
+                            class="peer"
+                            {% if forloop.first %}
+                            checked
+                            {% endif %}
                         />
-                    </svg>
-                </div>
-                <div class="flex-1">
-                    <h4 class="font-medium text-slate-800">
-                        <a href="#" class="hover:text-indigo-600 transition-colors">
-                            {{ video.video_title }}
-                        </a>
-                    </h4>
-                    <p class="text-xs text-slate-500">Video • 45 min</p>
-                </div>
-                <a
-                    href="{% url 'lecture_video_content' course.slug current_module.id lecture.id video.id %}"
-                    class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                >
-                    Resume
-                </a>
-            </div>
-        {% endfor %} {% if not lecture.videos.all %}
-        <p class="text-slate-500 italic">No videos available</p>
-    {% endif %}
-        </div>
-        </div>
-        </div>
-        </div>
-        </div>
-        {% endfor %}
-    </div>
+                        <div
+                            class="collapse-title text-xl font-medium flex items-center peer-checked:bg-indigo-50/50 transition-colors">
+                            <div class="flex items-center gap-3 w-full">
+                                <span
+                                    class="text-slate-800 flex-grow">Lecture {{ lecture.order }}: {{ lecture.title }}</span>
 
-    <!-- Right Sidebar - Live Classes Section -->
-    <div class="w-full lg:w-80 p-4 border-t lg:border-t-0 lg:border-l border-slate-200 bg-white">
-        <div class="lg:sticky lg:top-0 pt-2">
-            <div class="card bg-white shadow-sm rounded-xl border border-slate-100">
-                <div class="card-body p-5">
-                    <h2 class="card-title text-lg font-bold flex items-center text-slate-800 mb-4">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-5 w-5 mr-2 text-indigo-600"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        >
-                            <path d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
-                            <path d="M12 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z"></path>
-                            <path d="m16.8 17.7-.7-.7"></path>
-                            <path d="m7.9 7-.7-.7"></path>
-                            <path d="M12 18v2"></path>
-                            <path d="M12 4V2"></path>
-                            <path d="m17.5 7-1.4 1.4"></path>
-                            <path d="M4 12H2"></path>
-                            <path d="M7.9 17 7 17.9"></path>
-                            <path d="M22 12h-2"></path>
-                        </svg>
-                        Live Classes
-                    </h2>
-                    <div class="mt-4">
-                        <a
-                            href="{% url 'create_live_class' course.slug %}"
-                            class="inline-flex items-center justify-center w-full h-10 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                class="h-4 w-4 mr-2"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <path d="M12 5v14M5 12h14"/>
-                            </svg>
-                            Schedule a live session
-                        </a>
-                    </div>
+                            </div>
+                        </div>
 
-                    <!-- Current Live Class (Blinking) -->
-                    {% if current_live_class %}
-                        <div
-                            class="mt-5 card bg-white shadow-sm relative overflow-hidden border border-slate-100 rounded-xl hover:shadow-md transition-all"
-                        >
-                            <div class="absolute inset-0 bg-gradient-to-r from-indigo-50/50 to-transparent"></div>
-                            <div class="card-body p-4 relative">
-                                <h3 class="font-bold text-md text-slate-800">{{ current_live_class.topic }}</h3>
-                                <p class="text-sm text-slate-600">{{ current_live_class.teacher }}</p>
-                                <div class="flex items-center text-xs text-slate-500 mt-2">
-                                <span class="flex h-3 w-3 mr-2">
-                                    <span
-                                        class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"
-                                    ></span>
-                                    <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
-                                </span>
-                                    Live Now (Started
-                                    {% with current_live_class.scheduled_at|timesince as time_elapsed %}
-                                        {{ time_elapsed }} ago {% endwith %})
-                                </div>
-                                <div class="card-actions justify-end mt-3">
-                                    <a
-                                        href="{% url 'join_live_class' current_live_class.meeting_id %}"
-                                        class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                                    >
-                                        Join Now
+                        <!-- Week Content -->
+                        <div class="collapse-content bg-white">
+                            <div class="mt-3">
+                                {% if isTeacher %}
+                                    <a href="{% url 'edit_lecture' course.slug lecture.slug %}"
+                                       class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-100 rounded-md transition-all hover:bg-indigo-100 hover:text-indigo-700 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 edit-link">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24"
+                                             fill="none"
+                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                             stroke-linejoin="round">
+                                            <path
+                                                d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                                        </svg>
+                                        Edit
                                     </a>
+                                {% endif %}
+                            </div>
+                            <!-- Week Stats -->
+                            <div class="flex flex-wrap gap-4 p-5 bg-slate-50 rounded-lg mt-2 border border-slate-100">
+                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
+                                    <div class="flex items-center gap-2 text-sm">
+                                        <div class="bg-indigo-100 p-2 rounded-full">
+                                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24"
+                                                 fill="currentColor">
+                                                <path
+                                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
+                                                />
+                                            </svg>
+                                        </div>
+                                        <span>1h 30m of videos left</span>
+                                    </div>
+                                    <div class="flex items-center gap-2 text-sm">
+                                        <div class="bg-indigo-100 p-2 rounded-full">
+                                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24"
+                                                 fill="currentColor">
+                                                <path
+                                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+                                                />
+                                            </svg>
+                                        </div>
+                                        <span>45m of readings left</span>
+                                    </div>
+                                    <div class="flex items-center gap-2 text-sm">
+                                        <div class="bg-indigo-100 p-2 rounded-full">
+                                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24"
+                                                 fill="currentColor">
+                                                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+                                            </svg>
+                                        </div>
+                                        <span>2 graded assessments left</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    {% endif %}
 
-                    <!-- Upcoming Classes Accordion -->
-                    <div class="mt-5 space-y-3">
-                        <div
-                            class="collapse collapse-plus bg-white border border-slate-100 rounded-lg overflow-hidden hover:shadow-sm transition-all"
-                        >
-                            <input type="checkbox" checked/>
-                            <div class="collapse-title text-sm font-medium text-slate-700 bg-slate-50">
-                                Today's Classes
-                            </div>
-                            <div class="collapse-content">
-                                {% for classes in todays_live_classes %}
+                            <!-- Week Description -->
+                            <div class="mt-5 bg-white p-5 rounded-lg border border-slate-100">
+                                <h3 class="text-lg font-medium text-slate-800 mb-2">Description</h3>
+                                <p class="text-slate-600">{{ lecture.description }}</p>
+                                <div class="collapse mt-4 border border-slate-100 rounded-lg overflow-hidden">
+                                    <input type="checkbox" class="peer" id="toggle-{{ lecture.id }}"/>
                                     <div
-                                        class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
+                                        class="collapse-title text-md text-indigo-600 font-medium flex items-center space-x-2 bg-slate-50 peer-checked:bg-indigo-50"
                                     >
-                                        <div class="card-body p-3">
-                                            <h3 class="font-bold text-md text-slate-800">{{ classes.topic }}</h3>
-                                            <p class="text-sm text-slate-600">{{ classes.teacher }}</p>
-                                            <div class="flex items-center text-xs text-slate-500 mt-2">
+                                        <svg
+                                            class="w-5 h-5 text-indigo-600 peer-checked:rotate-180 transition-transform"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                            stroke="currentColor"
+                                        >
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                stroke-width="2"
+                                                d="M19 9l-7 7-7-7"
+                                            />
+                                        </svg>
+                                        <span>Show Learning Objectives</span>
+                                    </div>
+                                    <div class="collapse-content bg-white">
+                                        <div class="py-3 px-1">{{ lecture.learning_objective }}</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Lecture Items -->
+                            <div class="card bg-base-100 shadow-lg p-6 mt-5">
+                                <h3 class="text-xl font-serif font-medium text-slate-800 mb-4 px-1">Learning
+                                    Materials</h3>
+
+                                <!-- Attachments Section -->
+                                <div class="w-full mt-3 flex justify-between items-center">
+                                    <h2 class="text-base font-medium">Attachment</h2>
+                                    {% if isTeacher %}
+                                        <div class="relative group">
+                                            <a
+                                                href="{% url 'create_content' course.slug lecture.slug 'attachment' %}"
+                                                class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 text-indigo-600 border-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
+                                            >
                                                 <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-4 w-4 mr-1 text-indigo-600"
+                                                    class="h-4 w-4 mr-1.5"
                                                     viewBox="0 0 24 24"
                                                     fill="none"
                                                     stroke="currentColor"
                                                     stroke-width="2"
                                                     stroke-linecap="round"
                                                     stroke-linejoin="round"
                                                 >
-                                                    <circle cx="12" cy="12" r="10"></circle>
-                                                    <polyline points="12 6 12 12 16 14"></polyline>
+                                                    <path
+                                                        d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"
+                                                    />
                                                 </svg>
-                                                Today, {% with start_time=classes.scheduled_at|date:"g:i A" %}
-                                                {{ start_time }}{% endwith %}<br/>
-                                                Duration {{ classes.duration }} min
+                                                Attachment
+                                            </a>
+                                        </div>
+                                    {% endif %}
+                                </div>
+
+                                <!-- PDF Files Section -->
+                                <div class="space-y-3 mt-4">
+                                    {% if lecture.pdf_files %}
+                                        {% for pdf in lecture.pdf_files.all %}
+                                            <div
+                                                class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
+                                            >
+
+                                                    <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
+                                                        <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
+                                                            <path
+                                                                d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+                                                            />
+                                                        </svg>
+                                                    </div>
+                                                    <div class="flex-1">
+                                                        <a href="{% url 'lecture_pdf' course.slug lecture.id pdf.id %}">
+                                                        <h4 class="font-medium text-slate-800">
+                                                            {{ pdf.pdf_title }}
+                                                        </h4>
+                                                        <p class="text-xs text-slate-500">
+                                                            Reading • {% if item_num == "1" %}
+                                                            15{% elif item_num == "2" %}
+                                                            20{% else %}
+                                                            25{% endif %} min
+                                                        </p>
+                                                        </a>
+                                                    </div>
+                                                    <a
+                                                        href="{{ pdf.pdf_file.url }}"
+                                                        class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
+                                                        download
+                                                    >
+                                                        Download
+                                                    </a>
                                             </div>
-                                            <div class="card-actions justify-end mt-2">
+                                        {% endfor %}
+                                    {% endif %} {% if not lecture.pdf_files.all %}
+                                    <p class="text-slate-500 italic">No attachment available</p>
+                                {% endif %}
+                                </div>
+
+                                <!-- Videos Section -->
+                                <div class="mt-6">
+                                    {% if isTeacher %}
+                                        <div class="flex justify-between items-center mb-3">
+                                            <h2 class="text-base font-medium">Videos</h2>
+                                            <div class="relative group">
                                                 <a
-                                                    href="#"
-                                                    class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
+                                                    href="{% url 'create_content' course.slug lecture.slug 'video' %}"
+                                                    class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 border-indigo-600 text-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
                                                 >
                                                     <svg
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        class="h-3 w-3 mr-1"
+                                                        class="h-4 w-4 mr-1.5"
                                                         viewBox="0 0 24 24"
                                                         fill="none"
                                                         stroke="currentColor"
                                                         stroke-width="2"
                                                         stroke-linecap="round"
                                                         stroke-linejoin="round"
                                                     >
-                                                        <path
-                                                            d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-                                                        ></path>
-                                                        <path
-                                                            d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-                                                        ></path>
+                                                        <polygon points="23 7 16 12 23 17 23 7"/>
+                                                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                                                     </svg>
-                                                    Set Reminder
+                                                    Video
                                                 </a>
                                             </div>
                                         </div>
+                                    {% endif %}
+
+                                    <div class="space-y-3">
+                                        {% for video in lecture.videos.all %}
+                                            <div
+                                                class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
+                                            >
+                                                <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
+                                                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
+                                                        <path
+                                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
+                                                        />
+                                                    </svg>
+                                                </div>
+                                                <div class="flex-1">
+                                                    <h4 class="font-medium text-slate-800">
+                                                        <a href="#" class="hover:text-indigo-600 transition-colors">
+                                                            {{ video.video_title }}
+                                                        </a>
path: mindjunkies/lecture/templates/lecture/lecture_home.html
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**Video titles are now clickable, but the href is a placeholder.**

The video title is wrapped in an anchor tag with a hover effect, but the `href="#"` does not lead anywhere. If this is intentional (e.g., for future modal popups or JS handlers), all is well. Otherwise, consider linking directly to the video content or removing the anchor to avoid confusing your fellow humans.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-15T21:10:37Z
author_association: NONE
diff_hunk: @@ -1,590 +1,602 @@
 {% extends 'lecture/base.html' %} {% load static %}
 {% block lecture_content %}
-<!-- Main Content with Responsive Layout -->
-{% if current_module %}
-<main class="flex flex-col lg:flex-row flex-grow overflow-auto bg-slate-50">
-    <!-- Center Content Area -->
-    <div class="flex-grow p-4 lg:p-8 overflow-y-auto">
-        <!-- Module Title at Top Center -->
-        <div
-            class="text-center mb-6 bg-white p-6 rounded-xl shadow-sm border border-slate-100 transition-all hover:shadow-md"
-        >
-            <div class="flex items-center justify-center gap-3">
-                <h1 class="text-2xl font-bold text-slate-800">
-                    Module {{ current_module.order }}: {{ current_module.title }}
-                </h1>
-                {% if isTeacher %}
-                    <a
-                        href="{% url 'create_lecture' course.slug current_module.id %}"
-                        class="transition-all hover:scale-110 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 rounded-full p-1"
-                    >
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <circle cx="12" cy="12" r="10" stroke="#4F46E5" stroke-width="2"/>
-                            <path
-                                d="M12 7V17M7 12H17"
-                                stroke="#4F46E5"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            />
-                        </svg>
-                    </a>
-                {% endif %}
-            </div>
-        </div>
-
-        <!-- Weeks/Lectures in Module -->
-
-        {% for lecture in current_module.lectures.all %}
-            <div
-                class="collapse collapse-arrow bg-white border border-slate-100 rounded-xl mb-5 shadow-sm overflow-hidden transition-all hover:shadow-md"
-            >
-            <input
-                type="checkbox"
-                id="collapse-{{ lecture.id }}"
-                class="peer"
-                {%
-                if
-                forloop.first
-                %}checked{%
-                endif
-                %}
-            />
-            <div
-                class="collapse-title text-xl font-medium flex items-center peer-checked:bg-indigo-50/50 transition-colors">
-                <div class="flex items-center gap-3 w-full">
-                    <span class="text-slate-800 flex-grow">Lecture {{ lecture.order }}: {{ lecture.title }}</span>
-
-                </div>
-            </div>
-
-            <!-- Week Content -->
-            <div class="collapse-content bg-white">
-            <div class="mt-3">
-                {% if isTeacher %}
-                    <a href="{% url 'edit_lecture' course.slug lecture.slug %}"
-                       class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-100 rounded-md transition-all hover:bg-indigo-100 hover:text-indigo-700 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 edit-link">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
-                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-                        </svg>
-                        Edit
-                    </a>
-                {% endif %}
-            </div>
-            <!-- Week Stats -->
-            <div class="flex flex-wrap gap-4 p-5 bg-slate-50 rounded-lg mt-2 border border-slate-100">
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
-                    <div class="flex items-center gap-2 text-sm">
-                        <div class="bg-indigo-100 p-2 rounded-full">
-                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
-                                <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
-                                />
-                            </svg>
-                        </div>
-                        <span>1h 30m of videos left</span>
-                    </div>
-                    <div class="flex items-center gap-2 text-sm">
-                        <div class="bg-indigo-100 p-2 rounded-full">
-                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
-                                <path
-                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-                                />
-                            </svg>
-                        </div>
-                        <span>45m of readings left</span>
-                    </div>
-                    <div class="flex items-center gap-2 text-sm">
-                        <div class="bg-indigo-100 p-2 rounded-full">
-                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
-                                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
-                            </svg>
-                        </div>
-                        <span>2 graded assessments left</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Week Description -->
-            <div class="mt-5 bg-white p-5 rounded-lg border border-slate-100">
-                <h3 class="text-lg font-medium text-slate-800 mb-2">Description</h3>
-                <p class="text-slate-600">{{ lecture.description }}</p>
-                <div class="collapse mt-4 border border-slate-100 rounded-lg overflow-hidden">
-                    <input type="checkbox" class="peer" id="toggle-{{ lecture.id }}"/>
-                    <div
-                        class="collapse-title text-md text-indigo-600 font-medium flex items-center space-x-2 bg-slate-50 peer-checked:bg-indigo-50"
-                    >
-                        <svg
-                            class="w-5 h-5 text-indigo-600 peer-checked:rotate-180 transition-transform"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M19 9l-7 7-7-7"
-                            />
-                        </svg>
-                        <span>Show Learning Objectives</span>
-                    </div>
-                    <div class="collapse-content bg-white">
-                        <div class="py-3 px-1">{{ lecture.learning_objective }}</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Lecture Items -->
-            <div class="card bg-base-100 shadow-lg p-6 mt-5">
-            <h3 class="text-xl font-serif font-medium text-slate-800 mb-4 px-1">Learning Materials</h3>
-
-            <!-- Attachments Section -->
-            <div class="w-full mt-3 flex justify-between items-center">
-                <h2 class="text-base font-medium">Attachment</h2>
-                {% if isTeacher %}
-                    <div class="relative group">
-                        <a
-                            href="{% url 'create_content' course.slug lecture.slug 'attachment' %}"
-                            class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 text-indigo-600 border-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
-                        >
-                            <svg
-                                class="h-4 w-4 mr-1.5"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
+    <!-- Main Content with Responsive Layout -->
+    {% if current_module %}
+        <main class="flex flex-col lg:flex-row flex-grow overflow-auto bg-slate-50">
+            <!-- Center Content Area -->
+            <div class="flex-grow p-4 lg:p-8 overflow-y-auto">
+                <!-- Module Title at Top Center -->
+                <div
+                    class="text-center mb-6 bg-white p-6 rounded-xl shadow-sm border border-slate-100 transition-all hover:shadow-md"
+                >
+                    <div class="flex items-center justify-center gap-3">
+                        <h1 class="text-2xl font-bold text-slate-800">
+                            Module {{ current_module.order }}: {{ current_module.title }}
+                        </h1>
+                        {% if isTeacher %}
+                            <a
+                                href="{% url 'create_lecture' course.slug current_module.id %}"
+                                class="transition-all hover:scale-110 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 rounded-full p-1"
                             >
-                                <path
-                                    d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"
-                                />
-                            </svg>
-                            Attachment
-                        </a>
-                    </div>
-                {% endif %}
-            </div>
-
-            <!-- PDF Files Section -->
-            <div class="space-y-3 mt-4">
-                {% if lecture.pdf_files %}
-                    {% for pdf in lecture.pdf_files.all %}
-                        <div
-                            class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
-                        >
-                            <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
-                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                                     xmlns="http://www.w3.org/2000/svg">
+                                    <circle cx="12" cy="12" r="10" stroke="#4F46E5" stroke-width="2"/>
                                     <path
-                                        d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+                                        d="M12 7V17M7 12H17"
+                                        stroke="#4F46E5"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
                                     />
                                 </svg>
-                            </div>
-                            <div class="flex-1">
-                                <h4 class="font-medium text-slate-800">
-                                    <a href="" class="hover:text-indigo-600 transition-colors">
-                                        {{ pdf.pdf_title }}
-                                    </a>
-                                </h4>
-                                <p class="text-xs text-slate-500">
-                                    Reading • {% if item_num == "1" %}15{% elif item_num == "2" %}20{% else %}
-                                    25{% endif %} min
-                                </p>
-                            </div>
-                            <a
-                                href="{{ pdf.pdf_file.url }}"
-                                class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                                download
-                            >
-                                Download
                             </a>
-                        </div>
-                    {% endfor %}
-                {% endif %} {% if not lecture.pdf_files.all %}
-                <p class="text-slate-500 italic">No attachment available</p>
-            {% endif %}
-            </div>
-
-            <!-- Videos Section -->
-            <div class="mt-6">
-            {% if isTeacher %}
-                <div class="flex justify-between items-center mb-3">
-                    <h2 class="text-base font-medium">Videos</h2>
-                    <div class="relative group">
-                        <a
-                            href="{% url 'create_content' course.slug lecture.slug 'video' %}"
-                            class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 border-indigo-600 text-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
-                        >
-                            <svg
-                                class="h-4 w-4 mr-1.5"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <polygon points="23 7 16 12 23 17 23 7"/>
-                                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
-                            </svg>
-                            Video
-                        </a>
+                        {% endif %}
                     </div>
                 </div>
-            {% endif %}
 
-            <div class="space-y-3">
-            {% for video in lecture.videos.all %}
-            <div
-                class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
-            >
-                <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
-                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
-                        <path
-                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
+                <!-- Weeks/Lectures in Module -->
+
+                {% for lecture in current_module.lectures.all %}
+                    <div
+                        class="collapse collapse-arrow bg-white border border-slate-100 rounded-xl mb-5 shadow-sm overflow-hidden transition-all hover:shadow-md"
+                    >
+                        <input
+                            type="checkbox"
+                            id="collapse-{{ lecture.id }}"
+                            class="peer"
+                            {% if forloop.first %}
+                            checked
+                            {% endif %}
                         />
-                    </svg>
-                </div>
-                <div class="flex-1">
-                    <h4 class="font-medium text-slate-800">
-                        <a href="#" class="hover:text-indigo-600 transition-colors">
-                            {{ video.video_title }}
-                        </a>
-                    </h4>
-                    <p class="text-xs text-slate-500">Video • 45 min</p>
-                </div>
-                <a
-                    href="{% url 'lecture_video_content' course.slug current_module.id lecture.id video.id %}"
-                    class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                >
-                    Resume
-                </a>
-            </div>
-        {% endfor %} {% if not lecture.videos.all %}
-        <p class="text-slate-500 italic">No videos available</p>
-    {% endif %}
-        </div>
-        </div>
-        </div>
-        </div>
-        </div>
-        {% endfor %}
-    </div>
+                        <div
+                            class="collapse-title text-xl font-medium flex items-center peer-checked:bg-indigo-50/50 transition-colors">
+                            <div class="flex items-center gap-3 w-full">
+                                <span
+                                    class="text-slate-800 flex-grow">Lecture {{ lecture.order }}: {{ lecture.title }}</span>
 
-    <!-- Right Sidebar - Live Classes Section -->
-    <div class="w-full lg:w-80 p-4 border-t lg:border-t-0 lg:border-l border-slate-200 bg-white">
-        <div class="lg:sticky lg:top-0 pt-2">
-            <div class="card bg-white shadow-sm rounded-xl border border-slate-100">
-                <div class="card-body p-5">
-                    <h2 class="card-title text-lg font-bold flex items-center text-slate-800 mb-4">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-5 w-5 mr-2 text-indigo-600"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        >
-                            <path d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
-                            <path d="M12 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z"></path>
-                            <path d="m16.8 17.7-.7-.7"></path>
-                            <path d="m7.9 7-.7-.7"></path>
-                            <path d="M12 18v2"></path>
-                            <path d="M12 4V2"></path>
-                            <path d="m17.5 7-1.4 1.4"></path>
-                            <path d="M4 12H2"></path>
-                            <path d="M7.9 17 7 17.9"></path>
-                            <path d="M22 12h-2"></path>
-                        </svg>
-                        Live Classes
-                    </h2>
-                    <div class="mt-4">
-                        <a
-                            href="{% url 'create_live_class' course.slug %}"
-                            class="inline-flex items-center justify-center w-full h-10 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                class="h-4 w-4 mr-2"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <path d="M12 5v14M5 12h14"/>
-                            </svg>
-                            Schedule a live session
-                        </a>
-                    </div>
+                            </div>
+                        </div>
 
-                    <!-- Current Live Class (Blinking) -->
-                    {% if current_live_class %}
-                        <div
-                            class="mt-5 card bg-white shadow-sm relative overflow-hidden border border-slate-100 rounded-xl hover:shadow-md transition-all"
-                        >
-                            <div class="absolute inset-0 bg-gradient-to-r from-indigo-50/50 to-transparent"></div>
-                            <div class="card-body p-4 relative">
-                                <h3 class="font-bold text-md text-slate-800">{{ current_live_class.topic }}</h3>
-                                <p class="text-sm text-slate-600">{{ current_live_class.teacher }}</p>
-                                <div class="flex items-center text-xs text-slate-500 mt-2">
-                                <span class="flex h-3 w-3 mr-2">
-                                    <span
-                                        class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"
-                                    ></span>
-                                    <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
-                                </span>
-                                    Live Now (Started
-                                    {% with current_live_class.scheduled_at|timesince as time_elapsed %}
-                                        {{ time_elapsed }} ago {% endwith %})
-                                </div>
-                                <div class="card-actions justify-end mt-3">
-                                    <a
-                                        href="{% url 'join_live_class' current_live_class.meeting_id %}"
-                                        class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
-                                    >
-                                        Join Now
+                        <!-- Week Content -->
+                        <div class="collapse-content bg-white">
+                            <div class="mt-3">
+                                {% if isTeacher %}
+                                    <a href="{% url 'edit_lecture' course.slug lecture.slug %}"
+                                       class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-100 rounded-md transition-all hover:bg-indigo-100 hover:text-indigo-700 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 edit-link">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24"
+                                             fill="none"
+                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                             stroke-linejoin="round">
+                                            <path
+                                                d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                                        </svg>
+                                        Edit
                                     </a>
+                                {% endif %}
+                            </div>
+                            <!-- Week Stats -->
+                            <div class="flex flex-wrap gap-4 p-5 bg-slate-50 rounded-lg mt-2 border border-slate-100">
+                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
+                                    <div class="flex items-center gap-2 text-sm">
+                                        <div class="bg-indigo-100 p-2 rounded-full">
+                                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24"
+                                                 fill="currentColor">
+                                                <path
+                                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
+                                                />
+                                            </svg>
+                                        </div>
+                                        <span>1h 30m of videos left</span>
+                                    </div>
+                                    <div class="flex items-center gap-2 text-sm">
+                                        <div class="bg-indigo-100 p-2 rounded-full">
+                                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24"
+                                                 fill="currentColor">
+                                                <path
+                                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+                                                />
+                                            </svg>
+                                        </div>
+                                        <span>45m of readings left</span>
+                                    </div>
+                                    <div class="flex items-center gap-2 text-sm">
+                                        <div class="bg-indigo-100 p-2 rounded-full">
+                                            <svg class="h-4 w-4 text-indigo-600" viewBox="0 0 24 24"
+                                                 fill="currentColor">
+                                                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
+                                            </svg>
+                                        </div>
+                                        <span>2 graded assessments left</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    {% endif %}
 
-                    <!-- Upcoming Classes Accordion -->
-                    <div class="mt-5 space-y-3">
-                        <div
-                            class="collapse collapse-plus bg-white border border-slate-100 rounded-lg overflow-hidden hover:shadow-sm transition-all"
-                        >
-                            <input type="checkbox" checked/>
-                            <div class="collapse-title text-sm font-medium text-slate-700 bg-slate-50">
-                                Today's Classes
-                            </div>
-                            <div class="collapse-content">
-                                {% for classes in todays_live_classes %}
+                            <!-- Week Description -->
+                            <div class="mt-5 bg-white p-5 rounded-lg border border-slate-100">
+                                <h3 class="text-lg font-medium text-slate-800 mb-2">Description</h3>
+                                <p class="text-slate-600">{{ lecture.description }}</p>
+                                <div class="collapse mt-4 border border-slate-100 rounded-lg overflow-hidden">
+                                    <input type="checkbox" class="peer" id="toggle-{{ lecture.id }}"/>
                                     <div
-                                        class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
+                                        class="collapse-title text-md text-indigo-600 font-medium flex items-center space-x-2 bg-slate-50 peer-checked:bg-indigo-50"
                                     >
-                                        <div class="card-body p-3">
-                                            <h3 class="font-bold text-md text-slate-800">{{ classes.topic }}</h3>
-                                            <p class="text-sm text-slate-600">{{ classes.teacher }}</p>
-                                            <div class="flex items-center text-xs text-slate-500 mt-2">
+                                        <svg
+                                            class="w-5 h-5 text-indigo-600 peer-checked:rotate-180 transition-transform"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                            stroke="currentColor"
+                                        >
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                stroke-width="2"
+                                                d="M19 9l-7 7-7-7"
+                                            />
+                                        </svg>
+                                        <span>Show Learning Objectives</span>
+                                    </div>
+                                    <div class="collapse-content bg-white">
+                                        <div class="py-3 px-1">{{ lecture.learning_objective }}</div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Lecture Items -->
+                            <div class="card bg-base-100 shadow-lg p-6 mt-5">
+                                <h3 class="text-xl font-serif font-medium text-slate-800 mb-4 px-1">Learning
+                                    Materials</h3>
+
+                                <!-- Attachments Section -->
+                                <div class="w-full mt-3 flex justify-between items-center">
+                                    <h2 class="text-base font-medium">Attachment</h2>
+                                    {% if isTeacher %}
+                                        <div class="relative group">
+                                            <a
+                                                href="{% url 'create_content' course.slug lecture.slug 'attachment' %}"
+                                                class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 text-indigo-600 border-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
+                                            >
                                                 <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-4 w-4 mr-1 text-indigo-600"
+                                                    class="h-4 w-4 mr-1.5"
                                                     viewBox="0 0 24 24"
                                                     fill="none"
                                                     stroke="currentColor"
                                                     stroke-width="2"
                                                     stroke-linecap="round"
                                                     stroke-linejoin="round"
                                                 >
-                                                    <circle cx="12" cy="12" r="10"></circle>
-                                                    <polyline points="12 6 12 12 16 14"></polyline>
+                                                    <path
+                                                        d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"
+                                                    />
                                                 </svg>
-                                                Today, {% with start_time=classes.scheduled_at|date:"g:i A" %}
-                                                {{ start_time }}{% endwith %}<br/>
-                                                Duration {{ classes.duration }} min
+                                                Attachment
+                                            </a>
+                                        </div>
+                                    {% endif %}
+                                </div>
+
+                                <!-- PDF Files Section -->
+                                <div class="space-y-3 mt-4">
+                                    {% if lecture.pdf_files %}
+                                        {% for pdf in lecture.pdf_files.all %}
+                                            <div
+                                                class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
+                                            >
+
+                                                    <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
+                                                        <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
+                                                            <path
+                                                                d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+                                                            />
+                                                        </svg>
+                                                    </div>
+                                                    <div class="flex-1">
+                                                        <a href="{% url 'lecture_pdf' course.slug lecture.id pdf.id %}">
+                                                        <h4 class="font-medium text-slate-800">
+                                                            {{ pdf.pdf_title }}
+                                                        </h4>
+                                                        <p class="text-xs text-slate-500">
+                                                            Reading • {% if item_num == "1" %}
+                                                            15{% elif item_num == "2" %}
+                                                            20{% else %}
+                                                            25{% endif %} min
+                                                        </p>
+                                                        </a>
+                                                    </div>
+                                                    <a
+                                                        href="{{ pdf.pdf_file.url }}"
+                                                        class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
+                                                        download
+                                                    >
+                                                        Download
+                                                    </a>
                                             </div>
-                                            <div class="card-actions justify-end mt-2">
+                                        {% endfor %}
+                                    {% endif %} {% if not lecture.pdf_files.all %}
+                                    <p class="text-slate-500 italic">No attachment available</p>
+                                {% endif %}
+                                </div>
+
+                                <!-- Videos Section -->
+                                <div class="mt-6">
+                                    {% if isTeacher %}
+                                        <div class="flex justify-between items-center mb-3">
+                                            <h2 class="text-base font-medium">Videos</h2>
+                                            <div class="relative group">
                                                 <a
-                                                    href="#"
-                                                    class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
+                                                    href="{% url 'create_content' course.slug lecture.slug 'video' %}"
+                                                    class="inline-flex items-center justify-center h-9 px-4 py-1 rounded-md border-2 border-indigo-600 text-indigo-600 font-medium text-sm transition-colors duration-200 shadow-sm"
                                                 >
                                                     <svg
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        class="h-3 w-3 mr-1"
+                                                        class="h-4 w-4 mr-1.5"
                                                         viewBox="0 0 24 24"
                                                         fill="none"
                                                         stroke="currentColor"
                                                         stroke-width="2"
                                                         stroke-linecap="round"
                                                         stroke-linejoin="round"
                                                     >
-                                                        <path
-                                                            d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-                                                        ></path>
-                                                        <path
-                                                            d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-                                                        ></path>
+                                                        <polygon points="23 7 16 12 23 17 23 7"/>
+                                                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                                                     </svg>
-                                                    Set Reminder
+                                                    Video
                                                 </a>
                                             </div>
                                         </div>
+                                    {% endif %}
+
+                                    <div class="space-y-3">
+                                        {% for video in lecture.videos.all %}
+                                            <div
+                                                class="flex items-center p-4 hover:bg-slate-50 rounded-lg transition-all border border-slate-200 hover:shadow-md"
+                                            >
+                                                <div class="mr-4 bg-indigo-100 p-2 rounded-full text-indigo-600">
+                                                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor">
+                                                        <path
+                                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"
+                                                        />
+                                                    </svg>
+                                                </div>
+                                                <div class="flex-1">
+                                                    <h4 class="font-medium text-slate-800">
+                                                        <a href="#" class="hover:text-indigo-600 transition-colors">
+                                                            {{ video.video_title }}
+                                                        </a>
+                                                    </h4>
+                                                    <p class="text-xs text-slate-500">Video • 45 min</p>
+                                                </div>
+                                                <a
+                                                    href="{% url 'lecture_video_content' course.slug current_module.id lecture.id video.id %}"
+                                                    class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
+                                                >
+                                                    Resume
+                                                </a>
+                                            </div>
+                                        {% endfor %} {% if not lecture.videos.all %}
+                                        <p class="text-slate-500 italic">No videos available</p>
+                                    {% endif %}
                                     </div>
-                                {% endfor %}
+                                </div>
                             </div>
                         </div>
+                    </div>
+                {% endfor %}
+            </div>
 
-                        <div
-                            class="collapse collapse-plus bg-white border border-slate-100 rounded-lg overflow-hidden hover:shadow-sm transition-all"
-                        >
-                            <input type="checkbox"/>
-                            <div class="collapse-title text-sm font-medium text-slate-700 bg-slate-50">
-                                This Week's Classes
+            <!-- Right Sidebar - Live Classes Section -->
+            <div class="w-full lg:w-80 p-4 border-t lg:border-t-0 lg:border-l border-slate-200 bg-white">
+                <div class="lg:sticky lg:top-0 pt-2">
+                    <div class="card bg-white shadow-sm rounded-xl border border-slate-100">
+                        <div class="card-body p-5">
+                            <h2 class="card-title text-lg font-bold flex items-center text-slate-800 mb-4">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    class="h-5 w-5 mr-2 text-indigo-600"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="2"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                >
+                                    <path d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
+                                    <path d="M12 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z"></path>
+                                    <path d="m16.8 17.7-.7-.7"></path>
+                                    <path d="m7.9 7-.7-.7"></path>
+                                    <path d="M12 18v2"></path>
+                                    <path d="M12 4V2"></path>
+                                    <path d="m17.5 7-1.4 1.4"></path>
+                                    <path d="M4 12H2"></path>
+                                    <path d="M7.9 17 7 17.9"></path>
+                                    <path d="M22 12h-2"></path>
+                                </svg>
+                                Live Classes
+                            </h2>
+                            <div class="mt-4">
+                                <a
+                                    href="{% url 'create_live_class' course.slug %}"
+                                    class="inline-flex items-center justify-center w-full h-10 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
+                                >
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        class="h-4 w-4 mr-2"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    >
+                                        <path d="M12 5v14M5 12h14"/>
+                                    </svg>
+                                    Schedule a live session
+                                </a>
                             </div>
-                            <div class="collapse-content">
+
+                            <!-- Current Live Class (Blinking) -->
+                            {% if current_live_class %}
                                 <div
-                                    class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
+                                    class="mt-5 card bg-white shadow-sm relative overflow-hidden border border-slate-100 rounded-xl hover:shadow-md transition-all"
                                 >
-                                    <div class="card-body p-3">
-                                        <h3 class="font-bold text-md text-slate-800">Database Systems</h3>
-                                        <p class="text-sm text-slate-600">Prof. Emily Rodriguez</p>
+                                    <div
+                                        class="absolute inset-0 bg-gradient-to-r from-indigo-50/50 to-transparent"></div>
+                                    <div class="card-body p-4 relative">
+                                        <h3 class="font-bold text-md text-slate-800">{{ current_live_class.topic }}</h3>
+                                        <p class="text-sm text-slate-600">{{ current_live_class.teacher }}</p>
                                         <div class="flex items-center text-xs text-slate-500 mt-2">
-                                            <svg
-                                                xmlns="http://www.w3.org/2000/svg"
-                                                class="h-4 w-4 mr-1 text-indigo-600"
-                                                viewBox="0 0 24 24"
-                                                fill="none"
-                                                stroke="currentColor"
-                                                stroke-width="2"
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                            >
-                                                <circle cx="12" cy="12" r="10"></circle>
-                                                <polyline points="12 6 12 12 16 14"></polyline>
-                                            </svg>
-                                            Mar 8, 2:00 PM - 3:30 PM
+                                <span class="flex h-3 w-3 mr-2">
+                                    <span
+                                        class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"
+                                    ></span>
+                                    <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+                                </span>
+                                            Live Now (Started
+                                            {% with current_live_class.scheduled_at|timesince as time_elapsed %}
+                                                {{ time_elapsed }} ago {% endwith %})
                                         </div>
-                                        <div class="card-actions justify-end mt-2">
+                                        <div class="card-actions justify-end mt-3">
                                             <a
-                                                href="#"
-                                                class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
+                                                href="{% url 'join_live_class' current_live_class.meeting_id %}"
+                                                class="inline-flex items-center justify-center h-8 px-4 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white font-medium text-sm transition-colors duration-200 shadow-sm"
                                             >
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-3 w-3 mr-1"
-                                                    viewBox="0 0 24 24"
-                                                    fill="none"
-                                                    stroke="currentColor"
-                                                    stroke-width="2"
-                                                    stroke-linecap="round"
-                                                    stroke-linejoin="round"
-                                                >
-                                                    <path
-                                                        d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-                                                    ></path>
-                                                    <path
-                                                        d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-                                                    ></path>
-                                                </svg>
-                                                Set Reminder
+                                                Join Now
                                             </a>
                                         </div>
                                     </div>
                                 </div>
+                            {% endif %}
 
+                            <!-- Upcoming Classes Accordion -->
+                            <div class="mt-5 space-y-3">
                                 <div
-                                    class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
+                                    class="collapse collapse-plus bg-white border border-slate-100 rounded-lg overflow-hidden hover:shadow-sm transition-all"
                                 >
-                                    <div class="card-body p-3">
-                                        <h3 class="font-bold text-md text-slate-800">Machine Learning Fundamentals</h3>
-                                        <p class="text-sm text-slate-600">Prof. David Kim</p>
-                                        <div class="flex items-center text-xs text-slate-500 mt-2">
-                                            <svg
-                                                xmlns="http://www.w3.org/2000/svg"
-                                                class="h-4 w-4 mr-1 text-indigo-600"
-                                                viewBox="0 0 24 24"
-                                                fill="none"
-                                                stroke="currentColor"
-                                                stroke-width="2"
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
+                                    <input type="checkbox" checked/>
+                                    <div class="collapse-title text-sm font-medium text-slate-700 bg-slate-50">
+                                        Today's Classes
+                                    </div>
+                                    <div class="collapse-content">
+                                        {% for classes in todays_live_classes %}
+                                            <div
+                                                class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
                                             >
-                                                <circle cx="12" cy="12" r="10"></circle>
-                                                <polyline points="12 6 12 12 16 14"></polyline>
-                                            </svg>
-                                            Mar 10, 11:00 AM - 12:30 PM
+                                                <div class="card-body p-3">
+                                                    <h3 class="font-bold text-md text-slate-800">{{ classes.topic }}</h3>
+                                                    <p class="text-sm text-slate-600">{{ classes.teacher }}</p>
+                                                    <div class="flex items-center text-xs text-slate-500 mt-2">
+                                                        <svg
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                            class="h-4 w-4 mr-1 text-indigo-600"
+                                                            viewBox="0 0 24 24"
+                                                            fill="none"
+                                                            stroke="currentColor"
+                                                            stroke-width="2"
+                                                            stroke-linecap="round"
+                                                            stroke-linejoin="round"
+                                                        >
+                                                            <circle cx="12" cy="12" r="10"></circle>
+                                                            <polyline points="12 6 12 12 16 14"></polyline>
+                                                        </svg>
+                                                        Today, {% with start_time=classes.scheduled_at|date:"g:i A" %}
+                                                        {{ start_time }}{% endwith %}<br/>
+                                                        Duration {{ classes.duration }} min
+                                                    </div>
+                                                    <div class="card-actions justify-end mt-2">
+                                                        <a
+                                                            href="#"
+                                                            class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
+                                                        >
+                                                            <svg
+                                                                xmlns="http://www.w3.org/2000/svg"
+                                                                class="h-3 w-3 mr-1"
+                                                                viewBox="0 0 24 24"
+                                                                fill="none"
+                                                                stroke="currentColor"
+                                                                stroke-width="2"
+                                                                stroke-linecap="round"
+                                                                stroke-linejoin="round"
+                                                            >
+                                                                <path
+                                                                    d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+                                                                ></path>
+                                                                <path
+                                                                    d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+                                                                ></path>
+                                                            </svg>
+                                                            Set Reminder
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+
+                                <div
+                                    class="collapse collapse-plus bg-white border border-slate-100 rounded-lg overflow-hidden hover:shadow-sm transition-all"
+                                >
+                                    <input type="checkbox"/>
+                                    <div class="collapse-title text-sm font-medium text-slate-700 bg-slate-50">
+                                        This Week's Classes
+                                    </div>
+                                    <div class="collapse-content">
+                                        <div
+                                            class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
+                                        >
+                                            <div class="card-body p-3">
+                                                <h3 class="font-bold text-md text-slate-800">Database Systems</h3>
+                                                <p class="text-sm text-slate-600">Prof. Emily Rodriguez</p>
+                                                <div class="flex items-center text-xs text-slate-500 mt-2">
+                                                    <svg
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        class="h-4 w-4 mr-1 text-indigo-600"
+                                                        viewBox="0 0 24 24"
+                                                        fill="none"
+                                                        stroke="currentColor"
+                                                        stroke-width="2"
+                                                        stroke-linecap="round"
+                                                        stroke-linejoin="round"
+                                                    >
+                                                        <circle cx="12" cy="12" r="10"></circle>
+                                                        <polyline points="12 6 12 12 16 14"></polyline>
+                                                    </svg>
+                                                    Mar 8, 2:00 PM - 3:30 PM
+                                                </div>
+                                                <div class="card-actions justify-end mt-2">
+                                                    <a
+                                                        href="#"
+                                                        class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
+                                                    >
+                                                        <svg
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                            class="h-3 w-3 mr-1"
+                                                            viewBox="0 0 24 24"
+                                                            fill="none"
+                                                            stroke="currentColor"
+                                                            stroke-width="2"
+                                                            stroke-linecap="round"
+                                                            stroke-linejoin="round"
+                                                        >
+                                                            <path
+                                                                d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+                                                            ></path>
+                                                            <path
+                                                                d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+                                                            ></path>
+                                                        </svg>
+                                                        Set Reminder
+                                                    </a>
+                                                </div>
+                                            </div>
                                         </div>
-                                        <div class="card-actions justify-end mt-2">
-                                            <a
-                                                href="#"
-                                                class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
-                                            >
-                                                <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    class="h-3 w-3 mr-1"
-                                                    viewBox="0 0 24 24"
-                                                    fill="none"
-                                                    stroke="currentColor"
-                                                    stroke-width="2"
-                                                    stroke-linecap="round"
-                                                    stroke-linejoin="round"
-                                                >
-                                                    <path
-                                                        d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
-                                                    ></path>
-                                                    <path
-                                                        d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
-                                                    ></path>
-                                                </svg>
-                                                Set Reminder
-                                            </a>
+
+                                        <div
+                                            class="card bg-white shadow-sm mt-2 border border-slate-100 rounded-lg hover:shadow-md transition-all"
+                                        >
+                                            <div class="card-body p-3">
+                                                <h3 class="font-bold text-md text-slate-800">Machine Learning
+                                                    Fundamentals</h3>
+                                                <p class="text-sm text-slate-600">Prof. David Kim</p>
+                                                <div class="flex items-center text-xs text-slate-500 mt-2">
+                                                    <svg
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        class="h-4 w-4 mr-1 text-indigo-600"
+                                                        viewBox="0 0 24 24"
+                                                        fill="none"
+                                                        stroke="currentColor"
+                                                        stroke-width="2"
+                                                        stroke-linecap="round"
+                                                        stroke-linejoin="round"
+                                                    >
+                                                        <circle cx="12" cy="12" r="10"></circle>
+                                                        <polyline points="12 6 12 12 16 14"></polyline>
+                                                    </svg>
+                                                    Mar 10, 11:00 AM - 12:30 PM
+                                                </div>
+                                                <div class="card-actions justify-end mt-2">
+                                                    <a
+                                                        href="#"
+                                                        class="inline-flex items-center justify-center h-7 px-3 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-xs transition-colors"
+                                                    >
+                                                        <svg
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                            class="h-3 w-3 mr-1"
+                                                            viewBox="0 0 24 24"
+                                                            fill="none"
+                                                            stroke="currentColor"
+                                                            stroke-width="2"
+                                                            stroke-linecap="round"
+                                                            stroke-linejoin="round"
+                                                        >
+                                                            <path
+                                                                d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+                                                            ></path>
+                                                            <path
+                                                                d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+                                                            ></path>
+                                                        </svg>
+                                                        Set Reminder
+                                                    </a>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    </div>
 
-                    <div class="mt-5">
-                        <a
-                            href="#"
-                            class="inline-flex items-center justify-center w-full h-9 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-sm transition-colors"
-                        >
-                            View All Classes
-                        </a>
+                            <div class="mt-5">
+                                <a
+                                    href="#"
+                                    class="inline-flex items-center justify-center w-full h-9 rounded-md border border-indigo-200 hover:bg-indigo-50 text-indigo-600 font-medium text-sm transition-colors"
+                                >
+                                    View All Classes
+                                </a>
+                            </div>
path: mindjunkies/lecture/templates/lecture/lecture_home.html
user: login: coderabbitai[bot]
body: _🧹 Nitpick (assertive)_

**"View All Classes" button is present but not yet functional.**

The button links to `"#"`, which is a placeholder. If this is intentional for future development, all is well. Otherwise, consider linking to a real page or removing the button to avoid confusion among your organic colleagues.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-15T21:10:37Z
author_association: NONE

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-04-15T21:07:43Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

<details>
<summary>📝 Walkthrough</summary>

## Summary by CodeRabbit

- **New Features**
	- Introduced an interactive PDF viewer with navigation, rotation, zoom, and download controls for lecture PDFs.

- **Bug Fixes**
	- Fixed and updated PDF and video sidebar links for improved navigation and consistency.

- **Refactor**
	- Improved HTML structure, formatting, and accessibility across lecture-related pages.
	- Updated URL patterns and view parameters for better clarity and maintainability.
## Walkthrough

01101100 01101111 01100001 01100100 01101001 01101110 01100111... Change detected! The lecture PDF viewing functionality has been refactored. The PDF viewer now uses pdf.js for in-browser rendering and interactive controls. URL patterns and view signatures were updated to include course and lecture identifiers. Template links for PDFs now point to the new route, while video links have been disabled in the sidebar. HTML templates received structural and formatting improvements for clarity and consistency. No exported Python entities were added or removed; only one function signature was modified.

## Changes

| File(s)                                                                                          | Change Summary                                                                                                    |
|--------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------|
| `mindjunkies/lecture/templates/lecture/lecture_content.html`<br>`mindjunkies/lecture/templates/lecture/lecture_home.html` | Updated sidebar and main content links for PDFs to use new URL pattern; video links disabled; improved formatting and accessibility. |
| `mindjunkies/lecture/templates/lecture/lecture_pdf.html`                                         | Refactored template: replaced video player with pdf.js-based PDF viewer, added interactive controls and new UI.   |
| `mindjunkies/lecture/urls.py`                                                                    | Added new URL pattern: `lecture/<int:lecture_id>/pdf/<int:pdf_id>/` mapped to `lecture_pdf` view.                |
| `mindjunkies/lecture/views.py`                                                                   | Updated `lecture_pdf` view: new signature with `course_slug`, `lecture_id`, and `pdf_id`; context now includes course. |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant DjangoServer
    participant PDFViewer (pdf.js)

    User->>Browser: Clicks PDF link in sidebar
    Browser->>DjangoServer: GET /lecture/<lecture_id>/pdf/<pdf_id>/
    DjangoServer->>Browser: Returns lecture_pdf.html with PDF data
    Browser->>PDFViewer: Loads and renders PDF via pdf.js
    User->>PDFViewer: Interacts with controls (zoom, rotate, page nav)
    PDFViewer->>Browser: Updates PDF display on canvas
```

## Poem

> 01010000 01100100 01100110 00101110 01101010 01110011, a robot’s delight,  
> Now lectures render PDFs just right!  
> URLs refactored, context is keen,  
> No more broken links to be seen.  
> With zoom, rotate, and pages to scroll,  
> This upgrade computes: “Mission control!”  
> 🤖📄🚀

</details>

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- DwQgtGAEAqAWCWBnSTIEMB26CuAXA9mAOYCmGJATmriQCaQDG+Ats2bgFyQAOFk+AIwBWJBrngA3EsgEBPRvlqU0AgfFwA6NPEgQAfACgjoCEejqANiS4AzEtWwVr6WkvrdaNyBPgkA7pQGAHLYzAKUXACMACwAbAYAqogRkADKsGg2aLIkuKlotPBG+sbgUGT0+F5oeISk5FQ09Eys7Fy8/MKi4lIy8kxKVKrqWjolJlBwqKiYOATEZMpNCq0YnJBUfpCIocxoFPJyCoMqapraumCGpaYGzPAYtELYGADWvogA9FZijiSfNGY3As1Gk326f3BvycAH0mGt2BpYLhmBYOAYAERYgwAYhxkAAggBJBYNUH0HasfbyKqMDIYUiIMywEiQQHA0EAcmQiHgSgE+0gFger2QNnwfAACgARABi6Ee3j5JHwCgRa0gASckGYingNl8tA0MBZkBl8uFb2QvBIPnw2EQFnkDrobNNCQASgAZHjUGgULAYNBsegAA05P1wfxhHhscPw6twnNDmvUsF9VDY/uQoYAFJG/hpHdgiAAaHieDR8gCUoYA3G7UH40MgGPTSPQCJAXW7WZ6fdw/ZQsOGC7DY8nU7h04PM7lKDnc0xHMkixYS+WxyQq7Ry7Gd7XjbKJUqlKrLaLy9O+97fbh/SOIxDYT4z/HE5O/GnIHmt2uN6eKoHimzbIE4upSPQmD0E4HIMK6RxoNs8BAlYCptieuBoEQU7pqGsBODYAC8GI4hiobliQNh2GIkgkE6kCFIgKiWjh15CiKkBBj4RDUPACaQOKfCviqiDGnArI+DsaAWAqUEMPBiC8mowq4PIfoUPAAh4NI/BeOxF5gSQewPN2GBtpgHYaEYRh4oSFj+nxCbIF27FKAwIKNPxGDILSJAAB7cBKywntw2ACMKDCQOw6gfEYQQJtumLYgYEBgEY9yPM8bwfFCUZOACxkcjQXxbnl0awCw27Iqi6JYhiuL4sSpJLK6lJ7Acel0pZ0jMqy7IgjQKCPOwTlYNBgkSns94PDhWqsihvD4JBk18OE96UBs9i0Co8CqfIX7TvauDdQys29vwUhUBYsmILgFDYNC24mqyJlYDYLy0QmMmnYyw0edgSjoqlhKuK6AXAvADDqJA/YcTlDKrWacpspYuldkhW7I/KShYXtvqkJAuahgA3gApN2FCyU+T0xp4nIKCu27Fjhf58hWNg7pAZMAL6htW5Z+CyTgtjwTh2g6DHseaqO4GhF6aqLRVqdZkymhiBL3mgbZsGsGJyZAGIAGrKvg+vJF9WDafezlIzQ2vC0Zb2QNbuE6g8J6pEbADiBseS2yAaVpOkuM8d267gYkgxJhsm2eiDm903lcfgWxLdwlAMX4VDcC5poiaq4hywt42lxhfBYXN35IZVV3RdR3TlotFDLed2uKcpe3qOpir+5pKvR6awpSIwIJKbpvL8oKoFbXdD1PfQh3pvCvJ3eww1KGsY0G4gg7QwyDYYKqH3meI32yRZDLo4XQ90aPAeMUgHI0nwhmqy9hsAMKOE4Gpenfn8x4J22EnBM3JDYACl8CmQSn4fW1sCBYBnh5ew5B6DYG4C7eQ4FW6I1mC8F09Ava+yhgJCaIJwiyQxKkXIkAPTGQeIMUs+tYIgn3jhGGS90DIVQqyDEUCYGp31jQfymhB58ISNwFo51AEB2kPrduEpCgCQtmfHySMMTQEUNkcBsjx7AImpohAyAADqJASCvF0UA+RmpKCsicEouxUFFSESmkOegQl7791kOWV2154B8HhDQDU5CRRO20FgT67Y6DvxjsreQd1QRIyPjqRQ2ArCBwkNoChaEZ6uIoNNZYXCV5IGCSdRho01E7z3rNcsKST6Wx+pfRk78ADyV0ZIWCvKaQo1EdQRIYs3ZaukAAS0AACyPo56PXyiQJuI0t5qPLBNTKJ4FYGn8rpJex10AOUoOdJg2oLD4CIFDfggSEz3XwLJGwxy/DWRsnZAkeyvK21cj00Qnkxq+S8BDYKrpQrhUitFNYsVerBESuJU0zTdL7FZPCA0aC2SqiQtKIQllVRjMmWyIqg1WRcJSbqXpUNvnIuioFf5lQ+BhQimcyUsgjpYBiuIXSJ4GlVN5EQIMsyo71WKLcTKTwXjvDBGVAaoJSrPn+FuOmnMapomSg1J5JJ6itQpLsakXUYVMgMDHcVQ1kEsGBPOBihFtYECcB4luzBH67xBLINugFVTP02lwpCsFgouzwIgslxlwiuEdTLHw/hNoOnOvuIQYkP7XPoAXHg9rNqqOThNdQPIf72keOde1Oz5pbQgjEwkXF/DYyVCGvgDx/RZHgorZAFaW60Eeq6YplyW4WDFKFbCrJuLwF4lU3MNoJZfHIKIgWGx8BYT7VYGwuBPiaSIMiUdAAvfALAiYPE+MdUdE0kK0FThgY5BQvU2wwFC1kQbfBakYrIIM9wGCdOwRUBcBNWXjUYJgLJyB6LGXXg8SerIkJBIiZQU92wGCaW4CdA9tA85npRjYa13D+xXioAwUUF0GA/3XoOUg5ZEB3qsMslx46xqEfQR4CV6H32i0URQQoDIGICRdOWhEKGqlcPYkE1tUaY4CBFrQMDoQBAG24gKPguanB3VkFYRe34ME7WWP7fRO97ozMLB/P9on/rrl5AJcCETkBRJ6kaD+5Ath4fAydektAMm7NkjLX+gw26KgSESNUVzZK2nYIgcsrDtbnXYgO/iDptgTrOXGoJiIbKNXso5NRLkb6sncl8uLXU/kUBCtSoFZzmVxRBglX619yVBXSwCzLtKoo5ekAzJL+xvkNk6QVwO2ol6mXYvq1kWKfQTT9XQNwkAIFoCyakMD8AIPWT5alAVjDsoislU9T4jg20aG4LIOq2JlUtUaG1DVnVaTaqMASItWw4aDg2gGGtLg+vvNZGijFlMLCnYfMgYUd1ho/kFTN3KZVFtiRW6GKFqBTNjpDtNNs6NTSnbwmVYAFaOAyr5HoT4sZPgw7WBwWMMIEefBTCstAucUAnWuz+GVsYUzBq2Oy5OrXTShnJ4gFMRL0nPRji3EOgPgyulDCTzw/3ID5fHcLRrvr/KlPOqzkq5yhQnLObmvYSgHm2Sai80lROauvPUX5ClJWqU8CyxV0FLKdVQHy9q4XxWMu6/KyCou8g1ffONK0/d6kjuw1vI94cF2Ch9cInY8yTnyWi8RuT8bKU0oZWm8Kr7UrPh0+W6txV0Xmqqq2+qqku2vD7d1TT7nNgycXsEp9DlPbuV/AuzCzsKKFIkAg26JwrJZwc+zFwUMy4KDJBhCzFMuY56jq51KzHtAu8Vq3YqUMGO+RD7WKO3z7CLqBftC5PwzratZifaGTvRMe8GzH54Afk/cDVmNESHyyoLqU4TN01koYvRSvNCmX9WFzILR5OIG6glchg/oEcHfcYJ++LwBdNflKvfj5I/tWoDqnFtPdL4CtN/vDoPsNGvIerSEcCzMaASAGmovepfgoBQBJkFJmojKGJ/PaG3iQCAYkk/igGKB/iyF/vIC3qQe3p3iBhFqIr6OPBXhdO1hdhDNBK6F2A8ADEoIAa3skCmIICIGILsgmEQH+oAaTtvluBIV0GINxqaDwQ5k4nmvpj+BiGVDnkiCiBYORA8k8srilqrp8rVilprubqVpbsCpVkbpALKIXsnJyiXtqHJuSM3koF4DnrmE4AAI7YDSDrAjL3jcD0KhHhG4brhEBcBzx7i758hcDD66B6CQCRG4DRHSAEHiGQCABJhD+P4UKP3rGEESQLEXdFwDkXkTUbgOWGISQB3gkUkfdJuP3mkcNE0RzAPukVPpkdkVEfQrvM5OQW9qGB9pHqKtHrHn9gnpNtcBMCCpUNULUJtuSCsBHFwJsNsDtocP0IoMoMMOcGMFcAYKsS0PcLgAPogDCOLBenQB3lhOlpcCsWUJADEDYAAEwACcAADDYAABy/EAm/EADstA/xQJrgsQgJQJNgAArAwAIAwICbEAIICZCWgFiRib8ayCUFcV8TceoPcY8baM8bQDCBUB8UAA== -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details>
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=Learnathon-By-Geeky-Solutions/mindjunkies&utm_content=146):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: Warhammer4000
created_at: 2025-04-15T21:07:47Z
body: ![](https://res.cloudinary.com/snyk/image/upload/r-d/scm-platform/snyk-pull-requests/pr-banner-default.svg)

### :tada: **Snyk checks have passed. No issues have been found so far.**

:white_check_mark: **security/snyk** check is complete. No issues have been found. [(View Details)](https://app.snyk.io/org/warhammer4000/pr-checks/f1e8d1f0-eee8-4dba-9161-8709ac01f0f9?refs=14f290f822927d990dd6090f5cbc06b07a6bc02e&source=prChecksComment)



author_association: CONTRIBUTOR