{% extends 'base.html' %}

{% block content %}
<div class="row"><h2>Select Mailbox to edit from the list:</h2>
    <form method="POST">
        <div class="table-responsive">
            <div id="toolbar"></div>
            <table id="table" data-toolbar="#toolbar"
                   data-search="true"
                   data-toggle="true"
                   data-sortable="true"
                   data-filter-control="true"
                   data-searchable="true"
                   data-show-export="true"
                   data-click-to-select="true"
                   data-pagination="true"
                   data-page-size="5"
                   data-page-list="[5, 10, 25, all]"
                   data-show-footer="true"
                   data-side-pagination="client"
                   data-id-field="ID"
                   data-select-item-name="id"
                   class="table table-striped table-hover">
                <thead>
                <tr id="myHeader">
                    <th data-field="check" data-radio="true">Check</th>
                    <th data-field="FirstName" data-sortable="true">First name</th>
                    <th data-field="LastName" data-sortable="true">Last name</th>
                    <th data-field="MailBoxName" data-sortable="true">Mailbox</th>
                    <th data-field="Role" data-sortable="true">Role</th>
                    <th data-field="PolicyID" data-sortable="true">Policy</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="row">
            <div class="row">
                <input class="btn btn-lg btn-primary" type="submit" value="OK">
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block javascript %}
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
{% endblock %}

{% block script %}
<script>
    var $table = $('#table')
    $table.bootstrapTable({data: {{data|tojson|safe}}})

</script>
{% endblock %}