{% extends 'base.html' %}
{% block midpart %}

    <div class="row">
        <div class="col-xs-12">
            <div class="box box-success">
                <div class="box-header">
                    <h3 class="box-title"> <b>{{ title }}</b></h3>
                    <a href="/add_contractors/"><button class="btn btn-primary pull-right">Add Contractor</button></a>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="id_table_contractor" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Contact Number</th>
                            <th>Vendor</th>
                            <th>PO Number</th>
                            <th>Delete</th>
                        </tr>
                        </thead>
                        <tbody id="id_tbody_contractor">
                        {% for contractor in contractor_list %}
                            <tr>
                                <td><a href="/edit_contractors/{{ contractor.0 }}/">{{ contractor.1 }}</a></td>
                                <td>{{ contractor.2 }}</td>
                                <td>{{ contractor.3 }}</td>
                                <td>{{ contractor.4 }}</td>
                                <td>{{ contractor.5 }}</td>
                                <td><a href="/delete_contractors/{{ contractor.0 }}/">
                                    <button class="btn btn-primary btn-sm">Delete</button></a></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>

    {% include "js.html" %}

    <!-- page script -->

{% endblock midpart %}