{% import 'components/staff-table.html' as staff %}

<div class="{{ containerClass }} page__container page-section">

  <div class="page-separator">
    <div class="page-separator__text">Overview</div>
  </div>

  <div class="row card-group-row mb-lg-8pt">
    <div class="col-lg-4 col-md-6 card-group-row__col">
        <div class="card card-group-row__card">
          <div class="card-body d-flex flex-row align-items-center">
            <div class="flex">
              <p class="d-flex align-items-center mb-0">
                <strong>Budget</strong>
                <span class="text-50 ml-8pt">20%</span>
                <i class="material-icons text-accent ml-4pt icon-16pt">keyboard_arrow_up</i>
              </p>
              <span class="h2 m-0">
                &dollar;24,000 <small class="text-muted"> / &dollar;50,000</small>
              </span>
            </div>
            <i class="material-icons icon-32pt text-20 ml-8pt">monetization_on</i>
          </div>
          <div class="progress" style="height: 3px;">
            <div class="progress-bar bg-accent" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
        </div>
      </div>
    <div class="col-lg-4 col-md-6 card-group-row__col">
      <div class="card card-group-row__card">
        <div class="card-body d-flex flex-row align-items-center">
          <div class="flex">
            <p class="d-flex align-items-center mb-0">
              <strong>Current Target</strong>
              <span class="text-50 ml-8pt">2018</span>
            </p>
            <span class="h2 m-0">&dollar;50,000</span>
          </div>
          <i class="material-icons icon-32pt text-20 ml-8pt">gps_fixed</i>
        </div>
        <div class="progress" style="height: 3px;">
          <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-6 card-group-row__col">
      <div class="card card-group-row__card">
        <div class="card-body d-flex flex-row align-items-center">
          <div class="flex">
            <strong>Top Grossing</strong>
            <div class="d-flex align-items-center">
              <div class="h2 m-0">&dollar;13,531</div>
              <div class="progress mx-8pt" style="width:100%; height: 3px;">
                <div class="progress-bar bg-accent" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
          </div>
          <i class="material-icons icon-32pt text-20">contacts</i>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-lg-32pt">
    <div class="card-header d-flex align-items-center">
      <strong>Earnings</strong>
      <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>13/03/2018 to 20/03/2018</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-legend mt-0 mb-24pt justify-content-start" id="ordersChartLegend"></div>
      <div class="chart">
        <canvas 
          id="ordersChart" 
          class="chart-canvas js-update-chart-bar" 
          data-chart-legend="#ordersChartLegend"
          data-chart-prefix="$"
          data-chart-suffix="k"
          data-chart-line-background-color="primary"></canvas>
      </div>
    </div>
  </div>

  <div class="page-separator">
    <div class="page-separator__text">Employees</div>
  </div>

  <div class="card mb-0">
    {{ staff.component(filters=true, items=[{
      selected: true,
      avatar: { image: 'assets/images/people/110/guy-1.jpg' },
      name: 'Michael Smith',
      email: 'lorna_kirlin@nora.biz',
      employer: 'Black Ops',
      projects: 12,
      chips: ['Admin'],
      date: '3 days ago',
      earnings: '$12,402'
    }, {
      avatar: { title: 'CS' },
      name: 'Connie Smith',
      email: 'paolo.zieme@gmail.com',
      employer: 'Backend Ltd',
      projects: 42,
      chips: ['User'],
      date: '1 week ago',
      earnings: '$1,943'
    }, {
      avatar: { image: 'assets/images/people/110/guy-2.jpg' },
      name: 'John Connor',
      email: 'vida_glover@gmail.com',
      employer: 'Frontted',
      projects: 31,
      chips: ['Manager'],
      date: '2 weeks ago',
      earnings: '$1,401'
    }, {
      selected: true,
      avatar: { title: 'LB' },
      name: 'Laza Bogdan',
      email: 'annabell.kris@yahoo.com',
      employer: 'Frontted',
      projects: 44,
      chips: ['Admin'],
      date: '3 weeks ago',
      earnings: '$22,402'
    }]) }}
  </div>

</div>