{% set items = [{
  course: "Angular Routing In-Depth",
  image: "assets/images/paths/angular_routing_200x168.png"
}, {
  course: "Angular Unit Testing",
  image: "assets/images/paths/angular_testing_200x168.png"
}, {
  course: "Introduction to TypeScript",
  image: "assets/images/paths/typescript_200x168.png"
}, {
  course: "Angular Fundamentals",
  image: "assets/images/paths/angular_200x168.png"
}] %}

{% macro dropdown(prefix=prefix, vertical=true) %}
<div class="dropdown">
  <a href="#" data-toggle="dropdown" data-caret="false" class="text-muted"><i class="material-icons">more_{% if vertical %}vert{% else %}horiz{% endif %}</i></a>
  <div class="dropdown-menu dropdown-menu-right">
    <a href="javascript:void(0)" class="dropdown-item">Review Quiz</a>
    <a href="{{ prefix or '' }}instructor-edit-quiz.html" class="dropdown-item">Edit Quiz</a>
    <div class="dropdown-divider"></div>
    <a href="javascript:void(0)" class="dropdown-item text-danger">Delete Quiz</a>
  </div>
</div>
{% endmacro %}

<div class="row card-group-row">
  {% for item in items %}
  <div class="card-group-row__col col-md-6">
    <div class="card card-group-row__card card-sm">
      <div class="card-body d-flex align-items-center">
        <a href="{{ prefix or '' }}instructor-edit-quiz.html" class="avatar overlay overlay--primary avatar-4by3 mr-12pt">
          <img src="{{ item.image }}" alt="{{ item.course }}" class="avatar-img rounded">
          <span class="overlay__content"></span>
        </a>
        <div class="flex">
          <a class="card-title" href="{{ prefix or '' }}instructor-edit-quiz.html">{{ item.course }}</a>
          <div class="card-subtitle text-50">15 completed</div>
        </div>
      </div>
      <div class="card-footer">
        <div class="d-flex align-items-center">
          <div class="flex mr-2">
            <a href="#" class="btn btn-light btn-sm">
              <i class="material-icons icon--left">playlist_add_check</i> Review 
              <span class="badge badge-dark badge-notifications ml-2">5</span>
            </a>
          </div>
          {{ dropdown(vertical=false) }}
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<div class="mb-32pt">
  {% include 'layouts/_pagination.html' %}
</div>

{% set items = [{
  course: 'Newsletter Design', 
  image: 'assets/images/paths/mailchimp_200x168.png'
}, {
  course: 'Adobe XD', 
  image: 'assets/images/paths/xd_200x168.png'
}, {
  course: 'inVision App', 
  image: 'assets/images/paths/invision_200x168.png'
}, {
  course: 'Craft by inVision', 
  image: 'assets/images/paths/craft_200x168.png'
}] %}

<div class="card stack">
  <div class="list-group list-group-flush">
    {% for item in items %}
    <div class="list-group-item d-flex flex-column flex-sm-row align-items-sm-center px-12pt">
      <div class="flex d-flex align-items-center mr-sm-16pt mb-8pt mb-sm-0">
        <a href="{{ prefix or '' }}instructor-edit-quiz.html" class="avatar overlay overlay--primary avatar-4by3 mr-12pt">
          <img src="{{ item.image }}" alt="{{ item.course }}" class="avatar-img rounded">
          <span class="overlay__content"></span>
        </a>
        <div class="flex">
          <a class="card-title mb-4pt" href="{{ prefix or '' }}instructor-edit-quiz.html">{{ item.course }}</a>
        </div>
      </div>
      <div class="d-flex align-items-center">
        <div class="flex text-center d-flex align-items-center mr-16pt">
          <span class="text-50 text-headings text-uppercase mr-12pt">Completed</span>
          <span class="badge badge-dark badge-notifications">15</span>
        </div>
        {{ dropdown() }}
      </div>
    </div>
    {% endfor %}
  </div>
</div>

{% include 'layouts/_pagination.html' %}