{% macro component(title, image, open, favorite, prefix, position='center') %}
<div class="card card-path overlay js-overlay stack" 
{% if open %} data-overlay-onload-show data-popover-onload-show{% endif %}
data-toggle="popover" data-trigger="click">
  <a href="{{ prefix or '' }}path.html" class="js-image card-img-top" 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>View path</small>
      </span>
    </span>
  </a>
  {% if free %}
  <span class="corner-ribbon corner-ribbon--default-right-top corner-ribbon--shadow bg-accent text-white">NEW</span>
  {% endif %}
  <div class="card-body">
    <div class="d-flex align-items-center">
      <div class="flex">
        <div class="d-flex align-items-center">
          <img src="assets/images/paths/{{ image }}_40x40@2x.png" width="40" height="40" alt="Angular" class="mr-16pt rounded">
          <div class="flex">
            <div class="card-title text-body mb-0">{{ title }}</div>
            <div class="text-muted d-flex lh-1">24 courses</div>
          </div>
        </div>
      </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>
  </div>

</div>
<div class="popoverContainer d-none">
  <div class="popover-course">
    <div class="media">
      <div class="media-left">
        <img src="assets/images/paths/{{ image }}_40x40@2x.png" width="40" height="40" alt="Angular" class="rounded">
      </div>
      <div class="media-body">
        <div class="card-title mb-0">{{ title }}</div>
        <p class="lh-1 mb-0">
          <span class="text-black-50 small">with</span>
          <span class="text-black-50 small font-weight-bold">Elijah Murray</span>
        </p>
      </div>
    </div>
    <p class="my-16pt text-black-70">Learn the fundamentals of working with Angular and how to create basic applications.</p>

    <div class="mb-16pt">
      <div class="d-flex align-items-center">
        <span class="material-icons icon-16pt text-black-50 mr-8pt">check</span>
        <p class="flex text-black-50 lh-1 mb-0"><small>Fundamentals of working with Angular</small></p>
      </div>
      <div class="d-flex align-items-center">
        <span class="material-icons icon-16pt text-black-50 mr-8pt">check</span>
        <p class="flex text-black-50 lh-1 mb-0"><small>Create complete Angular applications</small></p>
      </div>
      <div class="d-flex align-items-center">
        <span class="material-icons icon-16pt text-black-50 mr-8pt">check</span>
        <p class="flex text-black-50 lh-1 mb-0"><small>Working with the Angular CLI</small></p>
      </div>
      <div class="d-flex align-items-center">
        <span class="material-icons icon-16pt text-black-50 mr-8pt">check</span>
        <p class="flex text-black-50 lh-1 mb-0"><small>Understanding Dependency Injection</small></p>
      </div>
      <div class="d-flex align-items-center">
        <span class="material-icons icon-16pt text-black-50 mr-8pt">check</span>
        <p class="flex text-black-50 lh-1 mb-0"><small>Testing with Angular</small></p>
      </div>
    </div>

    <div class="row align-items-center">
      <div class="col-auto">
        <div class="d-flex align-items-center mb-4pt">
          <span class="material-icons icon-16pt text-black-50 mr-4pt">access_time</span>
          <p class="flex text-black-50 lh-1 mb-0"><small>6 hours</small></p>
        </div>
        <div class="d-flex align-items-center mb-4pt">
          <span class="material-icons icon-16pt text-black-50 mr-4pt">play_circle_outline</span>
          <p class="flex text-black-50 lh-1 mb-0"><small>12 lessons</small></p>
        </div>
        <div class="d-flex align-items-center">
          <span class="material-icons icon-16pt text-black-50 mr-4pt">assessment</span>
          <p class="flex text-black-50 lh-1 mb-0"><small>Beginner</small></p>
        </div>
      </div>
      <div class="col text-right">
        <a href="{{ prefix or '' }}path.html" class="btn btn-primary">View Path</a>
      </div>
    </div>
  </div>
</div>
{% endmacro %}
{{ component() }}