{% extends 'base.html' %}

{% block content %}
<div class="row"><h2>Search for Report:</h2>
    <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-sort-name="id"
               data-sort-order="desc"
               data-page-size="5"
               data-page-list="[5, 10, 25, all]"
               data-show-footer="true"
               data-side-pagination="client"
               class="table table-striped table-hover ">
            <thead>
            <tr id="myHeader">
                <th data-field="id" data-sortable="true">Report Id</th>
                <th data-field="title" data-sortable="true">Title</th>
                <th data-field="details" data-sortable="true">Details</th>
                <th data-field="mailboxid" data-sortable="true">Mailbox Id</th>
                <th data-field="date" data-sortable="true">Date</th>
            </tr>
            </thead>
        </table>
    </div>
</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 %}