<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">
  <a href="{{ course.cover_path }}"> 
  <div class="uk-panel uk-panel-box uk-panel-box-secondary uk-border svg-time-position">
    {% if course.ribbon %}
      <div class="uk-panel-badge uk-badge">
        {{ course.ribbon }}
      </div>
    {% endif %}
    <div class="uk-panel-teaser uk-panel-teaser-mod">
      {% 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 %}
    {% if current_person.enrolled_in_course? %}
      <svg viewBox="0 0 36 36" class="percent-circle red">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />s
      <path class="circle"
        stroke-dasharray="{{course.progress}}, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">{{course.progress}}%</text>
      </svg>
    {% endif %}
    </div>
    {% if current_school.filtering_enabled? %}
      <span>
      </span>
    {% endif %} 
    <h3 class="uk-panel-title uk-margin-bottom-remove my-course-title">
      {% 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>
    <div class= "course-desc-clamp">
    <p class="uk-margin-small-top uk-margin-large-bottom space-title"> {{ course.full_description }} 
    </p>
    </div>
    <p class="uk-margin-small-top uk-margin-large-bottom">
{% comment %} <svg id="clock red" viewBox="0 0 100 100">
  <circle id="face" cx="50" cy="50" r="45"/>
    <rect id="hour" x="48.5" y="11.5" width="1" height="40" rx="2.5" ry="2.55" />
    <line id="min" x1="49.5" y1="51" x2="80" y2="26" />
</svg> {% endcomment %}
<div class="clock-container">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
    <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g stroke="#e60000">
            <g>
                <g>
                    <g transform="translate(-555 -1347) translate(554 982) translate(1 363) translate(0 2)">
                        <circle cx="10" cy="10" r="9.333"/>
                        <path d="M6 6L10 10 16.667 10M10 3.333L10 4.667M10 16.667L10 15.333M3.333 10L4.667 10"/>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
{{ course.short_description }}   
    </p>
<div>        
    {% comment %} <p class="uk-margin-small-top uk-margin-large-bottom">{{ course.instructor_names }}</p> {% endcomment %}
    {% if current_person.enrolled_in_course? %}
      <div data-percent="{{ course.progress }}"></div>
    {% else %}
        {% if current_school.apps.commerce.active? %}
          {{ course.formatted_price }}
        {% else %}
        
        {% endif %}
      </a>
    {% endif %}
  </div>
  </a>
</li>