{% extends "lms/templates/lms_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/hljs-night-owl.css">

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


{% block page_content %}

<div class="common-page-style">
    <div class="container course-details-page">

        <div class="course-content-parent">
            <div>
                <div class="bold-heading mb-4">
                    {{ course.title }}
                </div>

                {% if membership %}
                <div class="">
                    <div class="progress-percent m-0">{{ progress }}% {{ _("Completed") }}</div>
                    <div class="progress" title="{{ progress }}% Completed">
                        <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
                        aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
                        </div>
                    </div>
                </div>
                {% endif %}

                <div class="course-details-outline">
                    {% set classname = class_info.name if class_info else False %}
                    {{ widgets.CourseOutline(course=course, membership=membership, lesson_page=True, classname=classname) }}
                </div>
            </div>
            <div class="lesson-parent">
                {{ BreadCrumb(course, lesson, class_info) }}
                {{ LessonContent(lesson, class_info) }}
                {% if course.status == "Approved" and not course.upcoming and not class_info %}
                {{ Discussions() }}
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}


<!-- BreadCrumb -->
{% macro BreadCrumb(course, lesson, class_info) %}
<div class="breadcrumb">
    {% if class_info %}
        <a class="dark-links" href="/courses">
            {{ _("All Batches") }}
        </a>
        <img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
        <a class="dark-links" href="/batches/{{ class_info.name }}">
            {{ class_info.title }}
        </a>
        <img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
        <span class="breadcrumb-destination">
            {{ lesson.title }}
        </span>
    {% else %}
        <a class="dark-links" href="/courses">
            {{ _("All Courses") }}
        </a>
        <img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
        <a class="dark-links" href="/courses/{{ course.name }}">
            {{ course.title }}
        </a>
        <img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
        <span class="breadcrumb-destination">
            {{ lesson.title }}
        </span>
    {% endif %}
</div>
{% endmacro %}


<!-- Lesson Details -->
{% macro LessonContent(lesson, class_info) %}
{% set instructors = get_instructors(course.name) %}
{% set is_instructor = is_instructor(course.name) %}

