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

{% load angular %}

{% block base %}<base href="/django/qos/inherited/{{ profile.id }}/"/>{% 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 %}
<div ng-controller="QosProfileCtrl" ng-init="
        init({
            apiurl: '{% url 'current:inherited-profile-detail' profile.id %}',
        })
    ">
    <div class="row">
        <div class="col-md-12">
            <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>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:inherited-profile-detail' profile.id %}" target="_parent" id="api-link"><i class="fa fa-code"></i> {% url 'current:inherited-profile-detail' profile.id %}</a>
{% endblock %}