{% extends "base.html" %}
{% comment %}© 2012, Multapplied Networks, Inc.{% endcomment %}
{% load bond %}
{% load traffic_rates %}
{% load site %}
{% load disk %}
{% load compress %}
{% load angular %}

{% block script %}
    {% compress js %}
    <script src="{{ STATIC_URL }}js/bond-configupdates.js"></script>
    {% endcompress %}
{% endblock %}

{% block style %}
    {% compress css %}
    <link rel="stylesheet" type="text/css" href="/static/legs/styles.css">
    {{ block.super }}
    {% endcompress %}
{% endblock %}

{% block pagescript %}
    {% if settings.IS_RUNSERVER %}
        <script type="text/javascript" src="/frontend-static/legs/runtime.js"></script>
        <script type="text/javascript" src="/frontend-static/legs/polyfills.js"></script>
        <script type="text/javascript" src="/frontend-static/legs/styles.js"></script>
        <script type="text/javascript" src="/frontend-static/legs/scripts.js"></script>
        <script type="text/javascript" src="/frontend-static/legs/vendor.js"></script>
        <script type="text/javascript" src="/frontend-static/legs/main.js"></script>
    {% else %}
        {% compress js %}
        <script type="text/javascript" src="/static/legs/runtime.js"></script>
        <script type="text/javascript" src="/static/legs/polyfills.js"></script>
        <script type="text/javascript" src="/static/legs/scripts.js"></script>
        <script type="text/javascript" src="/static/legs/main.js"></script>
        {% endcompress %}
    {% endif %}
    <script>
        $(function() {
            ba.load_completed("{% url 'bond-config-updates' bond.id %}", '#completed_updates', {{bond.bonder.id}});
            ba.load_pending("{% url 'bond-config-updates' bond.id %}", '#pending_updates');

            ba.showPassword('#show-password', '#password-hidden', '#password-display', 10000);

            $('#end-poc-button').click( function() {
                $.ajax({
                    type: 'POST',
                    url: '{% url 'current:bond-detail' bond.id %}',
                    headers: {
                        'X-HTTP-Method-Override': 'PATCH',
                        'Content-Type': 'application/json'
                    },
                    data: JSON.stringify({
                        'proof_of_concept': false
                    })
                }).done( function() {
                    $('#end-poc-modal').modal('hide');
                    $('#end-poc-dialog-button').hide();
                    $('#poc-description').html('<i class="fa fa-minus"> </i>');
                    ba.messages.success('Proof of concept has ended.');
                }).fail( function(xhr, textStatus, errorThrown) {
                    if (xhr.status != 0) {
                        $('#end-poc-modal').modal('hide');
                        ba.messages.error(xhr.responseJSON);
                    }
                });
            });

            {% if bond.current_aggregator != bond.aggregator and perms.bacore.change_bond %}
                ba.messages.warning(
                        '{{ bond }} was failed over to the secondary aggregator ' +
                        '<abbr title="{{ bond.agg_failover_datetime|date:'c' }}">' +
                        '{{ bond.agg_failover_datetime }}</abbr>.'
                {% if not bond.aggregator.newly_monitored %}
                    {% if not bond.aggregator.monitor_aggfail %}
                        + ' Failover monitoring is disabled on the primary aggregator. Proceed with caution before restoring this bond to {{ bond.aggregator | escapeangular_unsafe }}.'
                    {% endif %}
                    {% if not bond.aggregator.has_failed or not bond.aggregator.monitor_aggfail %}
                        + ' <a href="#restore-primary-aggregator" id="restore-primary-aggregator-button" class="btn btn-default btn-sm">Restore to primary aggregator</a>'
                    {% endif %}
                {% else %}
                    + ' Failover monitoring was recently enabled: currently checking aggregator status.'
                {% endif %}
                );

                $('#restore-primary-aggregator-button').click( function(e) {
                    $.ajax({
                        type: 'POST',
                        url: '{% url 'current:bond-restore-to-primary-agg' bond.id %}',
                    }).done( function() {
                        $(e.target).parent().hide();
                        ba.messages.success('{{ bond }} has been restored to the primary aggregator.');
                    });
                });
            {% endif %}

            {% if not bond.current_aggregator.supports_dynamic_routing and bond.space.private_wan.enabled and bond.space.private_wan.get_mode_display != bond.space.private_wan.MODES.with_pwan_routers %}
                ba.messages.error(
                    'The private WAN mode for this bond\'s space is not ' +
                    'supported by the version of bonding on its current ' +
                    'aggregator. As a result, this bond will be unable to ' +
                    'route traffic to the private WAN. Either upgrade the ' +
                    'aggregator to 6.5 or newer or change the private WAN ' +
                    'mode to "With private WAN routers" to resolve this.'
                );
            {% endif %}

            {% if bond.space.private_wan.enabled and bond.has_protocol_outside_pwan %}
                ba.messages.warning(
                    'This bond is in a private WAN space but has at least one dynamic routing protocol defined as outside of the private WAN. ' +
                    'Aggregators may classify dynamically learned routes from bonds in private WAN spaces to be included in private WAN. ' +
                    'When private WAN is enabled, non private WAN routes should be either statically defined or peered only on LAN ports.'
                );
            {% endif %}

            $('abbr').timeago();

            {% if bond.bonder.chart_type == 'bachart' %}
                var bonder_id = {{ bond.bonder.id }};
                var bond_id = {{ bond.id }};
                var graphs = bachart.make({
                    db: 'bonding',
                    user: '{{ settings.INFLUX_GRAPH_USERNAME }}',
                    pass: '{{ settings.INFLUX_GRAPH_PASSWORD }}',
                    reporting_interval: {{ bond.bonder.metric_reporting_interval }},
                    collection_interval: {{ bond.bonder.metric_collection_interval }}
                });

                graphs.add({
                    chart_id: '#chart_tunnel_data',
                    series: [
                        {name: 'bits received', measurement: 'tunnel_bytes', tags: {node: bonder_id, tunnel: bond_id}, value: 'rx', sign: 'negative', color_increment: 0},
                        {name: 'bits sent', measurement: 'tunnel_bytes', tags: {node: bonder_id, tunnel: bond_id}, value: 'tx', sign: 'positive', color_increment: 1},
                    ],
                    stacksigned: true,
                    type: 'bits/sec'
                });

                graphs.add({
                    chart_id: '#chart_tunnel_latency',
                    series: [
                        {name: 'average', measurement: 'tunnel_latency', tags: {node: bonder_id, tunnel: bond_id}, value: 'mean', width: 3, color_increment: 0},
                        {name: 'jitter', measurement: 'tunnel_latency', tags: {node: bonder_id, tunnel: bond_id}, value: 'mdev', width: 1, color_increment: 1},
                    ],
                    min: 0,
                    step: true,
                    type: 'time',
                    collection_interval: 60,  // Tunnel latency is always every minute
                    timeframes: {
                        '15m': {group_by_enabled: false},
                        '1h': {group_by_enabled: false},
                        '6h': {group_by_enabled: false},
                        '1d': {group_by_multiplier: 4},
                        '1w': {group_by_multiplier: 28},
                        '1m': {group_by_multiplier: 120},
                        '1y': {group_by_multiplier: 1460},
                    },
                });

                {% if bond.classification_profile %}
                graphs.add({
                    chart_id: '#chart_tunnel_bypass',
                    series: [
                        {% for leg in bond.leg_set.all %}
                        {name: 'leg {{ leg.id }} bits received', note: '{{ leg.note|escapejs }}', measurement: 'classification', tags: {node: bonder_id, link: {{ leg.id }}, target: 'tunnel-bypass', direction: 'rx'}, value: 'bytes', sign: 'negative', color_increment: 0},
                        {name: 'leg {{ leg.id }} bits sent', note: '{{ leg.note|escapejs }}', measurement: 'classification', tags: {node: bonder_id, link: {{ leg.id }}, target: 'tunnel-bypass', direction: 'tx'}, value: 'bytes', sign: 'positive', color_increment: 1},
                        {% endfor %}
                    ],
                    aggregator: 'non_negative_derivative',
                    stacksigned: true,
                    type: 'bits/sec'
                });
                {% endif %}

                graphs.add({
                    chart_id: '#chart_link_data',
                    series: [
                        {% for leg in bond.leg_set.all %}
                        {name: 'leg {{ leg.id }} bits received', note: '{{ leg.note|escapejs }}', measurement: 'link_data_bytes', tags: {node: bonder_id, tunnel: bond_id, link: {{ leg.id }}}, value: 'rx', sign: 'negative', color_increment: 0},
                        {name: 'leg {{ leg.id }} bits sent', note: '{{ leg.note|escapejs }}', measurement: 'link_data_bytes', tags: {node: bonder_id, tunnel: bond_id, link: {{ leg.id }}}, value: 'tx', sign: 'positive', color_increment: 1},
                        {% endfor %}
                    ],
                    stacksigned: true,
                    type: 'bits/sec'
                });

                graphs.add({
                    chart_id: '#chart_link_latency',
                    series: [
                        {% for leg in bond.leg_set.all %}
                        {name: 'leg {{ leg.id }} average', note: '{{ leg.note|escapejs }}', measurement: 'link_latency', tags: {node: bonder_id, tunnel: bond_id, link: {{ leg.id }}}, value: 'mean', width: 3, color_increment: 0},
                        {name: 'leg {{ leg.id }} jitter', note: '{{ leg.note|escapejs }}', measurement: 'link_latency', tags: {node: bonder_id, tunnel: bond_id, link: {{ leg.id }}}, value: 'stdev', width: 1, color_increment: 1},
                        {% endfor %}
                    ],
                    min: 0,
                    type: 'time'
                });

                {% if bond.bonder.version < '2015.4' %}
                graphs.add({
                    chart_id: '#chart_link_packetloss',
                    series: [
                        {%  for leg in bond.leg_set.all %}
                        {name: 'leg {{ leg.id }} pkt loss', note: '{{ leg.note|escapejs }}', measurement: 'link_packet_loss_legacy', tags: {node: bonder_id, tunnel: bond_id, link: {{leg.id}}}, value: 'percent'},
                        {% endfor %}
                    ],
                    type: 'percent',
                    step: true,
                    max: 100,
                    aggregator: '',
                    collection_interval: 300  // Packet loss is always every 5 minutes
                });
                {% else %}
                graphs.add({
                    chart_id: '#chart_link_packetloss',
                    series: [
                        {%  for leg in bond.leg_set.all %}
                        {name: 'leg {{ leg.id }} upstream pkt loss', note: '{{ leg.note|escapejs }}', measurement: 'link_packet_loss',  tags: {node: bonder_id, tunnel: bond_id, link: {{leg.id}}}, value: 'value'},
                        {name: 'leg {{ leg.id }} downstream pkt loss', note: '{{ leg.note|escapejs }}', measurement: 'link_packet_loss',  tags: {node: [bonder_id, '<>'], tunnel: bond_id, link: {{leg.id}}}, value: 'value'},
                        {% endfor %}
                    ],
                    type: 'percent',
                    dyn_ymax: true,
                    dyn_ymax_threshold: 10,
                    dyn_ymax_def: 15,
                    dyn_ymax_cap: 100,
                    aggregator: 'mean',
                });
                {% endif %}

                graphs.add({
                    chart_id: '#chart_link_statechanges',
                    series: [
                        {%  for leg in bond.leg_set.all %}
                        {name: 'leg {{ leg.id }} state changes', note: '{{ leg.note|escapejs }}', measurement: 'link_state_changes', tags: {node: bonder_id, tunnel: bond_id, link: {{leg.id}}}, value: 'value'},
                        {% endfor %}
                    ],
                    min: 0,
                    type: 'value',
                    step: true,
                    aggregator: 'max'
                });

                {% if bond.can_have_qos_charting_data %}
                    graphs.add({
                        chart_id: '#chart_qos',
                        series: [
                            {% for tc in bond.qos_profile.trafficclass_set.all %}
                                {
                                    name: '{{ tc.comment | escapejs }} received',
                                    measurement: 'qos',
                                    tags: {
                                        node: [bonder_id, '<>'],
                                        bond: bond_id,
                                        id: {{ tc.id }}
                                    },
                                    value: 'bytes',
                                    sign: 'negative',
                                    color_increment: 0
                                },
                                {
                                    name: '{{ tc.comment | escapejs }} sent',
                                    measurement: 'qos',
                                    tags: {
                                        node: bonder_id,
                                        bond: bond_id,
                                        id: {{ tc.id }}
                                    },
                                    value: 'bytes',
                                    sign: 'positive',
                                    color_increment: 1
                                },
                            {% endfor %}
                        ],
                        aggregator: 'non_negative_derivative',
                        stacksigned: true,
                        type: 'bits/sec'
                });
                {% endif %}

                {% if bond.has_cell_legs %}
                    graphs.add({
                        chart_id: '#chart_link_mobilebroadbandquality',
                        series: [
                            {%  for leg in bond.mobilebroadband_legs %}
                                {% if leg.link_mode != 'offline' %}
                                    {name: 'leg {{ leg.id }} signal quality', note: '{{ leg.note|escapejs }}', measurement: 'link_signal', tags: {node: bonder_id, tunnel: bond_id, link: {{leg.id}}}, value: 'quality'},
                                {% endif %}
                            {% endfor %}
                        ],
                        min: 0,
                        max: 100,
                        type: 'percent',
                    });
                {% endif %}

                {% if perms.banode.view_bonder %}
                graphs.add({
                    chart_id: '#chart_cpu',
                    series: [
                        {name: 'steal', measurement: 'aggregation_cpu_average', tags: {node: bonder_id}, value: 'steal'},
                        {name: 'softirq', measurement: 'aggregation_cpu_average', tags: {node: bonder_id}, value: 'softirq'},
                        {name: 'wait', measurement: 'aggregation_cpu_average', tags: {node: bonder_id}, value: 'wait'},
                        {name: 'nice', measurement: 'aggregation_cpu_average', tags: {node: bonder_id}, value: 'nice'},
                        {name: 'system', measurement: 'aggregation_cpu_average', tags: {node: bonder_id}, value: 'system'},
                        {name: 'user', measurement: 'aggregation_cpu_average', tags: {node: bonder_id}, value: 'user'},
                    ],
                    stacksigned: true,
                    type: 'percent',
                    max: 100,
                    columns: 2
                });
                {% endif %}

                cpu_cores_charts({
                    chart: graphs,
                    db: 'bonding',
                    user: '{{ settings.INFLUX_GRAPH_USERNAME }}',
                    pass: '{{ settings.INFLUX_GRAPH_PASSWORD }}',
                    node_id: bonder_id,
                });

                graphs.run({{ settings.BACHART_REFRESH_INTERVAL }});
            {% endif %}

        });
    </script>
{% endblock %}

