{% assign cat_name = "" %}
{% assign cat_class = "" %}
{% for category in course.categories limit: 1 %}
  {% unless category.name contains "Focus-" or category.name contains "Production Applications-" or category.name contains "Materials-" or category.name contains "Cleaning Methods-" %}
    {% assign cat_name = category.name %}
    {% assign cat_class = cat_name | replace: " ", "-" | downcase | replace: "&", "and" %}
  {% endunless % %}
{% endfor %}

<div class="np-card course-card">

  <div class="np-card-container">
    {% if course.ribbon %}
      <div class="np-card-ribbon">
        {{ course.ribbon }}
      </div>
    {% endif %}
    <div style="position: relative;">
      <div class="course-category {{cat_class}}">
        <span>{{ cat_name }}</span>
      </div>
      <div class="course-image-container">
        <img
          class="np-card-image"
          alt="{{ course.name }}"
          src="{{ course.image_url }}">
      </div>
    </div>
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <h3 class="np-card-content-title">
        {{ course.name }}
      </h3>
      {% unless course.instructor_names == "" %}
        <div class="np-card-content-subtitle">
          {{ course.instructor_names }}
        </div>
      {% endunless %}
      <div class="np-card-content-footer">
        <div class="np-card-content-progress np-button-color">
          {% if course.progress == 100 %}
            <i class="far fa-check-circle"></i>
            <span>completed</span>
          {% elsif course.progress > 0 and course.progress < 100 %}
            <i class="fas fa-spinner"></i>
            <span>{% t shared.progress, count: course.progress %}</span>
          {% else %}
            <i class="not-started-circle"></i>
            <span>{% t shared.progress, count: course.progress %}</span>
          {% endif %}

        </div>
        {% capture course_path %}
          {% route course, id: course.id %}{% endcapture %}
        {% if course.has_to_restart? %}
          {% include "course_version_outdated_popup", path: course_path %}
        {% endif %}
        <a class="np-button" href="{{ course_path }}">
          {% if course.progress > 0 and course.progress < 100 %}
            Continue
          {% elsif course.progress == 100 %}
            Retake
          {% else %}
            Start
          {% endif %}
        </a>
      </div>
    </div>
  </div>
</div>