<div>
    <div>
        <div class="pull-right">
            {% if get_progress(course.name, lesson.name) == 'Complete' %}
            <span id="status-indicator" class="indicator-pill green">{{ _("COMPLETED") }}</span>
            {% endif %}

            <!-- Edit Button -->
            {% if (is_instructor or has_course_moderator_role()) %}
            <a class="btn btn-secondary btn-sm ml-2" href="{{ get_lesson_url(course.name, lesson_number) }}/edit">
                {{ _("Edit") }}
            </a>
            {% endif %}
        </div>

        <div class="course-home-headings title {% if membership %} is-member {% endif %}" id="title"
            data-index="{{ lesson_index }}" data-course="{{ course.name }}" data-chapter="{{ chapter }}"
            {% if lesson.name %} data-lesson="{{ lesson.name }}" {% endif %}
            >{% if lesson.title %}{{ lesson.title }}{% endif %}</div>
    </div>

    <!-- Instructors -->
    <div class="d-flex align-items-center">
        {% set ins_len = instructors | length %}
        {% for instructor in instructors %}
        {% if ins_len > 1 and loop.index == 1 %}
        <div class="avatar-group overlap">
        {% endif %}
        {{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}

        {% if ins_len > 1 and loop.index == ins_len %}
        </div>
        {% endif %}
        {% endfor %}
        <a class="button-links ml-1" href="{{ get_profile_url(instructors[0].username) }}">
        <span class="course-meta">
            {% if ins_len == 1 %}
                {{ instructors[0].full_name }}
            {% elif ins_len == 2 %}
                {{ instructors[0].full_name.split(" ")[0] }} and {{ instructors[1].full_name.split(" ")[0] }}
            {% else %}
                {% set suffix = "other" if ins_len - 1 == 1 else "others"  %}
                {{ instructors[0].full_name.split(" ")[0] }} and {{ ins_len - 1 }} {{ suffix }}
            {% endif %}
        </span>
        </a>
        <div class="ml-5 course-meta">
            {{ frappe.utils.format_date(lesson.creation, "medium") }}
        </div>
    </div>

    <!-- Lesson Content -->
    <div class="markdown-source lesson-content-card">
        {% if show_lesson %}

            {% if is_instructor and not lesson.include_in_preview %}
            <div class="alert alert-info alert-dismissible mb-4">
                {{ _("This lesson is not available for preview. As you are the Instructor of the course only you can see it.") }}
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            </div>
            {% endif %}

            {% if instructor_notes and (is_moderator or instructor or is_evaluator) %}
            <div class="alert alert-secondary mb-4">
                <div class="bold-heading collapse-section collapsed" data-toggle="collapse" data-target="#instructor-notes">
                    <svg class="icon icon-md pull-right">
                        <use href="#icon-up-line"></use>
                    </svg>
                    <div>
                        {{ _("Instructor Notes") }}
                    </div>
                </div>
                <div class="collapse" id="instructor-notes">
                    {{ instructor_notes }}
                </div>
            </div>
            {% endif %}

            {{ render_html(lesson) }}

        {% else %}
            {% set course_link = "<a class='enroll-in-course' data-course=" + course.name | urlencode + " href=''>" + _('here') +  "</a>" %}
            <div class="alert alert-info mb-0">
                {{ _("There is no preview available for this lesson.
                Please join the course to access it.
                Click {0} to enroll.").format(course_link) }}
            </div>
        {% endif %}
    </div>

    {% if not class_info %}
    {{ pagination(prev_url, next_url) }}
    {% endif %}

</div>
{% endmacro %}


<!-- Pagination -->
{% macro pagination(prev_url, next_url) %}
    {% if prev_url or next_url %}
    <div class="lesson-pagination">
        {% if prev_url %}
        <a class="btn btn-secondary btn-sm prev" href="{{ prev_url }}">
            {{ _("Previous Lesson") }}
        </a>
        {% endif %}

        {% if next_url %}
        <a class="btn btn-primary btn-sm next pull-right" href="{{ next_url }}">
            {{ _("Next Lesson") }}
        </a>
        {% endif %}
    </div>
    {% endif %}
{% endmacro %}

{% macro UploadAttachments() %}
    <div class="attachments-parent">
        <div class="attachment-controls">
            <div class="show-attachments" data-toggle="collapse" data-target="#collapse-attachments" aria-expanded="false">
                <svg class="icon icon-sm">
                    <use class="" href="#icon-attachment">
                </svg>
                <span class="attachment-count" data-count="0">0 {{ _("attachments") }}</span>
            </div>
            <div class="add-attachment">
                <span class="btn btn-sm btn-secondary">
                    <svg class="icon icon-sm">
                        <use class="" href="#icon-upload">
                    </svg>
                    {{ _("Upload Attachments") }}
                </span>
            </div>
        </div>
        <table class="attachments common-card-style collapse hide" id="collapse-attachments"></table>
    </div>
{% endmacro %}

<!-- Discussions Component -->
{% macro Discussions() %}
    {% set topics_count = frappe.db.count("Discussion Topic", {
        "reference_doctype": "Course Lesson",
        "reference_docname": lesson.name
    }) %}
    {% set condition = is_instructor(course.name) or membership %}
    {% set doctype, docname = _("Course Lesson"), lesson.name %}
    {% set title = "Questions" if topics_count else "" %}
    {% set cta_title = "Ask a Question" %}
    {% set button_name = _("Start Learning") %}
    {% set redirect_to = "/courses/" + course.name %}
    {% set empty_state_title = _("Have a doubt?") %}
    {% set empty_state_subtitle = _("Post it here, our mentors will help you out.") %}
    <div class="pt-8">
        {% include "frappe/templates/discussions/discussions_section.html" %}
    </div>
{% endmacro %}


{%- block script %}
    {{ super() }}
    {{ include_script('controls.bundle.js') }}
    <script type="text/javascript">
        var page_context = {{ page_context | tojson }};
        {% include "lms/templates/quiz/quiz.js" %}
    </script>
    {% for ext in page_extensions %}
    {{ ext.render_footer() }}
    {% endfor %}
{%- endblock %}