{% set membership = course.get_membership(frappe.session.user) %}
{% set progress = course.get_course_progress() %}
<div class="common-card-style course-card">

  <div class="course-image {% 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 %}
      {% if membership and not read_only %}
      {% if progress < 100 %}
       <div class="course-card-pills dark-pills ml-auto">{{ frappe.utils.rounded(progress) }}% Completed</div>
      {% else %}
      <div class="course-card-pills dark-pills ml-auto"> <img src="/assets/community/icons/check.svg"> Completed </div>
      {% endif %}
      {% endif %}
    </div>
    {% if not course.image %}
    <div class="default-image-text">{{ course.title[0] }}</div>
    {% endif %}
  </div>

  <div class="course-card-content">
    <div class="course-card-meta muted-text">
      {% if course.get_chapters() | length %}
      <span>
        {{ course.get_chapters() | length }} Chapters
      </span>
      {% endif %}
      {% if course.get_chapters() | length and course.get_upcoming_batches() | length %}
      <span class="font-weight-bold ml-3 mr-3"> . </span>
      {% endif %}
      {% if course.get_upcoming_batches() | length %}
      <span class="">
        {{ course.get_upcoming_batches() | length }} Open Batches
      </span>
      {% endif %}
    </div>
    <div class="course-card-title">{{ course.title }}</div>
    <div {% if not read_only %} class="mb-4" {% endif %}>
      <span class="zindex">
        {{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
        <a class="button-links" href="{{ get_profile_url(course.get_instructor().username) }}">
          <span class="course-instructor">
            {{ course.get_instructor().full_name }}
          </span>
        </a>
      </span>
      <span class="course-student-count">
        {% if course.get_students() | length %}
        <span class="mr-4">
          <img class="icon-background" src="/assets/community/icons/user.svg" />
          {{ course.get_students() | length }}
        </span> {% endif %}
        {% set avg_rating = course.get_average_rating() %}
        {% if avg_rating %}
        <span class="">
          <img class="icon-background" src="/assets/community/icons/rating.svg" />
          {{ avg_rating }}
        </span>
        {% endif %}
      </span>
    </div>

    {% if read_only %}
    <a class="stretched-link" href="/courses/{{ course.name }}"></a>
    {% else %}

    {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
    membership.current_lesson else '1.1' %}
    {% set query_parameter = "?batch=" + membership.batch if membership and
    membership.batch else "" %}
    {% set certificate = course.is_certified() %}

    {% if certificate %}
    <div class="view-course-link is-default">
      Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
    </div>
    <a class="stretched-link" href="/courses/{{ course.name }}/{{ certificate }}"></a>

    {% elif course.enable_certification and progress == 100 %}
    <div class="view-course-link is-default" id="certification" data-course="{{ course.name }}">
      Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
    </div>

    {% elif progress == 100 %}
    <div class="view-course-link is-default">
      Course Completed <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
    </div>
    <a class="stretched-link" href="/courses/{{ course.name }}"></a>

    {% elif course.upcoming %}
    <div class="view-course-link is-secondary border">
      Upcoming Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
    </div>
    <a class="stretched-link" href="/courses/{{ course.name }}"></a>

    {% elif membership %}
    <div class="view-course-link is-primary">
      Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
    </div>
    <a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>

    {% else %}
    <div class="view-course-link is-default">
      View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
    </div>
    <a class="stretched-link" href="/courses/{{ course.name }}"></a>

    {% endif %}
    {% endif %}
  </div>
</div>

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

    $("#certification").unbind().click((e) => {
      create_certificate(e);
    });
  })

  var trim_course_titles = () => {
    $(".course-card-title").each((i, element) => {
      var title = $(element).text();
      var length = $(window).width() <= 375 ? 60 : 65;
      var suffix = title.length > length ? "..." : "";
      $(element).text(title.substring(0, length) + suffix);
    });
  }

  var create_certificate = (e) => {
    e.preventDefault();
    course = $(e.currentTarget).attr("data-course");
    frappe.call({
      method: "community.lms.doctype.lms_certification.lms_certification.create_certificate",
      args: {
        "course": course
      },
      callback: (data) => {
        window.location.href = `/courses/${course}/${data.message}`;
      }
    })
  }
</script>