{% 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) }}
    {{ CourseOutlineAndCreator(course) }}
    {{ Mentors(course) }}
    {{ CourseDescriptionAndOverview(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 %}
      <div class="button wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">
        Start Learning
        <img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
      </div>
      {% endif %}
      {% if membership %}
      {% set lesson_index = course.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="{{ course.get_learn_url(lesson_index) }}{{ course.query_parameter }}">
        Continue Learning <img class="ml-2" src="/assets/community/icons/white-arrow.svg" />
      </a>
      {% endif %}
      {% if course.upcoming %}
      <button class="button wide-button is-default" id="notify-me" data-course="{{course.name | urlencode}}"
      {% if is_user_interested %} disabled="disabled" title="Your interest has already been noted." {% endif %} >
        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/community/images/play.png" />
      </div>
      {% endif %}
      {% set certificate = course.is_certified() %}
      {% if certificate %}
      <a class="button wide-button is-secondary dark-links" href="/courses/{{ course.name }}/{{ certificate }}">Get Certificate</a>
      {% endif %}
    </div>
  </div>
</div>

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

<!-- Course Outline and Creator -->

{% macro CourseOutlineAndCreator(course) %}
<div class="course-outline-instructor-parent">
  <div class="course-home-outline">
    {{ widgets.CourseOutline(course=course, membership=membership) }}
  </div>
  <div class="course-creator-progress-parent">
    <div class="course-creator-section">
      <div class="course-home-headings">
        Creator
      </div>
      {{ widgets.MemberCard(member=course.get_instructor(), show_course_count=True, dimension_class="member-card-large") }}
    </div>
    {% set progress = course.get_course_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>
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endmacro %}

<!-- Mentors -->

{% macro Mentors(course) %}
{% if course.get_mentors() | length %}
<div class="course-home-mentors">
  <div class="course-home-headings">
    Mentors
  </div>
  <div class="mentors-section">
    {% for mentor in course.get_mentors() %}
    {{ widgets.MemberCard(member=mentor, show_course_count=False, dimension_class="") }}
    {% 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/community/icons/down-arrow.svg" /></span>
    <span class="card-divider-dark flex-one"></span>
  </div>
</div>
{% endif %}
{% endmacro %}

<!-- Course Description and Overview -->

{% macro CourseDescriptionAndOverview(course) %}
<div class="course-outline-instructor-parent">
  <div class="course-description-section">
    <div class="course-home-headings">
      Course Description
    </div>
    <div class="common-card-style description-card small-title">
      {{ frappe.utils.md_to_html(course.description) }}
    </div>
  </div>
  {% set avg_rating = course.get_average_rating() %}
  {% if course.get_students() | 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 course.get_students() | length %}
      <div class="overtime-item">
        <img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
        {{ course.get_students() | length }} Enrolled
      </div>
      {% endif %}
      {% if avg_rating %}
      <div class="overtime-item">
        <img class="icon-background mr-1" src="/assets/community/icons/rating.svg" />
        {{ avg_rating }} Rating
      </div>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>
{% endmacro %}