{% macro component(title, image, free, favorite, prefix, position='center') %}
<div class="card course-list-item o-hidden overlay js-overlay"
  {% if open %} data-overlay-onload-show{% endif %}
  data-trigger="hover">
  <div class="media media-stack-xs align-items-stretch">
    <div class="media-left media__thumbnail mr-0">
      <a href="{{ prefix or '' }}course.html" class="js-image" data-position="{{ position }}">
        <img src="assets/images/paths/{{ image }}_430x168.png" alt="course">
        <span class="overlay__content">
          <span class="overlay__action d-flex flex-column text-center">
            <i class="material-icons">play_circle_outline</i>
            <small>Preview course</small>
          </span>
        </span>
      </a>
      {% if free %}
      <span class="corner-ribbon corner-ribbon--default-left-top corner-ribbon--shadow bg-accent text-white">NEW</span>
      {% endif %}
    </div>
    <div class="media-body card-body">
      <div class="d-flex">
        <div class="flex">
          <a class="card-title m-0" href="#">{{ title }}</a>
          <p class="d-flex flex-wrap lh-1 mb-16pt">
            <small class="text-50 font-weight-bold mr-8pt">Elijah Murray</small>
            <small class="text-50">Software Engineer and Developer</small>
          </p>
        </div>
        <a href="{{ prefix or '' }}course.html" class="ml-4pt material-icons {% if favorite %}text-accent{% else %}text-20{% endif %} card-course__icon-favorite">favorite</a>
      </div>
      
      <p class="text-50 course-list-item__excerpt">This course will teach you the fundamentals o*f working with Angular 2. You *will learn everything you need to know to create complete applications including: components, services, directives, pipes, routing, HTTP, and even testing.</p>

      <div class="d-flex align-items-center">
        <div class="flex d-flex lh-1">
          <small class="text-50 mr-8pt">6 hours</small>
          <small class="text-50">13 lessons</small>
        </div>
        <div class="d-flex align-items-center">
          <small class="text-50 mr-8pt">4.7</small>
          <div class="rating flex">
            <span class="rating__item"><span class="material-icons">star</span></span>
            <span class="rating__item"><span class="material-icons">star</span></span>
            <span class="rating__item"><span class="material-icons">star</span></span>
            <span class="rating__item"><span class="material-icons">star</span></span>
            <span class="rating__item"><span class="material-icons">star_border</span></span>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</div>
{% endmacro %}
{{ component() }}