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

{% load angular %}

{% block pagescript %}
    <script>
        $('#delete-modal').on('shown', function () {
            // Adding a class when this is shown simplifies Selenium tests.
            $('#delete-modal').addClass('animation-stopped');
        });
        $('#delete-button').click( function() {
            $.ajax({
                type: 'DELETE',
                url: '{% url 'current:profile-detail' profile.id %}'
            }).done( function() {
                ba.messages.successDefer('{{ profile }} has been deleted.');
                window.location.href = '{% url 'qos-profiles' %}';
            }).fail( function(xhr, textStatus, errorThrown) {
                if (xhr.status != 0) {
                    $('#delete-modal').modal('hide');
                    ba.messages.error(xhr.responseJSON);
                }
            });
        });
    </script>
{% endblock %}

{% block title %}{{ profile.name | escapejs }} {{ block.super }}{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    <li><a href="{% url 'qos-profiles' %}" target="_parent">Quality of Service</a></li>
    <li>{{ profile.name | escapeangular_unsafe }}</li>
{% endblock %}

{% block content %}
<script type="text/ng-template" id="change_space.html">
    {% verbatim %}
    <change-space
        current-space="profile.space"
        on-space-changed-callback="handleSpaceChanged(new_space)"
        space-errors="spaceErrors"
        cs-disabled="false"
        type="QoS profile"
        modal="true"
        close-modal="spaceModal.close()"
    >
        <p>
            Select space below to move this profile to.
        </p>
    </change-space>
    {% endverbatim %}
</script>

<div ng-controller="QosProfileCtrl" ng-init="
        init({
            apiurl: '{% url 'current:profile-detail' profile.id %}',
        })
    ">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <h1 id="profile">{{ profile.name | escapeangular_unsafe }}</h1>
                    <div class="btn-toolbar">
                        {% if perms.baqos.change_profile %}
                            <a href="{% url 'qos-profile-edit' profile.id %}" target="_parent" class="btn btn-default"><i class="fa fa-pencil-square-o"></i> Edit</a>
                        {% endif %}
                        {% if perms.baqos.delete_profile %}
                            <a href="#delete-modal" class="btn btn-danger" data-toggle="modal" id="delete-dialog-button"><i class="fa fa-trash-o"></i> Delete</a>
                        {% endif %}
                        {% if perms.baqos.add_profile %}
                            <a href="{% url 'qos-profile-copy' profile.id %}" target="_parent" class="btn btn-default"><i class="fa fa-files-o"></i> Copy</a>
                        {% endif %}
                        {% if perms.bacore.view_bond %}
                            {% with profile.bond_set.count as bond_count %}
                                <a href="{% if bond_count == 0 %}javascript://{% else %}{% url 'qos-profile-bonds' profile.id %}{% endif %}" target="_parent" class="btn btn-default {% if bond_count == 0 %} disabled{% endif %}"><i class="fa fa-table"></i> Bonds ({{ bond_count }})</a>
                            {% endwith %}
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <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>
                                <dl class="dl-horizontal">
                                    <dt>Space</dt>
                                    <dd>
                                        <div ng-cloak>
                                            {% if perms.bacore.view_space %}
                                                {% verbatim %}<a ng-href="/spaces/#/{{ profile.space.key }}" target="_parent">{{ profile.space.name }}</a>{% endverbatim %}
                                                {% if perms.bacore.change_profile %}
                                                    <a href ng-click="changeSpace()"><i class="fa fa-fw fa-sitemap"> </i></a>
                                                {% endif %}
                                            {% else %}
                                                {{ profile.space.name }}
                                            {% endif %}
                                        </div>
                                    </dd>

                                    <dt>Profile ID</dt>
                                    <dd>{{ profile.id }}</dd>

                                    <dt>Profile name</dt>
                                    <dd>{{ profile.name | escapeangular_unsafe }}</dd>

                                    <dt>Overhead margin</dt>
                                    <dd>{{ profile.overhead_margin }}%</dd>
                                </dl>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading" id="traffic-classes"><h2>Traffic Classes</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                        <div class="panel-body panel-collapse">
                            <div>
                                <table class="table table-bordered table-striped table-condensed">
                                    <thead>
                                    <tr>
                                        <th>Comment</th>
                                        <th>Reserved percent</th>
                                        <th>Reserved min</th>
                                        <th>Reserved max</th>
                                        <th>Limit percent</th>
                                        <th>Limit min</th>
                                        <th>Limit max</th>
                                        <th>Default</th>
                                        <th>Leaf qdisc</th>
                                    </tr>
                                    </thead>
                                    {% for traffic_class in traffic_classes %}
                                        <tr>
                                            <td>{{ traffic_class.comment | escapeangular_unsafe }}</td>
                                            <td>{{ traffic_class.reserved_percent }}%</td>
                                            <td>{% if traffic_class.reserved_min %}{{ traffic_class.reserved_min }} Mbps{% endif %}</td>
                                            <td>{% if traffic_class.reserved_max %}{{ traffic_class.reserved_max }} Mbps{% endif %}</td>
                                            <td>{% if traffic_class.limit_percent %}{{ traffic_class.limit_percent }}%{% endif %}</td>
                                            <td>{% if traffic_class.limit_min %}{{ traffic_class.limit_min }} Mbps{% endif %}</td>
                                            <td>{% if traffic_class.limit_max %}{{ traffic_class.limit_max }} Mbps{% endif %}</td>
                                            <td><i class="fa fa-{{ traffic_class.default|yesno:'check,minus'}}"></i></td>
                                            <td>{{ traffic_class.get_leaf_qdisc_display }}</td>
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            <td colspan="9">No traffic classes.</td>
                                        </tr>
                                    {% endfor %}
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading" id="packet-filters"><h2>Packet Filters</h2><i class="fa fa-caret-up fa-lg pull-right"> </i></div>
                        <div class="panel-body panel-collapse">
                            <div>
                                <table class="table table-bordered table-striped table-condensed">
                                    <thead>
                                    <tr>
                                        <th>Traffic class</th>
                                        <th>Comment</th>
                                        <th>Protocol</th>
                                        <th>Length</th>
                                        <th>Source network</th>
                                        <th>Destination network</th>
                                        <th>Ports</th>
                                    </tr>
                                    </thead>
                                    {% for packet_filter in packet_filters %}
                                        <tr>
                                            <td>{{ packet_filter.traffic_class | escapeangular_unsafe }}</td>
                                            <td>{{ packet_filter.comment | escapeangular_unsafe }}</td>
                                            <td>{{ packet_filter.get_protocol_display|default_if_none:'' }}</td>
                                            <td>{{ packet_filter.length }}</td>
                                            <td>{{ packet_filter.source_network|default_if_none:'' }}</td>
                                            <td>{{ packet_filter.destination_network|default_if_none:'' }}</td>
                                            <td>{{ packet_filter.ports }}</td>
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            <td colspan="7">No packet filters.</td>
                                        </tr>
                                    {% endfor %}
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal: Delete profile -->
    <div id="delete-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="delete-modal">
        <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>Delete QoS profile</h3>
                </div>
                {% if profile.bond_set.count > 0 %}
                    <div class="modal-body">
                        <p>
                            Before deleting this QoS profile, assign its <a href="{% url 'qos-profile-bonds' profile.id %}" target="_parent">bonds</a> to
                            another profile.
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Dismiss</button>
                    </div>
                {% else %}
                    <div class="modal-body">
                        <p>
                            Are you sure you want to delete <strong>{{ profile | escapeangular_unsafe }}</strong>?
                            This cannot be undone.
                        </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="delete-button"><i class="fa fa-trash-o"></i> Delete</button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

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