{% comment %} Logic to traverse courses and find total number of sections {% endcomment %}
{% assign total_activities = 0 %}
{%- for sections in course.published_sections -%}
  {%- for activity in sections.activities -%}
    {% capture total_activities %}{{ total_activities | plus:1 }}{% endcapture %}
  {%- endfor -%}
{%- endfor -%}

{% comment %}
  There's no way to access a course's UID. We will obtain this by using string
  manipulation on the cover_path URL which has a UID.
  course.cover_path ~> /outline/{{id}}/cover
{% endcomment %}
{% assign course_path = course.cover_path | split: '/' %}
{% assign current_course_id = course_path[2] %}


{% assign course_date = course.created_at | date: "%s" %}
{% assign number_date = course_date | times: 1%}

<div data-order = "{{number_date}}" class="course-details__item grid__item grid__item--tablet-up-half grid__item--desktop-up-third" data-test="{{ course.name }}">
{% if course.ribbon %}
      <div class="uk-panel-badge uk-badge">
        {{ course.ribbon }}
      </div>
    {% endif %}
  <a href="{{ course.cover_path }}" class="main-link">
    <img src="{{ course.list_image_url }}" class="course-details__image" alt="">
  </a>

  <div class="gutter-bottom">
    <h4 class="text-dark-blue euclid-circular-bold heading--3 course-details__name">{{ course.name }}</h4>
    <p class="text-grey euclid-circular-light course-details__desc">
      {{ course.short_description }}
       <!-- <a class="body-link">Learn&nbsp;More</a> -->
    </p>
  </div>

  <div class="grid">
    <div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half">
      <p>Total modules</p>
    </div>
    <div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half text-right">
      <p>{{ course.published_sections.count }}</p>
    </div>
  </div>
  <hr class="course-details__seperator">

  <div class="grid">
    <div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half">
      <span>Total lessons</span>
    </div>
    <div class="text-dark-blue euclid-circular-semibold grid__item grid__item--mobile-up-half text-right">
      <span>{{ total_activities }}</span>
    </div>
  </div>
  <hr class="course-details__seperator">

  <div class="grid">
    <div class="grid__item text-center--tablet-down">
      {%- if current_person.enrolled_in_course? -%}
        {%- if course.progress_text == '0% Complete'-%}
          <a href="{{ course.cover_path }}" class="sainte-colombe-regular marketing-button marketing-button--small" style="color: white !important; background-color: #009CBD !important; border-radius: 0px !important; font-size: 12px;">
            Start Course
          </a>
        {%- else -%}
          <a href="{{ course.cover_path }}" class="sainte-colombe-regular marketing-button marketing-button--small" style="color: white !important; background-color: #009CBD !important; border-radius: 0px !important; font-size: 12px;">
            Continue Course
          </a>
        {%- endif -%}
      {%- else -%}
        <a href="{{ course.details_path }}" class="sainte-colombe-regular marketing-button marketing-button--small" style="color: white !important; background-color: #009CBD !important; border-radius: 0px !important; font-size: 12px;">
          View Course
        </a>
      {%- endif -%}
    </div>
  </div>
</div>