<div>

  <div class="chapter-title small-title" data-target="#{{ course.get_slugified_chapter_title(chapter.title) }}"
    data-toggle="collapse" aria-expanded="false">
    <img class="chapter-icon" src="/assets/school/icons/chevron-right.svg">
    {{ index }}. {{ chapter.title }}
  </div>

  <div class="chapter-content collapse navbar-collapse" id="{{ course.get_slugified_chapter_title(chapter.title) }}">

    {% if chapter.description %}
    <div class="chapter-description muted-text">
      {{ chapter.description }}
    </div>
    {% endif %}

    {% set is_instructor = frappe.session.user == course.instructor %}
    <div class="lessons">

      {% for lesson in course.get_lessons(chapter) %}

      <div class="lesson-info {% if membership.current_lesson == lesson.name %} active-lesson {% endif %}">

        {% if membership or lesson.include_in_preview %}
        <a class="lesson-links" href="{{ course.get_learn_url(lesson.number) }}{{course.query_parameter}}"
          data-course="{{ course.name }}">
          {{ lesson.title }}

          {% if membership %}
          <img class="ml-1 lesson-progress-tick {{ course.get_progress(lesson.name) != 'Complete' and 'hide' }}"
            src="/assets/school/icons/check.svg">
          {% endif %}

        </a>

        {% elif is_instructor and not lesson.include_in_preview %}
        <a class="lesson-links"
        title="This lesson is not available for preview. As you are the Instructor of the course only you can see it."
        href="{{ course.get_learn_url(lesson.number) }}{{course.query_parameter}}"
        data-course="{{ course.name }}">
        {{ lesson.title }}
          <img class="ml-2" src="/assets/school/icons/lock.svg">
        </a>

        {% else %}
        <div class="no-preview" title="This lesson is not available for preview">
          <div class="lesson-links">
            {{ lesson.title }}
            <img class="ml-2" src="/assets/school/icons/lock.svg">
          </div>
        </div>
        {% endif %}

      </div>
      {% endfor %}

    </div>
  </div>
</div>

{% if index != course.get_chapters() | length %}
<div class="card-divider"></div>
{% endif %}

<script>
  frappe.ready(() => {
    expand_the_active_chapter();

    $(".chapter-title").unbind().click((e) => {
      rotate_chapter_icon(e);
    });

  });

  var expand_the_first_chapter = () => {
    var elements = $(".course-outline .collapse");
    elements.each((i, element) => {
      if (i < 1) {
        show_section(element);
        return false;
      }
    });
  }

  var expand_the_active_chapter = () => {

    /* Find anchor matching the URL for course details page */
    var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
    if (!selector.length) {
      selector = $(`a[href^="${decodeURIComponent(window.location.pathname)}"]`).parent();
    }
    if (selector.length && $(".course-details-page").length) {
      $(".lesson-info").removeClass("active-lesson")
      selector.addClass("active-lesson");
      show_section(selector.parent().parent());
    }

    /* For course home page */
    else if ($(".active-lesson").length) {
      selector = $(".active-lesson")
      show_section(selector.parent().parent());
    }

    /* If no active chapter then exapand the first chapter */
    else {
      expand_the_first_chapter();
    }
  }

  var show_section = (element) => {
    $(element).addClass("show");
    $(element).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
  }

  var rotate_chapter_icon = (e) => {
    var icon = $(e.currentTarget).children(".chapter-icon");
    if (icon.css("transform") == "none") {
      icon.css("transform", "rotate(90deg)");
    } else {
      icon.css("transform", "none");
    }
  }
</script>
