fix: course details interactions

community/www/batch/learn.html

@@ -21,7 +21,7 @@
 
 {% block content %}
 <div class="common-page-style">
-  <div class="course-home-page">
+  <div class="course-details-page">
     {{ widgets.Breadcrumb(course=course, lesson=lesson) }}
     <div class="course-content-parent">
       <div class="course-details-outline">
@@ -40,9 +40,10 @@
 
 {% macro LessonContent(lesson) %}
 <div class="lesson-content">
-  <div class="course-home-headings title {% if course.is_mentor(frappe.session.user) %} is_mentor {% endif %}"
-    data-lesson="{{ lesson.name }}" data-course="{{ course.name }}" {% if membership%}
-    data-membership="{{membership.name}}" {% endif %}>{{ lesson.title }}</div>
+  <div class="course-home-headings title" data-lesson="{{ lesson.name }}" data-course="{{ course.name }}">
+    {{ lesson.title }}
+    <span class="lesson-progress {{hide if course.get_progress(lesson.name) != 'Complete' else ''}}">COMPLETED</span>
+  </div>
 
   {% if membership or lesson.include_in_preview %}
   <div class="common-card-style lesson-content-card">{{ lesson.render_html() }}</div>
@@ -52,6 +53,7 @@
     <a href="/courses/{{ course.name }}">Checkout Course Details.</a>
   </div>
   {% endif %}
+
 </div>
 {% endmacro %}
 
@@ -59,22 +61,33 @@
 <div class="lesson-pagination">
 
   {% if prev_url %}
-  <a class="wide-button is-secondary dark-links" href="{{ prev_url }}">
+  <a class="button is-secondary dark-links" href="{{ prev_url }}">
     <img class="mr-2" src="/assets/community/icons/left-arrow.svg">
     Prev
   </a>
   {% endif %}
 
-  <div class="wide-button is-primary">
+  {% if not course.is_mentor(frappe.session.user) and membership %}
+
+  {% if course.get_progress(lesson.name) != "Complete" %}
+  <div class="button is-secondary" id="progress" data-progress="Complete">
     Mark as Complete
   </div>
+  {% else %}
+  <div class="button is-secondary" id="progress" data-progress="Incomplete">
+    Mark as Incomplete
+  </div>
+  {% endif %}
+
+  {% endif %}
 
   {% if next_url %}
-  <a class="wide-button is-secondary dark-links" href="{{ next_url }}">
+  <a class="button is-primary" href="{{ next_url }}">
     Next
-    <img class="ml-2" src="/assets/community/icons/side-arrow.svg">
+    <img class="ml-2" src="/assets/community/icons/side-arrow-white.svg">
   </a>
   {% endif %}
+
 </div>
 {% endmacro %}