{% macro card(prefix=prefix, item={
  course: "Angular Routing In-Depth",
  image: "assets/images/paths/angular_routing_200x168.png",
  date: '12 min ago',
  score: '5.8',
  progress: 25
}) %}
<div class="card card-group-row__card card-sm">
  <div class="card-body d-flex align-items-center">
    <a href="{{ prefix or '' }}student-take-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 mr-12pt">
      <a class="card-title" href="{{ prefix or '' }}student-take-quiz.html">{{ item.course }}</a>
      <div class="card-subtitle text-50">{{ item.date }}</div>
    </div>
    <div class="d-flex flex-column align-items-center">
      <span class="lead text-headings lh-1">{{ item.score }}</span>
      <small class="text-50 text-uppercase text-headings">Score</small>
    </div>
  </div>
  {% if item.progress %}
  <div class="progress rounded-0" style="height: 4px;">
    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ item.progress }}%;" aria-valuenow="{{ item.progress }}" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  {% endif %}
  <div class="card-footer">
    <div class="d-flex align-items-center">
      <div class="flex mr-2">
        <a href="{{ prefix }}student-take-quiz.html" class="btn btn-light btn-sm">
          {% if item.progress %}
            <i class="material-icons icon--left">refresh</i> Continue
          {% else %}
            <i class="material-icons icon--left">playlist_add_check</i> Reset 
            <span class="badge badge-dark badge-notifications ml-2">5</span>
          {% endif %}
        </a>
      </div>
      {{ dropdown(vertical=false) }}
    </div>
  </div>
</div>
{% endmacro %}

{% 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="{{ prefix or '' }}student-take-quiz.html" class="dropdown-item">Continue</a>
    <a href="{{ prefix or '' }}student-quiz-result-details.html" class="dropdown-item">View Result</a>
    <div class="dropdown-divider"></div>
    <a href="{{ prefix }}student-take-quiz.html" class="dropdown-item text-danger">Reset Quiz</a>
  </div>
</div>
{% endmacro %}