{% extends "templates/base.html" %}
{% from "www/hackathons/macros/card.html" import null_card %}
{% block title %}{{ 'Courses' }}{% endblock %}
{% block head_include %}
<meta name="description" content="{{ 'Courses' }}" />
<meta name="keywords" content="Courses" />
<style>
</style>
{% endblock %}

{% block content %}
<div class="common-page-style">
  <div class="">
    <div class="course-top-section">
      <div class="courses-header">
        {{ 'All Courses' }}
      </div>
      <div class="cards-parent">
        {% for course in courses %}
        {{ course_card(course) }}
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}


{% macro course_card(course) %}
<div class="common-card-style course-card">
  <div class="course-image" style="background-image: url({{ course.image }});">
    <div class="course-tags">
      {% for tag in course.get_tags() %}
      <div class="course-card-pills">{{ tag }}</div>
      {% endfor %}
    </div>
  </div>
  <div class="course-card-content">
    <div class="course-card-meta">
      {% 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 class="card-divider"></div>
    <div class="course-card-meta-2">
      {{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
      <span class="course-instructor">
        {{ course.get_instructor().full_name }}
      </span>
      {% if course.get_students() | length %}
      <span class="course-student-count">
        <img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
        {{ course.get_students() | length }}
      </span>
      {% endif %}
    </div>
    {% if course.get_membership(frappe.session.user) %}
    <div class="view-course-link is-primary">
      Continue Course <img class="ml-3" src="/assets/community/icons/white-arrow.svg" />
    </div>
    {% else %}
    <div class="view-course-link">
      View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
    </div>
    {% endif %}
  </div>
  <a class="stretched-link" href="/courses/{{ course.name }}"></a>
</div>
{% endmacro %}

{% block script %}
<script>
  frappe.ready(() => {
    $(".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);
    })
  })
</script>
{% endblock %}