{%
  set earnings = [
  {
    user: 'Steven Short',
    main: '$1,742.00',
    activity: 'Has earned',
    user_image: 'assets/images/avatars/person-1.jpg',
    time: '5 minutes ago'
  },
  {
    user: 'Mark Ups',
    main: '$4,120.55',
    activity: 'Has earned',
    user_image: 'assets/images/avatars/person-2.jpg',
    time: '14 minutes ago'
  },
  {
    user: 'Tara Knows',
    main: 'video',
    activity: 'Uploaded a new',
    user_image: 'assets/images/avatars/person-3.jpg',
    time: '32 minutes ago'
  },
  {
    user: 'Karen Smith',
    main: '$2,721.23',
    activity: 'Has earned',
    user_image: 'assets/images/avatars/person-4.jpg',
    time: '3 hours ago'
  },
  {
    user: 'John Smith',
    main: 'video',
    activity: 'Uploaded a new',
    user_image: 'assets/images/avatars/person-5.jpg',
    time: '4 hours ago'
  }
  ]
  %}

  {%
    set rankings = [
    {
      user_name: 'John Mix',
      completed: '54',
      failed: '1',
      icon: 'arrow_upward',
      icon_color: 'success',
      score: '98%',
      user_image: 'assets/images/avatars/person-5.jpg',
      failed_color: warning
    },
    {
      user_name: 'Steven Short',
      completed: '11',
      failed: '15',
      icon: 'arrow_downward',
      icon_color: 'danger',
      score: '33%',
      user_image: 'assets/images/avatars/person-3.jpg',
      failed_color: danger
    },
    {
      user_name: 'Mark Ups',
      completed: '1',
      failed: '9',
      icon: 'arrow_downward',
      icon_color: 'danger',
      score: '8%',
      user_image: 'assets/images/avatars/person-6.jpg',
      failed_color: danger
    },
    {
      user_name: 'Tara Knows',
      completed: '35',
      failed: '3',
      icon: 'arrow_upward',
      icon_color: 'success',
      score: '86%',
      user_image: 'assets/images/avatars/person-2.jpg',
      failed_color: warning
    },
    {
      user_name: 'Lucas Kane',
      completed: '25',
      failed: '3',
      icon: 'arrow_upward',
      icon_color: 'success',
      score: '86%',
      user_image: 'assets/images/avatars/person-1.jpg',
      failed_color: warning
    }
    ]
    %}

    <div class="container-fluid">
      <div class="row font-1">
        <div class="col-lg-4">
          <div class="card card-body flex-row align-items-center">
            <h5 class="m-0"><i class="material-icons align-middle text-muted md-18">content_paste</i> Today</h5>
            <div class="text-primary ml-auto">$12,319</div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card card-body flex-row align-items-center">
            <h5 class="m-0"> Last 7 Days</h5>
            <div class="text-primary ml-auto">$35,129</div>
            <i class="material-icons text-success md-18 ml-1">arrow_upward</i>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card card-body flex-row align-items-center">
            <h5 class="m-0"> Past 30 Days</h5>
            <div class="text-primary ml-auto">$142,545</div>
            <i class="material-icons text-success md-18 ml-1">arrow_upward</i>
          </div>
        </div>
      </div>
      <div class="card card-earnings">
        <div class="card-group">
          <div class="card card-body mb-0">
            <div class="media align-items-center">
              <div class="media-body">
                <p class="card-text text-muted mb-1">Earned today</p>
                <h1 class="mb-0 font-weight-normal">&dollar;6,120</h1>
              </div>
              <div class="badge badge-success">+52%</div>
            </div>
          </div>
          <div class="card card-body mb-0">
            <div class="media align-items-center">
              <div class="media-body">
                <p class="card-text text-muted mb-1">Earned this week</p>
                <h1 class="mb-0 font-weight-normal">&dollar;14,276</h1>
              </div>
              <div class="badge badge-primary">+16%</div>
            </div>
          </div>
          <div class="card card-body mb-0">
            <div class="media align-items-center">
              <div class="media-body">
                <p class="card-text text-muted mb-1">Earned this month</p>
                <h1 class="mb-0 font-weight-normal">&dollar;39,882</h1>
              </div>
              <div class="badge badge-warning">+5%</div>
            </div>
          </div>
        </div>
        <div class="p-2 bg-primary">
          <div id="morris-area-chart" style="width: 100%; height: 250px;"></div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-4">

          <div class="card card-body card-profile align-items-center justify-content-center">
            <img src="assets/images/avatars/person-3.jpg" class="img-fluid rounded-circle mr-2 mb-1" width="100" alt="">
            <p class="h3 mb-0">John Strehl</p>
            <p>Top Seller (last month)</p>
            <div class="text-center mb-2">
              <span class="badge badge-warning mr-2 mb-1">JavaScript</span>
              <span class="badge badge-primary mr-2 mb-1">Bootstrap</span>
              <span class="badge badge-danger mr-2 mb-1">PhotoShop</span>
              <span class="badge badge-info mr-2 mb-1">HTML</span>
              <span class="badge badge-gray mr-2 mb-1">Rails</span>
            </div>
            <a href="profile.html" class="btn btn-white align-middle">
              <i class="material-icons md-18 align-middle">account_box</i>
              <span class="align-middle">View Details</span>
            </a>

          </div>
        </div>
        <div class="col-lg-4">
          <div class="card">
            <div class="card-header d-flex align-items-center">
              <div class="card-title">
                Top Earnings
              </div>
              <i class="material-icons ml-auto text-muted">local_atm</i>
            </div>
            <ul class="list-group list-group-flush">
             {% for earning in earnings %}
             <li class="list-group-item d-flex flex-row">
              <img src="{{ earning.user_image }}" alt="" class="rounded-circle mr-2" width="30" height="30">
              <div class="media-body">
                <span class="">{{ earning.activity }}</span>
                <strong>{{ earning.main }}</strong>
                <div><small class="text-muted">{{ earning.time }}</small></div>
              </div>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card">
          <div class="card-header d-flex align-items-center">
            <div class="card-title">
              Rankings
            </div>
            <i class="material-icons ml-auto text-muted">local_activity</i>
          </div>
          <ul class="list-group list-group-flush">
            {% for ranking in rankings %}
            <li class="list-group-item">
              <div class="media align-items-center">
                <span class="lead mr-1">{{ loop.index }}.</span>
                <img src="{{ ranking.user_image }}" class="img-fluid rounded-circle mr-2" width="30" alt="">
                <div class="media-body lh-12">
                  <a href="#">{{ ranking.user_name }}</a><br/>
                  <small class="text-muted">{{ ranking.completed }} done</small>
                </div>
                <div class="lead">
                  <strong class="align-middle">{{ ranking.score }}</strong> <i class="material-icons md-18 align-middle text-{{ ranking.icon_color }}">{{ ranking.icon }}</i>
                </div>
              </div>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <div class="row align-items-center">
          <div class="col-lg-4">
            <div class="card-title">Recent Orders</div>
          </div>
          <div class="col-lg-8 col-md-12">
            <div class="row">
              <div class="col-md-4 col-lg-6 d-flex justify-content-md-end sort-index">
                <div class="dropdown mr-2">
                  <button class="btn btn-white dropdown-toggle" type="button" id="sortOrdersDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Sort By
                  </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Date</a>
                    <a class="dropdown-item" href="#">ID</a>
                    <a class="dropdown-item" href="#">Name</a>
                  </div>
                </div>
                <div class="dropdown mr-4">
                  <button class="btn btn-white dropdown-toggle" type="button" id="filterOrdersDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Filter
                  </button>
                  <div class="dropdown-menu" aria-labelledby="filterOrdersDropdown">
                    <a class="dropdown-item" href="#">Delivered</a>
                    <a class="dropdown-item" href="#">Failed</a>
                    <a class="dropdown-item" href="#">Pending</a>
                  </div>
                </div>
              </div>
              <div class="col-md-8 col-lg-6">
                <form class="form-inline float-right">
                  <div class="form-group mr-3">
                    <label class="control-label mr-1">From:</label>
                    <input type="text" class="datepicker form-control" value="10/24/2017">
                  </div>
                  <div class="form-group mb-0">
                    <label class="control-label mr-1">To: </label>
                    <input type="text" class="datepicker form-control" value="10/25/2017">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table m-0">
          <thead>
            <tr class="bg-fade">
              <th style="width: 120px;">Date</th>
              <th>Name</th>
              <th style="width: 100px;"># INV</th>
              <th style="width: 140px;">Amount</th>
              <th style="width: 100px">Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for order in orders %}
            <tr>
              <td class="align-middle">{{ order.date }}</td>
              <td class="align-middle">
                <div><i class="material-icons align-middle md-18 text-link-color">contacts</i> <a href="#"> {{ order.user }}</a>
                  <em class="text-muted ml-1">({{ order.position }})</em>
                </div>

              </td>

              <td class="align-middle">
                <a href="#">#{{ order.id }}</a>
              </td>
              <td class="align-middle">&dollar;{{ order.amount }}</td>
              <td class="align-middle">
                <div class="badge badge-{{ order.status_color }}">{{ order.status }}</div>
              </td>
              <td class="align-middle" style="width:40px">
                <a class="btn btn-white btn-sm" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="material-icons md-18 align-middle">more_vert</i>
                </a>

                <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">
                    <i class="material-icons md-14 align-middle">assignment</i>
                    <span class="align-middle">Manage</span>
                  </a>
                  <a class="dropdown-item" href="#">
                    <i class="material-icons md-14 align-middle">content_copy</i>
                    <span class="align-middle">Duplicate</span>
                  </a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item text-danger" href="#">
                    <i class="material-icons md-14 align-middle">delete</i>
                    <span class="align-middle">Delete</span>
                  </a>
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>