{% extends 'board.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% load humanize %}
{% load home_tags %}
{% block title %}
  <title>Payment History</title>
  <meta name="description" content="">

{% endblock title %}

{% block content %}
<div class=" app-content">
  <div class="side-app">
    <br>
    <div class="container content-area">
      <div class="horizontal-content">
        {% include 'partials/_alerts.html' %}

            {% if payments_page_obj %}

            <div class="row">
              <div class="col-lg-12">
                <div class="card">
                  <div class="card-header">
                    <div class="card-title text-apu-purple">Payment History</div>

                  </div>
                  <div class="card-body">
                    <div class="table-responsive mb-0">
                      <table class="table table-bordered table-hover mb-0 text-nowrap">
                        <thead>
                          <tr class="text-apu-green">
                            <th>Payment Date</th>
                            <th>Session</th>
                            <th>Semester</th>
                            <th>Payment ID</th>
                            <th>Amount</th>
                            <th>Level Paid for</th>
                            <th>Print</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for each in payments_page_obj %}
                          <tr>
                            <td>{{each.created}}</td>
                            <td class="num-font">{{each.session}}</td>
                            <td class="num-font">{{each.semester}}</td>
                            <td class="num-font">{{each.payment_id}}</td>
                            <td class="num-font">{{each.amount_paid|intcomma}}</td>
                            <td class="num-font">{{each.static_level}}</td>
                            <td class="num-font"><a href="{% url 'receipt' each.payment_id %}"><strong><i class="fa fa-print fa-2x text-apu-purple"></i></strong></a></td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {% endif %}
      </div>
    </div>
  </div>
</div>

{% endblock content%}