{% extends "base.html" %}
{% comment %}© 2012, Multapplied Networks, Inc.{% endcomment %}

{% block title %}Dashboard {{ block.super }}{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block content %}
<ba-permission-show all="['view_space']" ng-cloak>
    <div class="panel-group" ng-controller="DashboardCtrl">
        <div class="row">
            <div class="col-xs-12">
                <div class="inline-panel-bar">
                    <div class="inline-panel">
                        <div class="panel panel-default">
                            <div class="panel-heading"><h2 class="panel-title">Leg Growth</h2></div>
                            <div class="panel-body">
                                <div ng-if="!object_counts" class="text-muted">
                                    Loading data
                                </div>
                                <div class="snapshot-object-count" ng-if="object_counts">
                                    <snapshot-object-count count="object_counts.counts.legs" dates="object_counts.dates"></snapshot-object-count>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                    <div class="inline-panel">
                        <div class="panel panel-default">
                            <div class="panel-heading"><h2 class="panel-title">Bond Growth</h2></div>
                            <div class="panel-body">
                                <div ng-if="!object_counts" class="text-muted">
                                    Loading data
                                </div>
                                <div class="snapshot-object-count" ng-if="object_counts">
                                    <snapshot-object-count count="object_counts.counts.bonds" dates="object_counts.dates"></snapshot-object-count>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                    <div class="inline-panel">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">Downtime Prevented
                                <span class="pull-right">
                                    <a
                                        tabindex="0"
                                        class="question_info"
                                        popover-placement="left"
                                        popover-trigger="mouseenter"
                                        popover-popup-delay="500"
                                        uib-popover="Shown for previous calendar week and month."
                                    >
                                        <span class="text-muted fa fa-question-circle"></span>
                                    </a>
                                </span></h2>
                            </div>
                            <div class="panel-body">
                                <dl class="dl-horizontal dl-thin">
                                    {% verbatim %}
                                    <dt><abbr title="{{ ::downtime_prevented.week.start | date:'fullDate' }} to {{ ::downtime_prevented.week.end | amSubtract:1 | momentToDate | date:'fullDate' }}">Last week</abbr></dt>
                                    {% endverbatim %}
                                    <dd>
                                        <div ng-show="!downtime_prevented.week" class="text-muted">
                                            Loading data
                                        </div>
                                        <div ng-cloak class="text-muted empty" ng-if="downtime_prevented.week.duration === null">Data not yet available</div>
                                        <div ng-cloak class="value" ng-if="downtime_prevented.week.duration !== null">
                                            {% verbatim %}
                                            {{ downtime_prevented.week.duration | human_readable_time }}<br/>
                                            {{ downtime_prevented.week.count }}
                                            {% endverbatim %}
                                            <ng-pluralize count="::downtime_prevented.week.count" when="{'one': ' outage', 'other': ' outages'}"></ng-pluralize>
                                        </div>
                                    </dd>
                                    {% verbatim %}
                                    <dt><abbr title="{{ ::downtime_prevented.month.start | date:'fullDate' }} to {{ ::downtime_prevented.month.end | amSubtract:1 | momentToDate | date:'fullDate' }}">Last month</abbr></dt>
                                    {% endverbatim %}
                                    <dd>
                                        <div ng-show="!downtime_prevented.month" class="text-muted">
                                            Loading data
                                        </div>
                                        <div ng-cloak class="value text-muted empty" ng-if="downtime_prevented.month.duration === null">Data not yet available</div>
                                        <div ng-cloak class="value" ng-if="downtime_prevented.month.duration !== null">
                                            {% verbatim %}
                                            {{ downtime_prevented.month.duration | human_readable_time }}<br/>
                                            {{ downtime_prevented.month.count }}
                                            {% endverbatim %}
                                            <ng-pluralize count="::downtime_prevented.month.count" when="{'one': ' outage', 'other': ' outages'}"></ng-pluralize>
                                        </div>
                                    </dd>
                                </dl>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ba-permission-show>

    <div class="row">
        <div class="col-md-12">
            <ba-permission-show all="['view_bond']">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title">Bonds</h2>
                    </div>
                    <div class="panel-body">
                        <div id="dashboard-bonds">
                            {% include "bacore/bonds/list_partials/_bonds_list.html" %}
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </ba-permission-show>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading"><h2 class="panel-title">Leg Status Legend</h2></div>
                <div class="panel-body">
                    <ul class="list-unstyled">
                        <li><span class="status-standard"><span class="status status-up"> </span></span> Up<br /></li>
                        <li><span class="status-standard"><span class="status status-down"> </span></span> Down<br /></li>
                        <li><span class="status-standard"><span class="status status-testing"> </span></span> Testing<br /></li>
                        <li><span class="status-standard"><span class="status status-unknown"> </span></span> Idle/Unknown<br /></li>
                        <li><span class="status-failover"><span class="status status-up"> </span></span> Failover, up<br /></li>
                        <li><span class="status-standard"><span class="status status-offline"> </span></span> Offline<br /></li>
                        <li><span class="status-standard"><span class="status status-up"><i class="fa fa-lock"> </i></span></span> Link is establishing the encrypted session.<br /></li>
                        <li><span class="status-standard"><span class="status status-warning"><i class="fa fa-arrow-down"> </i></span></span> Link has had its speed reduced automatically.<br /></li>
                        <li><span class="status-standard"><span class="status status-warning"><i class="fa fa-exclamation"> </i></span></span> Link is in use but has high latency, packet loss, or is flapping.<br /></li>
                        <li><span class="status-standard"><span class="status status-down"><i class="fa fa-exclamation"> </i></span></span> Link is removed from bond due to packet loss or is flapping.<br /></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading"><h2 class="panel-title">Options Legend</h2></div>
                <div class="panel-body">
                    <ul class="list-unstyled">
                        <li><i class="fa fa-code-fork"> </i> Aggregator failover</li>
                        <li><i class="fa fa-tasks"> </i> Quality of Service</li>
                        <li><i class="fa fa-filter"> </i> Compression</li>
                        <li><i class="fa fa-key"> </i> HMAC authentication</li>
                        <li><i class="fa fa-lock"> </i> Encryption</li>
                        <li><i class="fa fa-exchange"> </i> TCP proxy</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endblock %}