{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading"><h2 class="panel-title">System Information</h2></div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-condensed">
                        <tbody>
                            <tr>
                                <th>Hostname</th>
                                <td>{{ sys_info.hostname }}</td>
                            </tr>
                            <tr>
                                <th>Operating System</th>
                                <td>{{ sys_info.os }}</td>
                            </tr>
                            <tr>
                                <th>Uptime</th>
                                <td>{{ sys_info.uptime }}</td>
                            </tr>
                            <tr>
                                <th>Current Time</th>
                                <td>{{ sys_info.current_time }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading"><h2 class="panel-title">PF Information</h2></div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-condensed">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Total</th>
                                <th class="cell-right">Rate</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>Status</th>
                                <td>{% if pf_info.enabled %}Enabled{% else %}Disabled{% endif %} for {{ pf_info.since }}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <th>State Table Entries</th>
                                <td>{{ pf_info.states }}</td>
                                <td></td>
                            </tr>
                            <tr>
                                <th>State Table Searches</th>
                                <td>{{ pf_info.searches.total }}</td>
                                <td class="cell-right">{{ pf_info.searches.rate }}/s</td>
                            </tr>
                            <tr>
                                <th>State Table Inserts</th>
                                <td>{{ pf_info.inserts.total }}</td>
                                <td class="cell-right">{{ pf_info.inserts.rate }}/s</td>
                            </tr>
                            <tr>
                                <th>State Table Removals</th>
                                <td>{{ pf_info.removals.total }}</td>
                                <td class="cell-right">{{ pf_info.removals.rate }}/s</td>
                            </tr>
                            <tr>
                                <th>Matches</th>
                                <td>{{ pf_info.match.total }}</td>
                                <td class="cell-right">{{ pf_info.match.rate }}/s</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading"><h2 class="panel-title">Interface Information</h2></div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-condensed">
                        <tbody>
                            {% for iface in if_info %}
                            <tr>
                                <th>{{ iface.name }}</th>
                                <td>{% if iface.status %}<span class="glyphicon glyphicon-arrow-up iface-up"></span>{% else %}<span class="glyphicon glyphicon-arrow-down iface-down"></span>{% endif %}</td>
                                <td>{{ iface.media }}</td>
                                <td class="monospace">
                                    {% for ip in iface.ipv4 %}{{ ip }}<br />{% endfor %}
                                    {% for ip in iface.ipv6|sort(attribute=1) %}{% if ip[1] %}<em data-toggle="popover" data-trigger="hover focus" data-content="Deprecated">{{ ip[0] }}</em>{% else %}{{ ip[0] }}{% endif%}<br />{% endfor %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading"><h2 class="panel-title">Interface Statistics</h2></div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-condensed">
                        {{ if_stats|safe }}
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

<script type="text/javascript">
// Enable the popovers
$(function () {
  $('[data-toggle="popover"]').popover()
});
</script>
{% endblock %}