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

{% comment %}
  Maps each course to a unique wistia video ID
  7y2g0qxeau - Dropshipping 101
  qo5788bbls - Print-on-demand
  e9hnbvbf7d - Getting Started
  6g1xm0gjib - Sell online
  ltclfpq7nt - Instagram
  opg154519q - Product photography
  u3blun0rzz - Email Marketing
  a611upbzc3 - Design online store
  bo4mzx19u6 - SEO
  7y64y9pmh4 - Basic Facebook Advertising
  7o0az46tem - Google Ads
  ykp3huo7aw - Advanced Facebook Advertising
  kb70y48ybt - Goal Setting with Daymond John
{% endcomment %}
{% assign wistia_video_map =
  '
    bjd91jww | 7y2g0qxeau ,
    ozhqhnlz | qo5788bbls ,
    la8hxhth | e9hnbvbf7d ,
    ydidcycm | 6g1xm0gjib ,
    uyoyzb1a | ltclfpq7nt ,
    0bx4ha83 | opg154519q ,
    v9fhhpjh | u3blun0rzz ,
    e1wjgvk5 | a611upbzc3 ,
    srhueoa4 | bo4mzx19u6 ,
    8yt4tqt9 | 7y64y9pmh4 ,
    rx4dopwc | 7o0az46tem ,
    qk3vorxv | ykp3huo7aw ,
    ysr17oj6 | kb70y48ybt ,
  '
%}

{% assign course_wistia_video_id = '' %}
{% assign wistia_element = wistia_video_map | split: ',' %}
{%- for course in wistia_element -%}

  {% comment %}
    Capture will convert the array element into an array and strip is used
    to remove the blank space characters for string comparison
  {% endcomment %}
  {% assign course_element = course | split: '|' %}

  {%- capture course_id -%}
    {{ course_element[0] | strip }}
  {%- endcapture -%}

  {%- if course_id == current_course_id -%}
    {% assign course_wistia_video_id = course_element[1] %}
  {%- endif -%}
{%- endfor -%}

<div id="{{ course.progress }}" 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 }}" target="_blank" class="main-link">
    <img src="{{ course.list_image_url }}" class="course-details__image" alt="">
  </a>

  <div class="gutter-bottom">
    <h4 class="heading--3 course-details__name">{{ course.name }}</h4>
    <p class="course-details__desc">
      {{ course.short_description }}
       <!-- <a class="body-link">Learn&nbsp;More</a> -->
    </p>
  </div>

  <div class="grid">
    <div class="grid__item grid__item--mobile-up-half">
      <p>Total modules</p>
    </div>
    <div class="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="grid__item grid__item--mobile-up-half">
      <span>Total activities</span>
    </div>
    <div class="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 course.progress_text == '0% Complete'-%}
        <a href="{{ course.cover_path }}" target="_blank"class="course-button marketing-button marketing-button--small">
          Start Course
        </a>

        <!-- <span class="wistia_embed wistia_async_{{course_wistia_video_id | strip}} popover=true popoverContent=html wistia_embed_initialized">
          <div class="wistia_click_to_play">
            <a href="https://fast.wistia.net/embed/iframe/{{course_wistia_video_id}}?popover=true" class="marketing-button marketing-button--small marketing-button--secondary">
              Watch Trailer
            </a>
          </div>
        </span> -->
      {%- else -%}
        <a href="{{ course.cover_path }}" class="course-button marketing-button marketing-button--small">
          Continue Course
        </a>
        <span class="course-details__progress-text">{{ course.progress_text }}</span>
      {%- endif -%}
    </div>
  </div>
</div>