{% extends 'extends/layout.html' %}
{% load static %}
{% block content %}
    {% block scripts %}
        <script>
            let editUrl = ""
            let baseUrl = "{{ baseUrl|safe }}"
            function checkDuplicate(val) {

                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        var response = this.responseText;
                        if (response == 1) {
                            document.getElementById("duplicate").style.display = 'block';
                            document.getElementById("duplicate").style.color = 'red';
                            document.getElementById("duplicate").innerHTML = 'Loan type already exists';
                            document.getElementById("savebtn").disabled = true;
                        } else {
                            document.getElementById("duplicate").style.display = 'none';
                            document.getElementById("duplicate").innerHTML = response;
                            document.getElementById("savebtn").disabled = false;
                        }
                    }
                };
                xhttp.open("GET", "check-loantype?type=" + val, true);
                xhttp.send();
            }

            {#'name': '{{ types.name }}',#}
            {#'max_loan':'{{ types.max_loan }}',#}
            {#'interest_rate':'{{ types.interest_rate }}',#}
            {#'formula':'{{ types.formula }}',#}
            {#'maximum_period': '{{types.maximum_period }}',#}
            {#'excuse_d':'{{ types.excuse_d }}',#}
            {#'warning_d':'{{ types.warning_d }}',#}
            {#'maximum_securities':'{{ types.maximum_securities }}',#}
            {#'security_ratio':'{{ types.security_ratio }}',#}
            {#'is_standalone':'{{ types.is_standalone }}'#}

            const showEditModal = (dataObj) =>{
                document.querySelector('#edit_name').value = dataObj.name
                document.querySelector('#edit_maxamount').value = dataObj.max_loan
                document.querySelector('#edit_interest').value = dataObj.interest_rate
                if(parseInt(dataObj.formula) === 1){
                    document.querySelector('#edit_formula').value = 'per_annum'
                }else if(parseInt(dataObj.formula) === 2){
                    document.querySelector('#edit_formula').value = 'per_month'
                }else if(parseInt(dataObj.formula) === 3){
                    document.querySelector('#edit_formula').value = 'per_week'
                }else if(parseInt(dataObj.formula) === 4){
                    document.querySelector('#edit_formula').value = 'per_day'
                }else{
                    document.querySelector('#edit_formula').value = ''
                }
                document.querySelector('#edit_max_period').value = dataObj.maximum_period
                document.querySelector('#edit_excused').value = dataObj.excuse_d
                document.querySelector('#edit_warningd').value = dataObj.warning_d
                document.querySelector('#edit_maximum_securities').value = dataObj.maximum_securities
                document.querySelector('#edit_security_ratio').value = dataObj.security_ratio
                if(dataObj.is_standalone === 'True'){
                    document.querySelector('#edit_product_behaviour').value = 'standalone'
                }else{
                    document.querySelector('#edit_product_behaviour').value = 'allow_running_with_others'
                }

                let newAction = baseUrl+ editUrl.replace('theId', dataObj.id.toString())
                document.querySelector('#edit_form_product_types').action = newAction

                console.log(document.querySelector('#edit_form_product_types').action)
                $('#editModal').modal('show')

            }

            const showViewModal = (dataObj) =>{
                document.querySelector('#view_name').value = dataObj.name
                document.querySelector('#view_maxamount').value = dataObj.max_loan
                document.querySelector('#view_interest').value = dataObj.interest_rate
                if(parseInt(dataObj.formula) === 1){
                    document.querySelector('#view_formula').value = 'per_annum'
                }else if(parseInt(dataObj.formula) === 2){
                    document.querySelector('#view_formula').value = 'per_month'
                }else if(parseInt(dataObj.formula) === 3){
                    document.querySelector('#view_formula').value = 'per_week'
                }else if(parseInt(dataObj.formula) === 4){
                    document.querySelector('#view_formula').value = 'per_day'
                }else{
                    document.querySelector('#view_formula').value = ''
                }
                document.querySelector('#view_max_period').value = dataObj.maximum_period
                document.querySelector('#view_excused').value = dataObj.excuse_d
                document.querySelector('#view_warningd').value = dataObj.warning_d
                document.querySelector('#view_maximum_securities').value = dataObj.maximum_securities
                document.querySelector('#view_security_ratio').value = dataObj.security_ratio
                if(dataObj.is_standalone === 'True'){
                    document.querySelector('#view_product_behaviour').value = 'standalone'
                }else{
                    document.querySelector('#view_product_behaviour').value = 'allow_running_with_others'
                }

                document.querySelector('#viewDetailTitle').innerHTML = `Details for ${dataObj.name}`



                $('#viewModal').modal('show')

            }

            function setPeriod(option) {
                if (option.length > 0){
                    document.getElementById("maximum_period").classList.remove("d-none")
                    if (option=='per_annum'){
                        document.getElementById("period-addon").innerHTML="Year(s)"
                    } else if (option=='per_month'){
                        document.getElementById("period-addon").innerHTML="Month(s)"
                    }else if (option=='per_week'){
                        document.getElementById("period-addon").innerHTML="Week(s)"
                    } else if (option=='per_day'){
                        document.getElementById("period-addon").innerHTML="Day(s)"
                    }else {
                        document.getElementById("period-addon").innerHTML=""
                        document.getElementById("maximum_period").classList.add("d-none")
                    }
                }else {
                    document.getElementById("maximum_period").classList.add("d-none")
                }
            }
        </script>
    {% endblock %}
    <div class="row">
        <!-- Start col -->
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header">
                    <div class="button-list d-flex justify-content-end">
                        <button class="btn btn-primary btn-sm pull-right" data-bs-toggle="modal"
                                data-bs-target=".bd-example-modal-lg"><i class="feather icon-plus mr-2"></i>Add Loan
                            Products
                        </button>
                        <a href="{% url 'applications_pdf' %}" class="btn btn-secondary pull-right btn-sm"><i
                                class='fa fa-file-pdf-o'></i> PDF</a>
                        <a href="{% url 'applications_excel' %}" class="btn btn-dark pull-right btn-sm"><i
                                class='fa fa-file-excel-o'></i> EXCEL</a>
                        <a href="" class="btn btn-success pull-right btn-sm"><i class='fa fa-print'></i> PRINT</a>
                    </div>
                </div>
                {# ========================ADD LOAN TYPE MODAL ================================#}
                <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleLargeModalLabel">Add New Loan Product</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                </button>
                            </div>
                            <div class="modal-body">
                                <form method="post" enctype="multipart/form-data">
                                    {% csrf_token %}
                                    <div class="row">
                                        <div class="mb-2 col-md-6">
                                            <input type="text" class="form-control" id="name"
                                                   onkeyup="checkDuplicate(this.value)" name="name"
                                                   placeholder="Enter Product name" required>
                                            <span id="duplicate"></span>
                                            <span class="text-primary small">Enter the product name eg. Business Loan.</span>
{#                                            <input type="hidden" name="form_type" value="1" required>#}
                                        </div>

                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <input type="number" class="form-control"
                                                       id="maxamount" name="maxamount" value="0" required>
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text">%</div>
                                                </div>
                                            </div>
                                            <span class="text-primary small">Percentage of applicant savings that doesn't require appraisal.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <input type="number" class="form-control" max='100'
                                                   id="interest" name="interest" step="any"
                                                   placeholder="Enter loan interest"
                                                   required>
                                            <span class="text-primary small">Enter the interest rate this product. It must be in percentage.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <select class="form-control" onchange="setPeriod(this.value)" name="formula"
                                                    id="formula" required>
                                                <option value="" disabled selected>Select Option</option>
                                                <option value="per_annum">Per annum</option>
                                                <option value="per_month">Per month</option>
                                                <option value="per_week">Per week</option>
                                                <option value="per_day">Per Day</option>
                                            </select>
                                            <span class="text-primary small">Select when Interest rate is Applied.</span>
                                        </div>

                                        <div class="mb-2 d-none" id="maximum_period">
                                            <div class="input-group flex-nowrap">
                                                <input type="number" class="form-control" name="maximum_period" placeholder="Maximum Period accepted for this loan, Leave it blank for no limit on period"
                                                       aria-label="maximum_period" aria-describedby="period-addon" required>
                                                <span class="input-group-text" id="period-addon">Month(s)</span>
                                            </div>
                                            <span class="text-primary small">Maximum Period accepted for this loan product. Leave it blank for no limit on period</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <input type="number" class="form-control" id="excused"
                                                   name="excused" placeholder="Grace period in days" required>
                                            <span class="text-primary small">Days beyond a due date before penalty or cancellation.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <input type="number" class="form-control"
                                                   id="warningDays" name="warningd" placeholder="Enter warning days"
                                                   required>
                                            <span class="text-primary small">Days applicant should start receiving reminders before due date.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <input type="text" class="form-control"
                                                   id="maximum_securities" name="maximum_securities" value="3" required>
                                            <span class="text-primary small">Limit Number of Securities for a loan.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <input type="number" class="form-control"
                                                   id="security_ratio" name="security_ratio" value="150" required>
                                            <span class="text-primary small">Percentage of Total Security value to the loan.</span>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <select class="form-control" name="product_behaviour"
                                                    id="product_behaviour" required>
                                                <option value="" selected disabled>Select product behaviour</option>
                                                <option value="standalone">Standalone</option>
                                                <option value="allow_running_with_others">Allow running with other loans</option>
                                            </select>
                                            <span class="text-primary small">Is it a standalone or can run with other loans.</span>
                                        </div>

{#                                        <div class="mb-2 col-md-6">#}
{#                                            <select class="form-control" name="interval"#}
{#                                                    id="interval" required>#}
{#                                                <option value="" selected disabled>Select Interval</option>#}
{#                                                <option value="0">Daily</option>#}
{#                                                <option value="1">Weekly</option>#}
{#                                                <option value="2">BI-Weekly</option>#}
{#                                                <option value="3">Monthly</option>#}
{#                                                <option value="4">Yearly</option>#}
{#                                            </select>#}
{#                                            <span class="text-primary small">Period used to calculate penalty on outstanding installments.</span>#}
{#                                        </div>#}

{#                                        <div class="mb-2 col-md-6">#}
{#                                            <select class="form-control" name="subSchedule"#}
{#                                                    id="sub-schedule" required>#}
{#                                                <option value="0" selected>False</option>#}
{#                                                <option value="1">True</option>#}
{#                                            </select>#}
{#                                            <span class="text-primary small">Allow plotting sub schedule.</span>#}
{#                                        </div>#}
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close
                                        </button>
                                        <button type="submit" id="savebtn" class="btn btn-primary">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                {#=================================LOAN SETTINGS MODAL=========================================#}

                <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true" id="editModal">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleLargeModalLabel">Edit loan
                                    Product</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close">
                                </button>
                            </div>
                            <div class="modal-body">
                                <form method="post" id="edit_form_product_types" enctype="multipart/form-data" action="">
                                    {% csrf_token %}
                                    <div class="row">
                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="name">Name</label>
                                            <input type="text" class="form-control" id="edit_name"
                                                   onkeyup="checkDuplicate(this.value)"
                                                   name="edit_name"
                                                   placeholder="Enter loan type name" required>

                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="maxamount">Loan percentage to
                                                savings </label>
                                            <input type="number" class="form-control" max="100"
                                                   id="edit_maxamount"
                                                   name="edit_maxamount"
                                                   placeholder="Enter Maximum loan amount" required>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="interest">Interest
                                                Rate</label>
                                            <input type="text" class="form-control" id="edit_interest"
                                                   name="edit_interest"
                                                   placeholder="Enter loan interest" required>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="formula">Loan interest
                                                per..?</label>
                                            <select class="form-control" name="edit_formula" id="edit_formula"
                                                    required>
                                                <option value="" disabled selected>Select Option</option>
                                                <option value="per_annum">Per annum</option>
                                                <option value="per_month">Per month</option>
                                                <option value="per_week">Per week</option>
                                                <option value="per_day">Per Day</option>
                                            </select>
                                        </div>

                                    <div class="mb-2">
                                        <label class="form-label" for="max_period">Maximum Period</label>
                                            <input type="number" id="edit_max_period" class="form-control" name="edit_maximum_period" placeholder="Maximum Period accepted for this loan, Leave it blank for no limit on period" required>
                                        <span class="text-primary small">Maximum Period accepted for this loan product. Leave it blank for no limit on period</span>
                                    </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="excused">Excuse Days</label>
                                            <input type="text"
                                                   class="form-control"
                                                   id="edit_excused"
                                                   name="edit_excused" placeholder="Enter Excuse days"
                                                   required>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="warningd">Warning
                                                Days</label>
                                            <input type="text"
                                                   class="form-control"
                                                   id="edit_warningd"
                                                   name="edit_warningd" placeholder="Enter warning days"
                                                   required>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="maximum_securities">Maximum
                                                securities</label>
                                            <input type="text"
                                                   class="form-control"
                                                   id="edit_maximum_securities"
                                                   name="edit_maximum_securities"
                                                   placeholder="Enter maximum securities" required>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="security_ratio">Security
                                                ratio</label>
                                            <input type="text"
                                                   class="form-control"
                                                   id="edit_security_ratio"
                                                   name="edit_security_ratio"
                                                   placeholder="Enter security ratio" required>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="security_ratio">Product behaviour</label>
                                            <select class="form-control" name="edit_product_behaviour"
                                                    id="edit_product_behaviour" required>
                                                <option value="" selected disabled>Select product behaviour</option>
                                                <option value="standalone">Standalone</option>
                                                <option value="allow_running_with_others">Allow running with other loans</option>
                                            </select>
                                            <span class="text-primary small">Is it a standalone or can run with other loans.</span>
                                        </div>


                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-warning"
                                                data-bs-dismiss="modal">Close
                                        </button>
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

{#                ================================================= VIEW DETAILS MODAL ==============================================#}
                <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true" id="viewModal">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="viewDetailTitle">Details</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close">
                                </button>
                            </div>
                            <div class="modal-body">

                                    <div class="row">
                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="name">Name</label>
                                            <input type="text" class="form-control" id="view_name"
                                                   name="view_name"
                                                   placeholder="Enter loan type name" readonly>

                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="maxamount">Loan percentage to
                                                savings </label>
                                            <input type="number" class="form-control" max="100"
                                                   id="view_maxamount"
                                                   name="view_maxamount"
                                                   placeholder="Enter Maximum loan amount" readonly>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="interest">Interest
                                                Rate</label>
                                            <input type="text" class="form-control" id="view_interest"
                                                   name="view_interest"
                                                   placeholder="Enter loan interest" readonly>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="formula">Loan interest
                                                per..?</label>
                                            <select class="form-control" name="view_formula" id="view_formula"
                                                    readonly>
                                                <option value="" disabled selected>Select Option</option>
                                                <option value="per_annum">Per annum</option>
                                                <option value="per_month">Per month</option>
                                                <option value="per_week">Per week</option>
                                                <option value="per_day">Per Day</option>
                                            </select>
                                        </div>

                                    <div class="mb-2">
                                        <label class="form-label" for="max_period">Maximum Period</label>
                                            <input type="number" id="view_max_period" class="form-control" name="view_maximum_period" placeholder="Maximum Period accepted for this loan, Leave it blank for no limit on period" readonly>
                                        <span class="text-primary small">Maximum Period accepted for this loan product. Leave it blank for no limit on period</span>
                                    </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="excused">Excuse Days</label>
                                            <input type="text"
                                                   class="form-control"
                                                   id="view_excused"
                                                   name="view_excused" placeholder="Enter Excuse days"
                                                   readonly>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="warningd">Warning
                                                Days</label>
                                            <input type="text"
                                                   class="form-control"
                                                   id="view_warningd"
                                                   name="view_warningd" placeholder="Enter warning days"
                                                   readonly>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="maximum_securities">Maximum
                                                securities</label>
                                            <input type="text"
                                                   class="form-control"
                                                   id="view_maximum_securities"
                                                   name="view_maximum_securities"
                                                   placeholder="Enter maximum securities" readonly>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="security_ratio">Security
                                                ratio</label>
                                            <input type="text"
                                                   class="form-control"
                                                   id="view_security_ratio"
                                                   name="view_security_ratio"
                                                   placeholder="Enter security ratio" readonly>
                                        </div>

                                        <div class="mb-2 col-md-6">
                                            <label class="form-label" for="security_ratio">Product behaviour</label>
                                            <select class="form-control" name="view_product_behaviour"
                                                    id="view_product_behaviour" readonly>
                                                <option value="" selected disabled>Select product behaviour</option>
                                                <option value="standalone">Standalone</option>
                                                <option value="allow_running_with_others">Allow running with other loans</option>
                                            </select>
                                            <span class="text-primary small">Is it a standalone or can run with other loans.</span>
                                        </div>


                                    </div>

                            </div>
                        </div>
                    </div>
                </div>






                {# =======END ADD LOAN TYPE MODAL========================#}
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="default-datatable" class="display table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>Loan Type</th>
                                <th>Interest application</th>
                                <th>Interest rate (%)</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tbody>

                            {% for types in loantypes %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ types.name }}</td>
                                    {% if types.formula == 1  %}
                                        <td>Per annum</td>
                                    {% elif types.formula == 2 %}
                                        <td>Per month</td>
                                    {% elif types.formula == 3 %}
                                        <td>Per week</td>
                                    {% elif types.formula == 4 %}
                                        <td>Per day</td>
                                    {% endif %}

                                    <td>{{ types.interest_rate }}% {{ types.get_formula_display }}</td>
                                    <td>
                                        <button class="btn btn-info btn-sm"
                                                onclick="showEditModal({
                                                'name': '{{ types.name }}',
                                                'max_loan':'{{ types.max_loan }}',
                                                'interest_rate':'{{ types.interest_rate }}',
                                                'formula':'{{ types.formula }}',
                                                'maximum_period': '{{types.maximum_period }}',
                                                'excuse_d':'{{ types.excuse_d }}',
                                                'warning_d':'{{ types.warning_d }}',
                                                'maximum_securities':'{{ types.maximum_securities }}',
                                                'security_ratio':'{{ types.security_ratio }}',
                                                'is_standalone':'{{ types.is_standalone }}',
                                                'id':'{{ types.id }}'
                                                })"
                                        ><i class="fa fa-edit"></i> Edit
                                        </button>
                                        <button class="btn btn-success btn-sm"
                                                onclick="showViewModal({
                                                'name': '{{ types.name }}',
                                                'max_loan':'{{ types.max_loan }}',
                                                'interest_rate':'{{ types.interest_rate }}',
                                                'formula':'{{ types.formula }}',
                                                'maximum_period': '{{types.maximum_period }}',
                                                'excuse_d':'{{ types.excuse_d }}',
                                                'warning_d':'{{ types.warning_d }}',
                                                'maximum_securities':'{{ types.maximum_securities }}',
                                                'security_ratio':'{{ types.security_ratio }}',
                                                'is_standalone':'{{ types.is_standalone }}',
                                                'id':'{{ types.id }}'
                                                })"
                                        ><i class="fa fa-eye"></i> View
                                        </button>
                                        <button data-bs-toggle="modal" data-bs-target=".deletetype{{ types.id }}"
                                                class="btn btn-danger btn-sm"><i class="fa fa-trash"></i> Delete
                                        </button>

                                    </td>
                                </tr>

                                {# ================EDIT LOAN TYPE MODAL========= #}

                                <div class="modal deletetype{{ types.id }}" tabindex="-1" role="dialog"
                                     aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleLargeModalLabel">Delete security</h5>

                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close">
                                                </button>
                                            </div>
                                            <div class="modal-body">



                                                    <div class="row">
                                                        <div class="mb-2 col-md-12">

                                                            <div style="text-align: center;">
                                                                <i class="fa fa-warning fa-5x" style="color: red"></i>
                                                                <h4 style="color: red"><b>Are you sure you want to
                                                                    delete Loan type <strong>{{ types.name }}</strong>
                                                                    loans?</b></h4>

                                                                <h5 style="color: Blue">Loan records attached to
                                                                    <strong>{{ types.name }}</strong> will not be
                                                                    deleted, but you will not be able to use
                                                                    <strong>{{ types.name }}</strong> again</h5>
                                                            </div>

                                                        </div>


                                                    </div>


                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">No
                                                        </button>
                                                        <a href="{% url 'loan_types_delete_new' types.id %}">
                                                            <button type="submit" class="btn btn-primary">Yes Delete
                                                            </button>
                                                        </a>
                                                    </div>
                                                </form>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- End col -->
    </div>
{% endblock %}