{% extends "base.html" %}
{% comment %}© 2015, Multapplied Networks, Inc.{% endcomment %}
{% load bootstrap %}

{% block base %}<base href="/django/bonds/{{ bond.id }}/legs/{{ leg.id }}/speedcheck/{{ tuner.id }}/"/>{% endblock %}

{% block title %}{{ leg | escapejs }} Speed Check {{ block.super }}{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    <li><a href="{% url 'bonds' %}" target="_parent">Bonds</a></li>
    <li><a href="{% url 'bond-details' bond.id %}" target="_parent">{{ bond.bonder.name }}</a></li>
    <li>Leg {{ leg.id }} Speed Check</li>
{% endblock %}

{% block content %}
<script type="text/ng-template" id="/leg_results.html">
    <p>The following speeds are recommended for {{ leg.subclass }}:</p>
{% verbatim %}
    <div class="row v-offset-1">
        <div class="col-xs-6 col-sm-2 col-md-1">
            <strong>Before</strong>
        </div>
        <div class="col-xs-6 col-sm-2 col-md-1">
            <strong>After</strong>
        </div>
    </div>
    <div class="row v-offset-1">
        <div class="col-xs-6 col-sm-2 col-md-1">
            <div class="nobreak ng-scope">
                <i class="fa fa-arrow-down"></i>
                {{ tuning.download.original_speed | number:2 }} Mbps
            </div>
            <div class="nobreak ng-scope">
                <i class="fa fa-arrow-up"></i>
                {{ tuning.upload.original_speed | number:2 }} Mbps
            </div>
        </div>
        <div class="col-xs-6 col-sm-2 col-md-1">
            <div class="nobreak ng-scope">
                <i class="fa fa-arrow-down"></i>
                {{ tuning.download.recommended_speed | number:2 }} Mbps <a ng-href="{{ tuning.download.speedtest_comparison }}" target="_parent"><i class="fa fa-line-chart"></i></a>
            </div>
            <div class="nobreak ng-scope">
                <i class="fa fa-arrow-up"></i>
                {{ tuning.upload.recommended_speed | number:2 }} Mbps <a ng-href="{{ tuning.upload.speedtest_comparison }}" target="_parent"><i class="fa fa-line-chart"></i></a>
            </div>
        </div>
    </div>
{% endverbatim %}
</script>

<div class="row">
    <div class="col-md-12">
        <h2 id="top">{{ bond.bonder.name }} leg {{ leg.id }} speed check</h2>
    </div>
</div>

<div class="row"
    ng-controller="LegSpeedCtrl"
    {% if leg.interfaceleg %}
        ng-init="init('{% url 'v4:interfacelegtuner-detail' bond.id leg.id tuner.id %}')"
    {% else %}
        ng-init="init('{% url 'v4:mobilebroadbandlegtuner-detail' bond.id leg.id tuner.id %}')"
    {% endif %}
    ng-cloak
>
    <div class="col-md-12">
        <dl class="dl-horizontal">
            {% verbatim %}
            <dt>ID</dt><dd>{{ tuning.id }}</dd>
            <dt>Submitted time</dt><dd>{{ tuning.created | date:'medium' }}</dd>
            <dt>Submitted by</dt><dd>
                <span ng-if="tuning.submitted_by.name">
                    {{ tuning.submitted_by.name }}
                </span>
                <span ng-if="!tuning.submitted_by.name">
                    {{ tuning.bond_tuner_name }}
                </span>
            </dd>
            <dt>Status</dt><dd>{{ tuning.status | tuner_status }}</dd>
            {% endverbatim %}
        </dl>
    </div>
    <div class="col-md-12 v-offset-3">
        <h2 id="top">Recommended speeds</h2>
        {% if tuner.bondtuner %}
            These results can only be managed by <a href="{% url 'settings-check' bond.id tuner.bondtuner.id %}" target="_parent">{{ tuner.bondtuner }}</a>
        {% endif %}
    </div>
    <div class="col-md-12">
        <div ng-if="tuning.download.recommended_speed && tuning.upload.recommended_speed">
            {% verbatim %}
            <div ng-if="tuning.results_acknowledgement === 'accepted'" class="alert alert-info" role="alert">Recommended speeds were accepted {{ tuning.results_acknowledged_time | date:'medium' }}<span ng-if="tuning.results_acknowledged_by"> by {{ tuning.results_acknowledged_by.name }}</span>.</div>
            <div ng-if="tuning.results_acknowledgement === 'declined'" class="alert alert-warning" role="alert">Recommended speeds were declined {{ tuning.results_acknowledged_time | date:'medium' }}<span ng-if="tuning.results_acknowledged_by"> by {{ tuning.results_acknowledged_by.name }}</span>.</div>
            <div ng-if="tuning.results_acknowledgement === 'pending'" class="well well">
            {% endverbatim %}
                <p>Update the leg with these recommended speeds?</p>
                <div class="btn-toolbar" role="toolbar">
                    <button type="button" class="btn btn-primary" ng-click="acceptCheck()">Update leg</button>
                    <button type="button" class="btn btn-default" ng-click="declineCheck()">Keep current leg speeds</button>
                </div>
            </div>
            <div ng-include src="'/leg_results.html'"></div>
        </div>
        <div ng-if="!tuning.results">
            <div ng-if="tuning.status === 'running'">
                <p>The speed check is in progress. Recommended speeds will be shown when the check is complete.</p>
                <a class="btn btn-default" ng-click="cancelCheck()">Cancel check</a>
            </div>
            <div ng-if="tuning.status === 'scheduled'">
                <p>The speed check is scheduled. Recommended speeds will be shown when the check is complete.</p>
                <a class="btn btn-default" ng-click="cancelCheck()">Cancel check</a>
            </div>
            <div ng-if="tuning.status === 'cancelled'">
                {% verbatim %}
                <div class="alert alert-info" role="alert">Check was cancelled {{ tuning.cancelled_time | date:'medium' }}<span ng-if="tuning.cancelled_by"> by {{ tuning.cancelled_by.name }}</span>.</div>
                {% endverbatim %}
                <p>The check was cancelled. You can start a new check from the <a href="{% url 'bond-details' bond.id %}" target="_parent">bond details</a> page.</p>
            </div>
            <div ng-if="tuning.status === 'failed'">
                {% verbatim %}
                <div class="alert alert-danger" role="alert">The check failed with this error: {{ tuning.error_message }}</div>
                {% endverbatim %}
                <p>The check failed. You can start a new check from the <a href="{% url 'bond-details' bond.id %}" target="_parent">bond details</a> page.</p>
            </div>
        </div>
    </div>
    {% verbatim %}
    <div class="col-md-12 v-offset-3">
        <h2>Logs</h2>
        <button class="btn btn-default" ng-click="show_logs.debug = !show_logs.debug">
            <span ng-show="show_logs.debug">Hide</span><span ng-hide="show_logs.debug">Show</span> debug
        </button>
        <button class="btn btn-default" ng-click="show_logs.info = !show_logs.info">
            <span ng-show="show_logs.info">Hide</span><span ng-hide="show_logs.info">Show</span> info
        </button>
        <button class="btn btn-default" ng-click="show_logs.warning = !show_logs.warning">
            <span ng-show="show_logs.warning">Hide</span><span ng-hide="show_logs.warning">Show</span> warning
        </button>

        <div ng-show="show_logs.debug || show_logs.info || show_logs.warning">
            <h3>Download</h3>
            <div ng-show="tuning.download.logs">
                <table class="table table-condensed table-borderless">
                    <thead>
                        <th>Level</th>
                        <th>Date</th>
                        <th>Message</th>
                    </thead>
                    <tbody ng-repeat="log in tuning.download.logs">
                        <tr ng-show="show_logs[log.level]">
                            <td><span class="label label-{{ labelLogLevel(log.level) }}">{{ log.level }}</span></td>
                            <td>{{ log.created_at | date:'medium' }}</td>
                            <td>{{ log.message }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Upload</h3>
            <div ng-show="tuning.upload.logs">
                <table class="table table-condensed table-borderless">
                    <thead>
                        <th>Level</th>
                        <th>Date</th>
                        <th>Message</th>
                    </thead>
                    <tbody ng-repeat="log in tuning.upload.logs">
                        <tr ng-show="show_logs[log.level]">
                            <td><span class="label label-{{ labelLogLevel(log.level) }}">{{ log.level }}</span></td>
                            <td>{{ log.created_at | date:'medium' }}</td>
                            <td>{{ log.message }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endverbatim %}
</div>
{% endblock %}