{% block title %}
    {{ bond.bonder.name | escapejs }} {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    <li><a href="{% url 'bonds' %}">Bonds</a></li>
    <li>{{ bond.bonder.name | escapeangular_unsafe }}</li>
{% endblock %}

{% block content %}
    <div ng-controller="BondCtrl" ng-init="
        init({
            apiurl: '{% url 'current:bond-detail' bond.id %}',
            metrics_user: '{{ settings.INFLUX_GRAPH_USERNAME }}',
            metrics_password: '{{ settings.INFLUX_GRAPH_PASSWORD }}'
        })
    ">

        {% if perms.baspeedtest.view_bondtuner %}
        <div ng-cloak ng-if="latest_tuning.bond !== undefined" class="alert alert-info" role="alert">
            <div ng-if="latest_tuning.status === 'scheduled'">
                <div ng-if="latest_tuning.schedule === 'immediate'">
                    {{ bond }} is scheduled to be automatically tuned now and the process will begin shortly.
                    {% verbatim %}
                    <a class="btn btn-default" ng-click="cancelCheck()">Cancel tuning</a>
                    {% endverbatim %}
                </div>
                <div ng-if="latest_tuning.schedule === 'online'">
                    {{ bond }} is scheduled to be automatically tuned once all active legs are online.
                    {% verbatim %}
                    <a class="btn btn-default" ng-click="cancelCheck()">Cancel tuning</a>
                    {% endverbatim %}
                </div>
                <div ng-if="latest_tuning.schedule === 'timer'">
                    {{ bond }} is scheduled to be automatically tuned {% verbatim %}{{ latest_tuning.schedule_at | date:'MMM-dd h:mm a' }}.{% endverbatim %}
                    {% verbatim %}
                    <a class="btn btn-default" ng-click="cancelCheck()">Cancel tuning</a>
                    {% endverbatim %}
                </div>
            </div>
            <div ng-if="latest_tuning.status === 'running'">
                {{ bond }} is being automatically tuned. Network service will be interrupted occasionally and bond settings cannot be changed until this process is complete.
                {% verbatim %}
                <a class="btn btn-default" ng-click="cancelCheck()">Cancel tuning</a>
                {% endverbatim %}
            </div>
            <div ng-if="latest_tuning.status === 'tuned'">
                {{ bond }} has been tuned automatically but the configuration recommendations have not yet been accepted.
                {% verbatim %}<a class="alert-link" ng-href="settingscheck/{{ latest_tuning.id }}/">View recommendations.</a>{% endverbatim %}
            </div>
        </div>
        {% endif %}
        {% if perms.baspeedtest.view_legtuner %}
        <div ng-cloak ng-if="latest_tuning.leg !== undefined"  class="alert alert-info" role="alert">
            <div ng-if="latest_tuning.status === 'running'">
                Leg {% verbatim %}{{ latest_tuning_leg_id }}{% endverbatim %} is being automatically tuned. Bond settings cannot be changed until this process is complete.
                {% verbatim %}
                <a class="btn btn-default" ng-click="cancelCheck()">Cancel tuning</a>
                {% endverbatim %}
            </div>
            <div ng-if="latest_tuning.status === 'tuned'">
                Leg {% verbatim %}{{ latest_tuning_leg_id }}{% endverbatim %} has been tuned automatically but the configuration recommendations have not yet been accepted.
                {% verbatim %}<a class="alert-link" ng-href="legs/{{ latest_tuning_leg_id }}/speedcheck/{{ latest_tuning.id }}/">View recommendations.</a>{% endverbatim %}
            </div>
        </div>
        {% endif %}

        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-12">
                        <h1 id="bonder">{{ bond.bonder.name | escapeangular_unsafe }}</h1>
                        <div class="btn-toolbar">
                            <div class="btn-group" {% verbatim %} ng-attr-title="{{ hasActiveTuning() ? 'Action disabled because the bond or a leg is being tuned. Try again when the tuning job is complete.' : '' }}"{% endverbatim %}>
                                {% if perms.bacore.change_bond %}
                                <a href="{% url 'bond-edit' bond.id %}"
                                   id="edit"
                                   class="btn btn-default"
                                   ng-class="{disabled: hasActiveTuning()}"
                                >
                                    <i class="fa fa-pencil-square-o"></i> Edit
                                </a>
                                {% endif %}
                                {% if perms.bacore.delete_bond %}
                                <button class="btn btn-default dropdown-toggle"
                                        id="edit-dropdown-toggle"
                                        data-toggle="dropdown"
                                        ng-class="{disabled: hasActiveTuning()}"
                                >
                                    <b class="fa fa-caret-down"></b>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href ng-click="popupDeleteBondModal()"><i class="fa fa-trash-o"></i> Delete</a></li>
                                    {% include "bacore/bonds/details_partials/_delete_bond_modal.html" %}
                                </ul>
                                {% endif %}
                            </div>
                            {% if bond.valid_proof_of_concept %}
                                <a href="#end-poc-modal" id="end-poc-dialog-button" class="btn btn-default" data-toggle="modal"><i class="fa fa-flask"></i> End proof of concept</a>
                            {% endif %}
                            {% if perms.bacore.view_bond and perms.bacore.view_leg and perms.baspeedtest.view_speedtest %}
                                <a href="{% url 'bond-speed-tests' bond.id %}" class="btn btn-default"><i class="fa fa-road"></i> Speed tests</a>
                            {% endif %}
                            {% if has_tuned %}
                            <a href="{% url 'tuning-list' bond.id %}" class="btn btn-default"><i class="fa fa-wrench"></i> Tunings</a>
                            {% endif %}
                            <a ng-cloak ng-hide="global.branding.parent_support_email === ''" ng-href="mailto:{% verbatim %}{{ global.branding.parent_support_email }}{% endverbatim %}?subject={% email_prefix %}{{ bond.id }} - {{ bond }} %3Cshort description of problem%3E&body=Bond: {{ bond.id }} - {{ bond }}%0D%0ADescribe the problem:%0D%0ATroubleshooting steps already taken:%0D%0AWhat date and time did the issue begin?%0D%0AWhat steps can be taken to reproduce the problem?%0D%0A" class="btn btn-default"><i class="fa fa-envelope"></i> Support</a>
                            {% if perms.banode.view_bonder %}
                                <a href="{% url 'node-details' bond.bonder.id %}" class="btn btn-default"><i class="fa fa-hdd-o"></i> Node details</a>
                            {% endif %}
                            <button id="bond-collapse-all" class="btn btn-default">
                                <b class="fa fa-minus-square"></b> Collapse all
                            </button>
                            <button id="bond-expand-all" class="btn btn-default" style="display: none;">
                                <b class="fa fa-plus-square"></b> Expand all
                            </button>
                            {% if perms.bacore.perform_bond_actions or perms.baspeedtest.add_bondtuner %}
                            <div class="btn-group" ng-show="bond" {% verbatim %} ng-attr-title="{{ hasActiveTuning() ? 'Action disabled because the bond or a leg is being tuned. Try again when the tuning job is complete.' : '' }}"{% endverbatim %}>
                                <button
                                   class="btn btn-default dropdown-toggle"
                                   data-toggle="dropdown"
                                   ng-class="{disabled: hasActiveTuning()}"
                                   ng-attr-title="hasActiveTuning() ? 'Action disabled because the bond or a leg is being tuned. Try again when the tuning job is complete.' : ''"
                                >
                                    Actions
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    {% if perms.bacore.perform_bond_actions %}
                                    <li><a href ng-click="restartBond()">Restart</a></li>
                                    <li ng-show="hasCapability('MTU_DETECTION') && bond.leg_mtu_detection"><a href="javascript:void(null)" ng-click="detectLegMTUs()">Detect leg MTUs</a></li>
                                    <li ng-show="!(hasCapability('MTU_DETECTION') && bond.leg_mtu_detection)" class="disabled"><a>Detect leg MTUs</a></li>
                                    {% endif %}
                                    {% if perms.baspeedtest.add_bondtuner %}
                                    <li ng-show="hasCapability('SCHEDULE_TUNING') && !bond.tuning.status">
                                        {% include "bacore/bonds/details_partials/_tune_bond_modal.html" %}
                                        <a href="" ng-click="popupTuneBondSettingsModal()">Tune bond settings</a>
                                    </li>
                                    <li ng-show="!(hasCapability('SCHEDULE_TUNING') && !bond.tuning.status)" class="disabled"><a>Tune bond settings</a></li>
                                    {% endif %}
                                    {% if bond.replify_enabled %}
                                       <li ng-show="space.replify_enterprise_manager"><a ng-href="https://{% verbatim %}{{ space.replify_enterprise_manager }}{% endverbatim %}" target="_blank">Replify Enterprise Manager</a></li>
                                       <li ng-show="!bond.replify_proof_of_concept_start_date && expiredReplifyPOC()"><a href ng-click="startReplifyPOC()">Start Replify POC</a></li>
                                       <li ng-show="bond.replify_proof_of_concept_start_date && !expiredReplifyPOC()"><a href ng-click="endReplifyPOC()">End Replify POC</a></li>
                                    {% endif %}
                                </ul>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading" id="configuration"><h2>Configuration</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                            <div class="panel-body panel-collapse">
                                <div>
                                    {% include "bacore/bonds/details_partials/_bond_configuration.html" %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        {% if perms.banode.view_bonder %}
                        <div class="panel panel-default">
                            <div class="panel-heading" id="details"><h2>Details</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                            <div class="panel-body panel-collapse">
                                <div>
                                    {% include "bacore/bonds/details_partials/_bond_detail.html" %}
                                </div>
                            </div>
                        </div>
                        {% endif %}
                        <div class="panel panel-default">
                            <div class="panel-heading" id="status"><h2>Status</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                            <div class="panel-body panel-collapse">
                                <div>
                                    {% include "bacore/bonds/details_partials/_bond_status.html" %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {% if perms.bacore.view_leg or perms.bacore.view_connectedip or perms.bacore.view_cpenatip or perms.bacore.view_route or perms.bacore.view_interface %}
                    <div class="panel panel-default">
                        <div class="panel-heading" id="routing"><h2>Network details</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                        <div class="panel-body panel-collapse">
                            <div>
                                <app-root bond_id="{{ bond.id }}">Loading...</app-root>
                            </div>
                        </div>
                    </div>
                {% endif %}

                {% if perms.bacore.view_bond %}
                <div class="panel panel-default">
                    <div class="panel-heading" id="updates">
                        <h2>Updates</h2>
                        <i class="fa fa-caret-up fa-lg pull-right"> </i>
                    </div>
                    <div class="panel-body panel-collapse">
                        <div>
                            {% include "bacore/bonds/details_partials/_updates.html" %}
                        </div>
                    </div>
                </div>
                {% endif %}

                <div class="panel panel-default">
                    <div class="panel-heading" id="performance"><h2>Performance</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                    <div class="panel-body panel-collapse">
                        {% if bond.bonder.chart_type == 'bachart' %}
                            {% include "bacore/bonds/details_partials/_bachart.html" %}
                        {% else %}
                            <div>Charts will be shown when the bonder connects to the management server.</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        {% if bond.valid_proof_of_concept %}
            <!-- Modal: End proof of concept -->
            <div id="end-poc-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h3>End proof of concept</h3>
                        </div>
                        <div class="modal-body">
                            <p>
                                Are you sure you want to end proof of concept for
                                <strong>{{ bond }}</strong>? You will be billed for this
                                bond in the next billing cycle.
                            </p>
                            <p>
                                This cannot be undone except by contacting your sales representative.
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
                            <button class="btn btn-primary btn-danger" id="end-poc-button">End proof of concept</button>
                        </div>
                    </div>
               </div>
            </div>
        {% endif %}
{% endblock %}

{% block nagios-footer %}
    <a href="{% url 'nagios-bond' bond.id %}?key={{ bond.bonder.key }}" id="nagios-link"><i class="fa fa-fire"></i> nagios</a>
{% endblock %}

{% block api-footer %}
    <a href="{% url 'current:bond-detail' bond.id %}" id="api-link"><i class="fa fa-code"></i> {% url 'current:bond-detail' bond.id %}</a>
{% endblock %}