{% extends 'base.html' %}
{% load static %}
{% block title %}Pic Units Detail{% endblock %}
{% block content %}
<div id="contentBody">
    <h2 align="center">PIC Units</h2>
    <table id="picTable" class="display" width="100%">
        <thead>
            <tr>
                <th>Record ID</th>
                <th>Development Number</th>
                <th>Building Number</th>
                <th>Entrance Number</th>
                <th>Unit Number</th>
                <th>Unit Designation</th>
                <th>Unit Status Type</th>
                <th>Bedroom Count</th>
                <th>SSN</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Occupancy Date</th>
                <th>Unit Tenant Status</th>
                <th>Accessible Designation</th>
                <th>Details Completed</th>
                <th>ACC Unit Indicator</th>
                <th>Capfund Indicator</th>
                <th>Opfund Indicator</th>
                <th>ACC Unit Indicator Date</th>
                <th>Capfund Date</th>
                <th>Opfund Date</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Record ID</th>
                <th>Development Number</th>
                <th>Building Number</th>
                <th>Entrance Number</th>
                <th>Unit Number</th>
                <th>Unit Designation</th>
                <th>Unit Status Type</th>
                <th>Bedroom Count</th>
                <th>SSN</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Occupancy Date</th>
                <th>Unit Tenant Status</th>
                <th>Accessible Designation</th>
                <th>Details Completed</th>
                <th>ACC Unit Indicator</th>
                <th>Capfund Indicator</th>
                <th>Opfund Indicator</th>
                <th>ACC Unit Indicator Date</th>
                <th>Capfund Date</th>
                <th>Opfund Date</th>
            </tr>
        </tfoot>    
    </table>
</div>
</body>
{% endblock %}

{% block extra_css %}
<link href={% static "css/datatables.css" %} rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-html5-1.5.4/cr-1.5.0/kt-2.5.0/r-2.2.2/sc-1.5.0/sl-1.2.6/datatables.min.css"/>
{% endblock %}

{% block extra_js %}
<!-- load jquery to be used with datatables -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-html5-1.5.4/cr-1.5.0/kt-2.5.0/r-2.2.2/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>
<script src={% static "js/datatable-settings.js" %}></script>
{% endblock %}