<div class="page-section">
  <h4>Payment History</h4>

  <div class="card card-sm border-left-3 border-left-accent">
    <div class="card-body d-flex flex-column flex-sm-row align-items-center pl-16pt">
      <div class="flex mr-sm-16pt mb-16pt mb-sm-0">
        Please pay your amount due of
        <strong class="text-accent">&dollar;9.00</strong> for invoice <a href="{{ prefix or '' }}student-billing-invoice.html" class="text-underline">10002331</a>
      </div>
      <a href="{{ prefix or '' }}student-billing-payment.html" class="btn btn-accent">Pay Now</a>
    </div>
  </div>

  <div class="card table-responsive">
    <table class="table table-flush table-nowrap">
      <thead>
        <tr>
          <th class="text-center">Invoice no.</th>
          <th>Date</th>
          <th class="text-center">Amount</th>
          <th></th>
        </tr>
      </thead>
      <tbody>

        {% set items = [{
          document: '10002331',
          date: '26 Sep 2018'
        }, {
          document: '10003815',
          date: '29 Apr 2018'
        }, {
          document: '10007382',
          date: '31 Mar 2018'
        }, {
          document: '10004876',
          date: '30 May 2018'
        }, {
          document: '10009392',
          date: '30 Apr 2018'
        }] %}

        {% for item in items %}
        <tr>
          <td><a href="{{ prefix or '' }}student-billing-invoice.html" class="text-underline">{{ item.document }}</a></td>
          <td>{{ item.date }}</td>
          <td class="text-center">&dollar;9</td>
          <td class="text-right">
            <div class="d-inline-flex align-items-center">
              <a href="{{ prefix or '' }}student-billing-invoice.html" class="btn btn-outline-secondary mr-16pt">View invoice <i class="icon--right material-icons">keyboard_arrow_right</i></a>
              <a href="{{ prefix or '' }}student-billing-invoice.html" class="btn btn-outline-secondary">Download <i class="icon--right material-icons">file_download</i></a>
            </div>
          </td>
        </tr>
        {% endfor %}

      </tbody>
    </table>
  </div>
</div>