{% macro component(title, image, free, selected, open, favorite, prefix, position='center', avatar=image, class='', account) %}
<div class="card card-sm card--elevated p-relative o-hidden overlay overlay--primary-dodger-blue js-overlay mdk-reveal js-mdk-reveal {{ class }}" 
{% if open %} data-overlay-onload-show data-popover-onload-show data-force-reveal{% endif %}
data-partial-height="44" data-toggle="popover" data-trigger="click">
  {% set link = 'student-course.html' %}
  {% if account %}
    {% set link = 'student-take-course.html' %}
  {% endif %}
  <a href="{{ prefix or '' }}{{ link }}" class="js-image" data-position="{{ position }}">
    <img src="assets/images/paths/{{ image }}_430x168.png" alt="course">
    <span class="overlay__content align-items-start justify-content-start">
      <span class="overlay__action card-body d-flex align-items-center">
        <i class="material-icons mr-4pt">play_circle_outline</i>
        <span class="card-title text-white">{% if account %}Resume{% else %}Preview{% endif %}</span>
      </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="mdk-reveal__content">
    <div class="card-body">
      <div class="d-flex">
        <div class="flex">
          <a class="card-title" href="{{ prefix or '' }}{{ link }}">{{ title }}</a>
          <small class="text-50 font-weight-bold mb-4pt">Elijah Murray</small>
        </div>
        <a href="{{ prefix or '' }}{{ link }}" data-toggle="tooltip" data-title="{% if favorite !== true %}Add{% else %}Remove{% endif %} Favorite" data-placement="top" data-boundary="window" class="ml-4pt material-icons text-20 card-course__icon-favorite">favorite{% if favorite !== true %}_border{% endif %}</a>
      </div>
      <div class="d-flex">
        <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>
        <small class="text-50">6 hours</small>
      </div>
    </div>
  </div>
</div>
<div class="popoverContainer d-none">
  <div class="media">
    <div class="media-left mr-12pt">
      <img src="assets/images/paths/{{ avatar }}_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>

  {% if not account %}
  <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 '' }}{{ link }}" class="btn btn-primary">Watch trailer</a>
    </div>
  </div>
  {% endif %}
  
  {% if account %}
  <div class="my-32pt">
    <div class="d-flex align-items-center mb-8pt justify-content-center">
      <div class="d-flex align-items-center mr-8pt">
        <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>50 minutes left</small></p>
      </div>
      <div class="d-flex align-items-center">
        <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>
    <div class="d-flex align-items-center justify-content-center">
      <a href="{{ prefix or '' }}student-take-lesson.html" class="btn btn-primary mr-8pt">Resume</a>
      <a href="{{ prefix or '' }}student-take-course.html" class="btn btn-outline-secondary ml-0">Start over</a>
    </div>
  </div>

  <div class="d-flex align-items-center">
    <small class="text-black-50 mr-8pt">Your rating</small>
    <div class="rating mr-8pt">
      <span class="rating__item"><span class="material-icons text-primary">star</span></span>
      <span class="rating__item"><span class="material-icons text-primary">star</span></span>
      <span class="rating__item"><span class="material-icons text-primary">star</span></span>
      <span class="rating__item"><span class="material-icons text-primary">star</span></span>
      <span class="rating__item"><span class="material-icons text-primary">star_border</span></span>
    </div>
    <small class="text-black-50">4/5</small>
  </div>

  {% endif %}
</div>
{% endmacro %}
{{ component() }}