{% extends "template.html" %}

{% block head %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap.min.js"></script>
{% endblock %}

{% block content %}

<table id="smsHistory" class="display table table-hover table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>Tanggal</th>
            <th>Arah</th>
            <th>IMSI Modem</th>
            <th>Dari/Ke</th>
            <th>Pesan</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>#</th>
            <th>Tanggal</th>
            <th>Arah</th>
            <th>IMSI Modem</th>
            <th>Dari / Ke</th>
            <th>Pesan</th>
        </tr>
    </tfoot>
</table>

<script>
    $(document).ready(function() {
        $('#smsHistory').DataTable( {
            "ajax": "/sms/datatables",
            "language": { "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Indonesian.json" },
            "columns": [
                { "data": "rowid" },
                { "data": "created" },
                { "data": "direction" },
                { "data": "imsi" },
                { "data": "partner" },
                { "data": "msg" }
            ],
            "order": [
                [1, "desc"]
            ],
            "lengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]]
        } );
    } );
</script>

{% endblock %}