{% 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_vendors/"><button class="btn btn-primary pull-right">Add Vendor</button></a>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="id_table_vendor" class="table table-bordered table-striped" style="width:100%">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Address</th>
                            <th>PoC Manager</th>
                            <th>Delete</th>
                        </tr>
                        </thead>
                        <tbody id="id_tbody_vendor">
                        {% for vendor in vendor_list %}
                            <tr>
                                <td><a href="/edit_vendors/{{ vendor.0 }}/">{{ vendor.1 }}</a></td>
                                <td>{{ vendor.2 }}</td>
                                <td>{{ vendor.3 }}</td>
                                <td><a href="/delete_vendors/{{ vendor.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 %}