{%
  set earnings = [
    {
      user: 'Steven Short',
      main: '$1,742.00',
      activity: 'Has earned',
      user_image: 'assets/images/avatars/lucas-sankey-378674.jpg',
      time: '5 minutes ago'
    },
    {
      user: 'Mark Ups',
      main: '$4,120.55',
      activity: 'Has earned',
      user_image: 'assets/images/avatars/foto-sushi-128246.jpg',
      time: '14 minutes ago'
    },
    {
      user: 'Tara Knows',
      main: 'video',
      activity: 'Uploaded a new',
      user_image: 'assets/images/avatars/kyle-broad-29486.jpg',
      time: '32 minutes ago'
    },
    {
      user: 'Karen Smith',
      main: '$2,721.23',
      activity: 'Has earned',
      user_image: 'assets/images/avatars/james-garcia-76433.jpg',
      time: '3 hours ago'
    },
    {
      user: 'John Smith',
      main: 'video',
      activity: 'Uploaded a new',
      user_image: 'assets/images/avatars/nathan-fertig-67862.jpg',
      time: '4 hours ago'
    },
    {
      user: 'Brian Doe',
      main: '$12,012',
      activity: 'Has earned',
      user_image: 'assets/images/avatars/annie-spratt-74027.jpg',
      time: '4 hours ago'
    }


  ]
%}

<div class="row">
  <div class="col-lg-9">
    <div class="card card-earnings">
       <div class="card-header bg-faded">
        <div class="row align-items-center">
          <div class="col-lg-2">
            <h4 class="card-title">Earnings</h4>
          </div>
          <div class="col-lg-10">
            <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 class="card-group">
        <div class="card card-body bg-light 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--filled">+52%</div>
          </div>
        </div>
        <div class="card card-body bg-light 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--filled">+16%</div>
          </div>
        </div>
        <div class="card card-body bg-light 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--filled">+5%</div>
          </div>
        </div>
      </div>
      <div class="p-2 bg-primary">
        <div id="morris-area-chart" style="height: 250px;"></div>
      </div>
    </div>
  </div>
  <div class="col-lg-3">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Recent Earnings</h4>
      </div>
      <div class="card-body">
        {% for earning in earnings %}
        <div class="media recent-activity-item">
          <img src="{{ earning.user_image }}" alt="" class="rounded-circle mr-2" width="30">
          <div class="media-body">
            <span class="">{{ earning.activity }}</span>
            <strong>{{ earning.main }}</strong>
            <div><small class="text-muted">{{ earning.time }}</small></div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <div id="morris-donut-chart" style="height: 180px;"></div>
        <ul class="list-group border-0 px-4">
          <li class="list-group-item border-0">
            <div class="media">
              <i class="material-icons md-14 align-middle text-link-color mr-2">lens</i>
              <div class="media-body">
                Courses
              </div>
              <span>68%</span>
            </div>
          </li>
          <li class="list-group-item border-0">
            <div class="media">
              <i class="material-icons md-14 align-middle text-primary mr-2">lens</i>
              <div class="media-body">
                General
              </div>
              <span>14%</span>
            </div>
          </li>
          <li class="list-group-item border-0">
            <div class="media">
              <i class="material-icons md-14 align-middle text-success mr-2">lens</i>
              <div class="media-body">
                Software
              </div>
              <span>10%</span>
            </div>
          </li>
          <li class="list-group-item border-0">
            <div class="media">
              <i class="material-icons md-14 align-middle text-warning mr-2">lens</i>
              <div class="media-body">
                Subscriptions
              </div>
              <span>4%</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body bg-light text-center">
        <h4 class="mb-0">
          <i class="material-icons align-middle text-muted md-36">monetization_on</i> Top Grossing
        </h4>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item list-group-item-action">
          <div class="media align-items-center">
            <a href="#"><img src="assets/images/avatars/lucas-sankey-378674.jpg" alt="" class="rounded-circle mr-2" width="30"></a>
            <div class="media-body">
              <a href="#">Steven Short</a>
            </div>
            <strong class="ml-auto">&dollar; 3,892.99</strong>
          </div>
        </li>
        <li class="list-group-item">
          <div class="media align-items-center">
            <img src="assets/images/avatars/foto-sushi-128246.jpg" alt="" class="rounded-circle mr-2" width="30">
            <div class="media-body">
              <a href="#">Mark Ups</a>
            </div>
            <strong class="ml-auto">&dollar; 2,125.00</strong>
          </div>
        </li>
        <li class="list-group-item">
          <div class="media align-items-center">
            <img src="assets/images/avatars/kyle-broad-29486.jpg" alt="" class="rounded-circle mr-2" width="30">
            <div class="media-body">
              <a href="#">Tara Knows</a>
            </div>
            <strong class="ml-auto">&dollar; 4,212.05</strong>
          </div>
        </li>
        <li class="list-group-item">
          <div class="media align-items-center">
            <img src="assets/images/avatars/james-garcia-76433.jpg" alt="" class="rounded-circle mr-2" width="30">
            <div class="media-body">
              <a href="#">Karen Smith</a>
            </div>
            <strong class="ml-auto">&dollar; 5,754.27</strong>
          </div>
        </li>
        <li class="list-group-item">
          <div class="media align-items-center">
            <img src="assets/images/avatars/nathan-fertig-67862.jpg" alt="" class="rounded-circle mr-2" width="30">
            <div class="media-body">
              <a href="#">John Smith</a>
            </div>
            <strong class="ml-auto">&dollar; 1,742.00</strong>
          </div>
        </li>
        <li class="list-group-item">
          <div class="media align-items-center">
            <img src="assets/images/avatars/annie-spratt-74027.jpg" alt="" class="rounded-circle mr-2" width="30">
            <div class="media-body">
              <a href="#">Brian Doe</a>
            </div>
            <strong class="ml-auto">&dollar; 5,312.00</strong>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title mb-0">
          Recurring Income
        </h4>
      </div>

      <table class="table table-striped m-0">
        <thead>
          <tr>
            <th>Next payout</th>
            <th class="text-center">Times</th>
            <th class="text-right">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>01/10/2017</td>
            <td class="text-center">4</td>
            <td class="text-right"><strong>&dollar;1,200.00</strong></td>
          </tr>
          <tr>
            <td>01/10/2017</td>
            <td class="text-center">4</td>
            <td class="text-right"><strong>&dollar;1,200.00</strong></td>
          </tr>
          <tr>
            <td>01/10/2017</td>
            <td class="text-center">4</td>
            <td class="text-right"><strong>&dollar;1,200.00</strong></td>
          </tr>
          <tr>
            <td>11/10/2017</td>
            <td class="text-center">12</td>
            <td class="text-right"><strong>&dollar;8,125.82</strong></td>
          </tr>
          <tr>
            <td>09/11/2017</td>
            <td class="text-center">2</td>
            <td class="text-right"><strong>&dollar;4,310.00</strong></td>
          </tr>
          <tr>
            <td>09/11/2017</td>
            <td class="text-center">2</td>
            <td class="text-right"><strong>&dollar;4,310.00</strong></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>