<li style="order: {{course.properties.order | round }}" class="uk-width-large-1-2 uk-width-medium-1-2 uk-width-small-1-1 uk-margin-large-bottom school-website-course-tile single-course" data-id="{{ course.id }}" data-progress="{{ course.progress }}">

  <div class="uk-panel uk-panel-box uk-panel-box-secondary">
    {% if course.ribbon %}
      {% if course.properties.coming_soon %}
        <div class="uk-panel-badge uk-badge custom-badge">
      {% else %}
        <div class="uk-panel-badge uk-badge">
      {% endif %}
        {{ course.ribbon }}
      </div>
    {% endif %}
    <div class="uk-panel-teaser">
        <span class="completed-badge {% if course.progress == 100 %}completed-active{% endif %}">Course Completed</span>

      {% if current_person.enrolled_in_course? %}

        {% if course.properties.coming_soon %}
          <a style="background-image:url({{ course.list_image_url }}); cursor: default;" class="main-link ui-code-hack"></a>
        {% else %}  
          <a href="{{ course.cover_path }}" style="background-image:url({{ course.list_image_url }})" class="main-link"></a>  
        {% endif %}

      {% else %}
        <a href="{{ course.details_path }}" style="background-image:url({{ course.list_image_url }})" class="main-link">
        </a>
      {% endif %}
    </div>
    {% if current_school.filtering_enabled? %}
      <span>
        {{ course.course_category_names }}
      </span>
    {% endif %}
    <h3 class="custom-title">
      {% if course.properties.coming_soon %}
        {% if current_person.enrolled_in_course? %}
          <a data-test="course-name" style="cursor: text;">{{ course.name }}</a>
        {% else %}
          <a data-test="course-name" style="cursor: text;">{{ course.name }}</a>
        {% endif %}
      {% else %}
        {% 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 %}
      {% endif %}
    </h3>
    <p>{{ course.full_description | strip_html }}</p>
    
      <div class="completed-icon {% if course.progress == 100 %}completed-active{% endif %}"><img src="https://doubleverify.com/wp-content/uploads/2020/12/right-tick.png" alt="completed icon"></div>
    
    {% if current_person.enrolled_in_course? %}
      {% unless course.properties.coming_soon %}
        <a href="{{ course.cover_path }}" class="uk-button uk-button-primary school-website-course-tile-action uk-position-bottom-right" data-test="go-to-course-button">{% if course.progress == 100 %}START AGAIN{% else %}{% if course.progress > 0 %}RESUME COURSE{% else %}START COURSE{% endif %}{% endif %}<span>&raquo;</span></a>
      {% endunless %}
    {% 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>
