{% if not is_xhr|default(false) %}{% extends "base.html" %}{% endif -%}
{% block content %}
    <div id="overview">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading"><span class="glyphicon glyphicon-home"></span> System</div>
                    <table class="table table-striped table-bordered">
                        <tr>
                            <td class="label-col">OS</td>
                            <td>{{ os }}</td>
                        </tr>
                        <tr>
                            <td class="label-col">Hostname</td>
                            <td>{{ hostname }}</td>
                        </tr>
                        <tr>
                            <td class="label-col">Uptime</td>
                            <td>{{ uptime }}</td>
                        </tr>
                        <tr>
                            <td class="label-col">CPU Cores</td>
                            <td>{{ cpus }}</td>
                        </tr>
                        <tr>
                            <td class="label-col">Memory</td>
                            <td>{{ vmem.total|filesizeformat }}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading"><span class="glyphicon glyphicon-user"></span> Users <small>(Logged in)</small></div>
                    <table class="users table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Started</th>
                                <th>Host</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for u in users %}
                                <tr>
                                    <td>{{ u.name }}</td>
                                    <td>{{ u.started }}</td>
                                    <td>{{ u.host }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading"><span class="glyphicon glyphicon-dashboard"></span> CPU <span class="pull-right"><small>{{ cpus }} cores</small></span></div>
                    <table class="cpu table table-striped table-bordered">
                        <tr>
                            <td class="label-col">Load average</td>
                            <td class="load" style="word-spacing: 10px;">{{ load_avg[0] }} {{ load_avg[1] }} {{ load_avg[2] }}</td>
                        </tr>
                        <tr>
                            <td class="label-col">User</td>
                            <td class="user">{{ cpu_percent.user }} %</td>
                        </tr>
                        <tr>
                            <td class="label-col">System</td>
                            <td class="system">{{ cpu_percent.system }} %</td>
                        </tr>
                        <tr>
                            <td class="label-col">Idle</td>
                            <td class="idle">{{ cpu_percent.idle }} %</td>
                        </tr>
                        <tr>
                            <td class="label-col">I/O wait</td>
                            <td class="iowait">{{ cpu_percent.iowait }} %</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading"><span class="glyphicon glyphicon-record"></span> Memory</div>
                    <table class="memory table table-striped table-bordered">
                        <tr>
                            <td class="label-col">Total</td>
                            <td class="total">{{ vmem.total|filesizeformat }}</td>
                        </tr>
                        <tr>
                            <td class="label-col">Available</td>
                            <td class="available">{{ vmem.available|filesizeformat }}</td>
                        </tr>
                        <tr>
                            <td class="label-col">Used <small>(excl. cache &amp; buffers)</small></td>
                            <td class="used_excl">{{ (vmem.total - vmem.available)|filesizeformat }} ({{ vmem.percent }} %)</td>
                        </tr>
                        <tr>
                            <td class="label-col">Used <small>(incl. cache &amp; buffers)</small></td>
                            <td class="used_incl">{{ vmem.used|filesizeformat }}</td>
                        </tr>
                        <tr>
                            <td class="label-col">Free</td>
                            <td class="free">{{ vmem.free|filesizeformat }}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading"><span class="glyphicon glyphicon-import"></span> Swap</div>
                    <table class="swap table table-striped table-bordered">
                        <tr>
                            <td class="label-col">Total</td>
                            <td class="total">{{ swap.total|filesizeformat }}</td>
                        </tr>
                        <tr>
                            <td class="label-col">Used</td>
                            <td class="used">{{ swap.used|filesizeformat }} ({{ swap.percent }} %)</td>
                        </tr>
                        <tr>
                            <td class="label-col">Free</td>
                            <td class="free">{{ swap.free|filesizeformat }}</td>
                        </tr>
                        <tr>
                            <td class="label-col">Swapped in</td>
                            <td class="swapped-in">{{ swap.sin|filesizeformat }}</td>
                        </tr>
                        <tr>
                            <td class="label-col">Swapped out</td>
                            <td class="swapped-out">{{ swap.sout|filesizeformat }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading"><span class="glyphicon glyphicon-transfer"></span> Network I/O</div>
                    <table class="network table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Interface</th>
                                <th>IP</th>
                                <th>RX/s</th>
                                <th>TX/s</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for ni in net_interfaces %}
                                <tr>
                                    <td>{{ ni.name }}</td>
                                    <td>{{ ni.ip }}</td>
                                    <td>{{ ni.rx_per_sec|default(0)|filesizeformat }}</td>
                                    <td>{{ ni.tx_per_sec|default(0)|filesizeformat }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-8">
                <div class="panel panel-primary">
                    <div class="panel-heading"><span class="glyphicon glyphicon-hdd"></span> Disk usage</div>
                    <table class="disks table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Device</th>
                                <th>Mounted</th>
                                <th>Total</th>
                                <th>Used</th>
                                <th>Free</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for part, usage in disks %}
                                <tr>
                                    <td>{{ part.device }}</td>
                                    <td>{{ part.mountpoint.decode("utf-8") }}</td>
                                    <td>{{ usage.total|filesizeformat }}</td>
                                    <td>{{ usage.used|filesizeformat }} ({{ usage.percent }} %)</td>
                                    <td>{{ usage.free|filesizeformat }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}