{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading"><h2 class="panel-title">States</h2></div>
        <div class="table-responsive">
            <table class="table table-striped table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Interface</th>
                        <th>Protocol</th>
                        <th>Source</th>
                        <th>Destination</th>
                        <th>State</th>
                        <th>Packets</th>
                        <th>Bytes</th>
                        <th>Expires</th>
                    </tr>
                </thead>
                <tbody>
                    {% for state in states %}
                    <tr>
                        <td>{{ state.ifname }}</td>
                        <td>{{ state.proto }}</td>
                        <td>{{ state.src }}</td>
                        <td>{{ state.dst }}</td>
                        <td>{{ state.state }}</td>
                        <td class="text-nowrap">{{ state.packets }}</td>
                        <td class="text-nowrap">{{ state.bytes }}</td>
                        <td class="text-nowrap">{{ state.expires }} <span class="glyphicon glyphicon-trash glyph-link pull-right" title="Remove all state entries from {{ state.src }} to {{ state.dst }}" onclick="remove_state(this);" data-entry="{{ state.src }}|{{ state.dst }}"></span></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="modal_alert">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
        <div class="modal-header modal-header-danger">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
    </div>
  </div>
</div>

{% endblock %}

{% block footer %}
{{ super() }}

<script src="{{ url_for('static', filename='js/datatables.min.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/datatables.min.css') }}">

<script type="text/javascript">
$('.table').DataTable({
    'paging':       false,
    'info':         false,
    'searching':    false,
    'lengthChange': false,
    'columnDefs':   [{ 'orderable': false, 'targets': [5, 6] }],
    'order': []
});
</script>
{% endblock %}