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

  <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 get_tags(course.name) %}
      <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-content">
  <div class="course-card-meta">
    {% if get_lessons(course.name) | length %}
    <div class="vertically-center">
      <svg class="icon icon-md">
        <use href="#icon-education"></use>
      </svg>
      {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
    </div>
    {% endif %}

    {% if course.status and course.status != "Approved"%}
    {% set pill_color = "gray" if course.status == "In Progress" else "orange" %}
    <div class="pull-right indicator-pill {{ pill_color }} "> {{ course.status }} </div>
    {% endif %}

    {% set student_count = get_students(course.name) | length %}
    {% set avg_rating = get_average_rating(course.name) %}
    {% if student_count and avg_rating %}
    <div class="vertically-center">
      {% if student_count %}
        <div class="vertically-center">
          <svg class="icon  icon-md">
            <use class="" href="#icon-users">
          </svg>
          {{ student_count }}
        </div>
      {% endif %}

        {% if avg_rating %}
        <div class="vertically-center ml-3">
          <svg class="icon icon-md">
            <use href="#icon-star"></use>
          </svg>
          {{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }}
        </div>
        {% endif %}
    </div>
    {% endif %}
  </div>
  <div class="course-card-title">{{ course.title }}</div>

  {% if membership and not read_only %}
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
    aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
      <span class="sr-only"> {{ progress }} Complete</span>
    </div>
  </div>
  <div class="progress-percent">{{ progress }}% Completed</div>
  {% endif %}

  <div class="course-card-footer">
    <span class="">
      {% set instructors = get_instructors(course.name) %}
      {% 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" href="{{ get_profile_url(instructors[0].username) }}">
        <span class="course-instructor">
        {% if ins_len == 1 %}
          {{ instructors[0].full_name }}
        {% 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>
      </span>
  </div>

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

  {% set lesson_index = 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 "" %}

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

  {% elif course.upcoming %}
  <a class="stretched-link" href="/courses/{{ course.name }}"></a>

  {% elif membership %}
  <a class="stretched-link" href="{{ get_lesson_url(course.name, lesson_index) }}{{ query_parameter }}"></a>

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

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