{% extends "templates/base.html" %}
{% from "www/macros/common_macro.html" import MentorsSection %}
{% block title %}{{ course.title }}
{% endblock %}
{% block head_include %}
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
{% endblock %}
{% block content %}
<div class="common-page-style">
  <div class="container course-home-page">
    {{ widgets.BreadCrumb(course=course) }}
    {{ CourseCardWide(course) }}
    {{ CourseSections(course) }}
    {{ Mentors(course) }}
    {{ widgets.Reviews(course=course, membership=membership) }}
  </div>
</div>
{% endblock %}

<!-- Course Card -->

{% macro CourseCardWide(course) %}
<div class="common-card-style course-card-wide">
  <div class="course-image-wide {% if not course.image %} default-image {% endif %}" {% if course.image
    %}style="background-image: url({{ course.image }});" {% endif %}>
    <div class="course-tags">
      {% for tag in course.get_tags() %}
      <div class="course-card-pills">{{ tag }}</div>
      {% endfor %}
    </div>
    {% if not course.image %}
    <div class="default-image-text">{{ course.title[0] }}</div>
    {% endif %}
  </div>
  <div class="course-card-wide-content">
    <div class="course-info">
      <div class="course-card-wide-title">
        {{ course.title }}
      </div>
      <div class="course-card-wide-intro">
        {{ course.short_introduction }}
      </div>
    </div>
    <div class="course-buttons">
      {% if not course.disable_self_learning and not membership and not course.upcoming and not restriction.restrict %}
      <div class="button wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">
        {{ _("Start Learning") }}
        <img class="ml-2" src="/assets/school/icons/white-arrow.svg" />
      </div>
      {% endif %}
      {% if membership %}
      {% set lesson_index = get_lesson_index(membership.current_lesson) if membership and
      membership.current_lesson
      else '1.1' %}
      <a class="button wide-button is-primary" id="continue-learning"
        href="{{ get_lesson_url(course.name, lesson_index) }}{{ course.query_parameter }}">
        Continue Learning <img class="ml-2" src="/assets/school/icons/white-arrow.svg" />
      </a>
      {% endif %}
      {% if course.upcoming and not is_user_interested %}
      <button class="button wide-button is-default"
        id="notify-me" data-course="{{course.name | urlencode}}">
        Notify me when available
      </button>
      {% endif %}
      {% if course.video_link %}
      <div class="button wide-button is-secondary video-preview">
        Watch Video Preview
        <img class="ml-2" src="/assets/school/images/play.png" />
      </div>
      {% endif %}

      {% if is_cohort_staff(course.name, frappe.session.user) %}
        <a class="button wide-button is-secondary"
           href="/courses/{{course.name}}/manage"
           style="color: inherit;">
          Manage the course
        </a>
      {% endif %}
    </div>
  </div>
</div>

<div id="interest-alert" class="alert alert-dismissible empty-state p-4 mt-10 {% if not is_user_interested %} hide {% endif %}">
  You have opted to be notified for this course. You will receive an email when the course becomes available.
  <a href="#" class="close p-4" data-dismiss="alert" aria-label="close">&times;</a>
</div>

{% if course.video_link %}
<div class="modal fade preview-modal" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="course-home-headings modal-headings">{{ course.title }}</div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <iframe class="video-iframe" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen src="{{ course.video_link }}"></iframe>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endmacro%}

<!-- Course Outline and Creator -->

{% macro CourseSections(course) %}
<div class="course-outline-instructor-parent">
  <div class="course-home-outline">
    {{ widgets.CourseOutline(course=course, membership=membership) }}
    {{ Description(course) }}
  </div>
  <div class="course-creator-progress-parent">
    {{ CreatorSection(course) }}
    {{ Progress(course) }}
    {{ Overview(course) }}
  </div>
</div>
{% endmacro %}

{% macro CreatorSection(course) %}
<div class="course-creator-section">
  <div class="course-home-headings">
    Creator
  </div>
  {% for instructor in get_instructors(course.name) %}
  {{ widgets.MemberCard(member=instructor, show_course_count=True, avatar_class="avatar-large") }}
  {% endfor %}
</div>
{% endmacro %}

{% macro Progress(course) %}
{% set certificate = is_certified(course.name) %}
{% set progress = frappe.utils.cint(membership.progress) %}
{% if progress %}
<div class="course-progress-section">
  <div class="course-home-headings">
    Your Progress
  </div>
  <div class="common-card-style progress-card">
    <p class="small-title">
      {% if progress != 100 %}
      Great work so far!
      {% else %}
      Excellent work on completing this course 👏
      {% endif %}
    </p>
    <p class="progress-text">
      {% if progress != 100 %}
      Challenge yourself to complete the lessons and grow professionally.
      {% else %}
      You have reached a new level in your journey to success!
      {% endif %}
    </p>
    <div class="progress-percentage">
      {{ frappe.utils.rounded(progress) }}%
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}"
        aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    {% if certificate %}
    <a class="muted-text dark-links mt-5 text-center" href="/courses/{{ course.name }}/{{ certificate }}">Get
      Certificate</a>
    {% endif %}
  </div>
</div>
{% endif %}
{% endmacro %}

{% macro Description(course) %}
<div class="course-description-section">
  <div class="course-home-headings">
    Course Description
  </div>
  <div class="common-card-style description-card">
    {{ frappe.utils.md_to_html(course.description) }}
  </div>
</div>
{% endmacro %}

{% macro Overview(course) %}
{% set avg_rating = get_average_rating(course.name) %}
{% if get_students(course.name) | length or avg_rating %}
<div class="course-overview-section">
  <div class="course-home-headings">
    Overview
  </div>
  <div class="common-card-style overview-card small-title">
    {% if get_students(course.name) | length %}
    <div class="overview-item">
      <img class="icon-background mr-1" src="/assets/school/icons/user.svg" />
      {{ get_students(course.name) | length }} Enrolled
    </div>
    {% endif %}
    {% if avg_rating %}
    <div class="overview-item">
      <img class="icon-background mr-1" src="/assets/school/icons/rating.svg" />
      {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }} Rating
    </div>
    {% endif %}
  </div>
</div>
{% endif %}
{% endmacro %}

<!-- Mentors -->

{% macro Mentors(course) %}
{% if get_mentors(course.name) | length %}
<div class="course-home-mentors">
  <div class="course-home-headings">
    Mentors
  </div>
  <div class="member-parent">
    {% for mentor in get_mentors(course.name) %}
    {{ widgets.MemberCard(member=mentor, show_course_count=False) }}
    {% endfor %}
  </div>
  <div class="view-all-mentors">
    <span class="card-divider-dark flex-one"></span>
    <span class="course-instructor"><span class="all-mentors-text">View all mentors</span> <img class="mentor-icon"
        src="/assets/school/icons/down-arrow.svg" /></span>
    <span class="card-divider-dark flex-one"></span>
  </div>
</div>
{% endif %}
{% endmacro %}