{% macro component(title, image, selected, open, prefix, position='center', avatar=image, class='') %}
<div class="card card-sm card--elevated p-relative o-hidden overlay overlay--primary 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">
  <a href="{{ prefix or '' }}instructor-edit-course.html" 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">edit</i>
        <span class="card-title text-white">Edit</span>
      </span>
    </span>
  </a>
  <div class="mdk-reveal__content">
    <div class="card-body">
      <div class="d-flex">
        <div class="flex">
          <a class="card-title mb-4pt" href="{{ prefix or '' }}instructor-edit-course.html">{{ title }}</a>
        </div>
        <a href="{{ prefix or '' }}instructor-edit-course.html" class="ml-4pt material-icons text-black-20 card-course__icon-favorite">edit</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-black-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">
        <span class="text-black-50 small">with</span>
        <span class="text-black-50 small font-weight-bold">Elijah Murray</span>
      </p>
    </div>
  </div>
  {% 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>

  {% else %}
  <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 '' }}instructor-edit-course.html" class="btn btn-primary">Edit course</a>
    </div>
  </div>
  {% endif %}
</div>
{% endmacro %}
{{ component() }}