{% if 'fluid' in prefix %}<div class="page__header flush-shadow">{% endif %}
<div class="{{ containerClass }} page__heading-container">
  <div class="page__heading d-flex flex-column flex-md-row align-items-center justify-content-center justify-content-lg-between text-center text-lg-left">
    <h1 class="m-lg-0">Instructor Dashboard</h1>
    <a href="" class="btn btn-success ml-lg-3">Go to Courses <i class="material-icons">arrow_forward</i></a>
  </div>
</div>
{% if 'fluid' in prefix %}</div> <!-- // END page__header --> {% endif %}

{% if 'fluid' in prefix %}
<div class="page__header page__header-nav">
  <div class="{{ containerClass }} page__container">
    {% include "layouts/_navbar.secondary.html" %}
  </div>
</div>
{% endif %}


<div class="{{ containerClass }} page__container">
  
  <div class="row card-group-row">
    <div class="col-lg-4 col-md-6 card-group-row__col">
      <div class="card card-group-row__card card-body card-body-x-lg flex-row align-items-center">
        <div class="flex">
          <div class="card-header__title text-muted mb-2">Current Month</div>
          <div class="text-amount">&dollar;12,920</div>
          <div class="text-stats text-success">31.5% <i class="material-icons">arrow_upward</i></div>
        </div>
        
        <div class="avatar">
          <span class="bg-soft-success avatar-title rounded-circle text-center text-success">
            <i class="material-icons icon-40pt">gps_fixed</i>
          </span>
        </div>
      </div>  
    </div>
    <div class="col-lg-4 col-md-6 card-group-row__col">
      <div class="card card-group-row__card card-body card-body-x-lg flex-row align-items-center">
        <div class="flex">
          <div class="card-header__title text-muted mb-2">Total Lifetime</div>
          <div class="text-amount">&dollar;53,642</div>
        </div>
        <div class="avatar">
          <span class="bg-soft-primary avatar-title rounded-circle text-center text-primary">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" width="30" height="30"><g transform="matrix(1.6666666666666667,0,0,1.6666666666666667,0,0)"><path d="M16,5.75c0.414,0,0.75-0.336,0.75-0.75V3.5c0-0.414-0.336-0.75-0.75-0.75s-0.75,0.336-0.75,0.75V5 C15.25,5.414,15.586,5.75,16,5.75z M21,3c0-1.657-1.343-3-3-3H6C4.343,0,3,1.343,3,3v18c0,1.657,1.343,3,3,3h12 c1.657,0,3-1.343,3-3V3z M12,14c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S11.448,14,12,14z M11,10.5c0-0.552,0.448-1,1-1 s1,0.448,1,1s-0.448,1-1,1S11,11.052,11,10.5z M16.5,18.75c0.414,0,0.75,0.336,0.75,0.75s-0.336,0.75-0.75,0.75H11 c-0.414,0-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75H16.5z M16.5,16c-0.552,0-1-0.448-1-1s0.448-1,1-1c0.552,0,1,0.448,1,1 S17.052,16,16.5,16z M16.5,11.5c-0.552,0-1-0.448-1-1s0.448-1,1-1c0.552,0,1,0.448,1,1S17.052,11.5,16.5,11.5z M7.5,16 c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1S8.052,16,7.5,16z M8.5,19.5c0,0.552-0.448,1-1,1s-1-0.448-1-1s0.448-1,1-1 S8.5,18.948,8.5,19.5z M7.5,11.5c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1S8.052,11.5,7.5,11.5z M6,2h12c0.552,0,1,0.448,1,1 v3.25c0,0.138-0.112,0.25-0.25,0.25H5.25C5.112,6.5,5,6.388,5,6.25V3C5,2.448,5.448,2,6,2z" stroke="none" fill="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
          </span>
        </div>        
      </div>
    </div>
    <div class="col-lg-4 col-md-12 card-group-row__col">
      <div class="card card-group-row__card card-body card-body-x-lg flex-row align-items-center">
        <div class="flex">
          <div class="card-header__title text-muted mb-2">Students this Month</div>
          <div class="text-amount">182</div>
          <div class="text-stats text-danger">3.5% <i class="material-icons">arrow_downward</i></div>
        </div>
        <div class="avatar">
          <span class="bg-soft-warning avatar-title rounded-circle text-center text-warning">
            <i class="material-icons text-warning icon-40pt">perm_identity</i>
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- CHART -->
  <div class="row">
    <div class="col-md-8">
      
      <div class="card">
        <div class="card-header bg-white d-flex align-items-center">
            <h4 class="card-header__title mb-0">Earnings</h4>
            <div class="flatpickr-wrapper flatpickr-calendar-right d-flex ml-auto">
                <div
                  id="recent_orders_date"
                  data-toggle="flatpickr" 
                  data-flatpickr-wrap="true"
                  data-flatpickr-static="true" 
                  data-flatpickr-mode="range" 
                  data-flatpickr-alt-format="d/m/Y" 
                  data-flatpickr-date-format="d/m/Y">
                  <a href="javascript:void(0)" class="link-date" data-toggle>01/03/2020 to 20/03/2020</a>
                  <input class="d-none" type="hidden" value="13/03/2018 to 20/03/2018" data-input>
                </div>
              </div>
        </div>
        <div class="card-body">
          <div class="chart">
            <canvas id="ordersChart" class="chart-canvas"></canvas>
          </div>
        </div>
      </div>

    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-header card-header-large bg-light d-flex align-items-center">
            
                <h4 class="card-header__title">Top Courses</h4>
            
        </div>

      
      {% set courses = [{
        title: 'Basics of Social Media',
        avatar: 'https://images.unsplash.com/photo-1562577309-4932fdd64cd1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=clamp&w=35&h=35',
        progress_count: 60,
        progress_variant: 'bg-primary'
      },{
        title: 'Learn Vue.js Fundamentals',
        avatar: 'assets/images/logos/vuejs.svg',
        progress_count: 25,
        progress_variant: 'bg-vuejs'
      }, {
        title: 'Angular in Steps',
        avatar: 'assets/images/logos/angular.svg',
        progress_count: 100,
        progress_variant: 'bg-angular'
      }, {
        title: 'ES6 Foundations',
        avatar: 'assets/images/logos/javascript.svg',
        progress_count: 80,
        progress_variant: 'bg-warning'
      }] %}

      <ul class="list-group list-group-flush mb-0" style="z-index: initial;">
        {% for item in courses %}
        <li class="list-group-item" style="z-index: initial;">
          <div class="d-flex align-items-center">
            <a href="#" class="mr-3">
              <img src="{{ item.avatar }}" alt="course" class="">
              
            </a>
            <div class="flex">
              <a href="#" class="text-body"><strong>{{ item.title }}</strong></a>
              <div class="d-flex align-items-center">
                <small class="text-muted">{{ item.progress_count }} sales</small>
              </div>
            </div>
            <div class="ml-3">
              ${{ item.progress_count * 391  }}
            </div>
          </div>
        </li>
        {% endfor %}
      </ul>
    </div>

    </div>
  </div>
</div>