<li class="uk-width-large-1-3 uk-width-medium-1-2 uk-width-small-1-1 uk-margin-large-bottom school-website-course-tile">
  <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-border">
    {% if course.ribbon %}
      <div class="uk-panel-badge uk-badge">
        {{ course.ribbon }}
      </div>
    {% endif %}
    <div class="uk-panel-teaser">
      {% if current_person.enrolled_in_course? %}
        <a href="{{ course.cover_path }}" class="main-link">
          <img src="{{ course.list_image_url }}" class="uk-responsive-width uk-width-1-1">
        </a>
      {% else %}
        <a href="{{ course.details_path }}" class="main-link">
          <img src="{{ course.list_image_url }}" class="uk-responsive-width uk-width-1-1">
        </a>
      {% endif %}
    </div>
    {% if current_school.filtering_enabled? %}
      <span>
        {{ course.course_category_names }}
      </span>
    {% endif %}
    <h3 class="uk-panel-title uk-margin-bottom-remove">
      {% if current_person.enrolled_in_course? %}
        <a href="{{ course.cover_path }}" data-test="course-name">{{ course.name }}</a>
      {% else %}
        <a href="{{ course.details_path }}" data-test="course-name">{{ course.name }}</a>
      {% endif %}
    </h3>
    <p class="uk-margin-small-top uk-margin-large-bottom">{{ course.instructor_names }}</p>
    {% if current_person.enrolled_in_course? %}
      <p class="uk-margin-small-bottom">{{ course.progress_text }}</p>
      <span class="uk-position-bottom-right school-website-course-tile-action">
        {% if course.has_to_restart? %}
          {% include "course_version_outdated_popup", path: course.cover_path %}
        {% endif %}
        <a href="{{ course.cover_path }}" class="uk-button uk-button-primary" data-test="go-to-course-button">{{ course.go_to_label }}</a>
      </span>
    {% else %}
      <a href="{{ course.details_path }}" class="uk-button uk-button-outline school-website-course-tile-action uk-position-bottom-right">
        {% if current_school.apps.commerce.active? %}
          {{ course.formatted_price }}
        {% else %}
          {{ course.view_label }}
        {% endif %}
      </a>
    {% endif %}
  </div>
</li>
