{% extends "templates/base.html" %}
{% from "www/macros/livecode.html" import LiveCodeEditorJS, LiveCodeEditor with context %}
{% block title %} {{ lesson.title }} - {{ course.title }} {% endblock %}

{% block head_include %}
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
<link rel="stylesheet" href="/assets/css/lms.css">
<link rel="stylesheet" href="/assets/frappe/css/hljs-night-owl.css">

{% for ext in page_extensions %}
{{ ext.render_header() }}
{% endfor %}

{% endblock %}


{% block content %}
<div class="common-page-style">
  <div class="container course-details-page">
    {{ widgets.BreadCrumb(course=course, lesson=lesson) }}
    <div class="course-content-parent">
      <div class="course-details-outline">
        {{ widgets.CourseOutline(course=course, membership=membership) }}
      </div>
      <div class="lesson-pagination-parent">
        {{ LessonContent(lesson) }}
        {% if membership %}
        {{ pagination(prev_url, next_url) }}
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% macro LessonContent(lesson) %}
<div class="lesson-content">
  <div class="course-home-headings title {% if membership %} is-member {% endif %}" 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 markdown-source">{{ lesson.render_html() }}</div>
  {% else %}
  <div class="common-card-style lesson-content-card">
    <span>This lesson is not available for Preview. Please join the course to access this lesson. <a href="/courses/{{ course.name }}">Checkout Course Details.</a></span>
  </div>
  {% endif %}

</div>
{% endmacro %}

{% macro pagination(prev_url, next_url) %}
<div class="lesson-pagination">

  <div>
    {% if 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>


  {% 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 %}

  <div>
    {% if next_url %}
    <a class="button is-primary" href="{{ next_url }}">
      Next
      <img class="ml-2" src="/assets/community/icons/side-arrow-white.svg">
    </a>
    {% endif %}
  </div>

</div>
{% endmacro %}

{%- block script %}
{{ super() }}

<script type="text/javascript">
  var page_context = {{ page_context | tojson }};
</script>

{% for ext in page_extensions %}
{{ ext.render_footer() }}
{% endfor %}
{%- endblock %}