<div class="{{ containerClass or 'container' }} page-section">
  <div class="mb-heading d-flex flex-column flex-sm-row align-items-sm-center">
    <h4 class="flex m-0">Manage Quizzes</h4>
    <form action="#" class="form-inline">
      <div class="form-group">
        <label class="col-form-label mr-8pt">Filter:</label>
        <select name="filter" class="custom-select">
          <option value="0">Choose a filter</option>
          <option value="courses">Courses</option>
          <option value="name">Quiz Name</option>
          <option value="type">Type</option>
        </select>
      </div>
    </form>
  </div>
  <div class="card card-sm">
    <div class="card-body">
      <small class="text-muted">Your filters:</small>
      <a href="#" class="float-right"><small>Clear all</small></a>
      <div class="clearfix"></div>
      <span class="badge badge-primary badge-filter">
        <a href="#"><i class="material-icons">close</i></a> 
        <span class="badge-filter_name">Course:</span> Basic Angular 
      </span>
      <span class="badge badge-primary badge-filter">
        <a href="#"><i class="material-icons">close</i></a> 
        <span class="badge-filter_name">Search:</span> guide
      </span>
    </div>
  </div>
  <div class="card stack">
    <div class="list-group list-group-flush">
      <div class="list-group-item d-flex align-items-center">
        <a class="text-body flex" href="{{ prefix or '' }}instructor-edit-quiz.html">Basic Angular Guide</a>
        <a href="#" class="text-muted"><i class="material-icons">chevron_right</i></a>
      </div>
      <div class="list-group-item d-flex align-items-center">
        <a class="text-body flex" href="{{ prefix or '' }}instructor-edit-quiz.html">Structure Guide</a>
        <a href="#" class="text-muted"><i class="material-icons">chevron_right</i></a>
      </div>
    </div>
  </div>
  {% include 'layouts/_pagination.html' %}
</div>