{% extends "base.html" %}
{% block title %}User Facility Allotments{% endblock %}
{% block content %}
<h1 class="h3 mb-4 text-gray-800">
    User Facility Allotments
</h1>
<div class="card shadow mb-1">
    <div class="card-header py-3">
        <div class="toolbar float-right">
            {% if perms.common.add_userfacilityallotment %}
                <a href="{% url 'common:user_facility_allotment_create' %}" class="btn btn-primary btn-icon-split">
                    <span class="icon text-white-50">
                        <i class="fas fa-plus"></i>
                    </span>
                    <span class="text">Add Facility User</span>
                </a>
            {% endif %}
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table
                id="user-facility-allotment-list"
                class="table table-striped table-sm"
                style="width:100%"
                data-server-side="true"
                data-state-save="true"
                data-defer-render="true"
                data-info="true"
                data-page-length="100"
                data-paging-type="full_numbers"
                data-ajax="{% url "api:userfacilityallotment-list" %}?format=datatables">
                <thead>
                    <tr>
                      <th>User</th>
                      <th>Allotment Type</th>
                      <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
{% endblock content %}
{% block inline_javascript %}
<script>
window.addEventListener("load", function(){
    $(document).ready(function() {
        $('#user-facility-allotment-list').DataTable( {
            iDisplayLength: 100,
            responsive: true,
            columns: [
                {data: "user_name", name: "user__name"},
                {data: 'allotment_type_name', name: "allotment_type"},
                {
                    data: "url",
                    name: "id",
                    orderable: false,
                    searchable: false,
                    render: function ( data, type, row ) {
                        return '<a href="'+ data + '"><i class="fas fa-edit"></i></a>';
                    }
                }
            ]
        });
    });
});
</script>
{% endblock inline_javascript %}
