{% extends "base.html" %}

{% comment %}© 2012, Multapplied Networks, Inc.{% endcomment %}

{% block title %}
    Quality of Service {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    <li>Quality of Service</li>
{% endblock %}

{% block content %}
    <uib-tabset>
        <uib-tab heading="Quality of Service Profiles">
            <div class="row"
                ng-controller="QosListCtrl" ng-init="init('{% url 'current:profile-list' %}')"
                ng-cloak
            >
                <div class="col-sm-12 col-lg-9">
                <div class="row">
                    <div class="col-sm-12">
                        <h1>Quality of Service Profiles</h1>
                    </div>
                </div>

                {% verbatim %}
                <div class="table-controls">
                    <div class="row">
                        <div class="col-sm-5">
                            <div class="btn-toolbar">
                                <table-options page-options="page_options" query="query" space-filter="space"></table-options>
                                {% endverbatim %}
                                {% if perms.baqos.add_profile %}
                                    <div class="btn-group">
                                        <a class="btn btn-default" href="{% url 'qos-profile-add' %}" target="_parent"><i class="fa fa-plus"></i> Add profile</a>
                                    </div>
                                {% endif %}
                                {% verbatim %}
                            </div>
                        </div>
                        <div class="col-sm-4 col-lg-5 col-sm-offset-3 col-lg-offset-2">
                            <div class="btn-toolbar">
                                <form class="form-inline">
                                    <div class="input-group full-width">
                                        <input class="form-control" type="search" ng-model="query.search" ng-model-options="{debounce: 300}" ng-change="onChangeSearch()" placeholder="Search"/>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-bordered table-striped table-condensed" cg-busy="{promise:promise,message:'Loading',backdrop:false,delay:300}">
                            <thead table-header sortparams="query.ordering">
                            <tr>
                                <th header-column name="id">ID</th>
                                <th header-column name="name">Name</th>
                                <th header-column name="space__name">Space</th>
                                <th class="nobreak"># of Bonds</th>
                                <th class="nobreak"># of Classes</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr ng-show="profiles.length === 0">
                                    <td colspan="6">No Quality of Service profiles to show.</td>
                                </tr>
                                <tr ng-repeat="profile in profiles track by profile.url">
                                    <td class="vert-align-middle"><a ng-href="/qos/{{ profile.id }}/" target="_parent">{{ profile.id }}</a></td>
                                    <td class="vert-align-middle"><a ng-href="/qos/{{ profile.id }}/" target="_parent">{{ profile.name }}</a></td>
                                    <td class="vert-align-middle">{{ profile.space.name }}</td>
                                    <td class="vert-align-middle" ng-show="profile.bonds_count !== 0">
                                        <a ng-href="/qos/{{ profile.id }}/bonds/">{{ profile.bonds_count }}</a>
                                    </td>
                                    <td class="vert-align-middle" ng-show="profile.bonds_count === 0">
                                        {{ profile.bonds_count }}
                                    </td>
                                    <td class="vert-align-middle">{{ profile.traffic_classes_count }}</td>
                                    <td>
                                        <a ng-href="/qos/{{ profile.id }}" class="btn btn-default btn-sm" title="QoS details"><i class="fa fa-search-plus"></i></a>

                                        {% endverbatim %}
                                        {% if perms.baqos.change_profile %}
                                            {% verbatim %}
                                                <a ng-href="/qos/{{ profile.id }}/edit/" class="btn btn-default btn-sm" title="Edit QoS"><i class="fa fa-pencil"></i></a>
                                            {% endverbatim %}
                                        {% endif %}
                                        {% verbatim %}

                                        {% endverbatim %}
                                        {% if perms.baqos.add_profile %}
                                            {% verbatim %}
                                                <a ng-href="/qos/{{ profile.id }}/copy/" class="btn btn-default btn-sm" title="Copy QoS"><i class="fa fa-files-o"></i></a>
                                            {% endverbatim %}
                                        {% endif %}
                                        {% verbatim %}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row" ng-if="data.results.length > 0">
                    <div class="col-md-4"><br/><br/>{{ query_stats.first_item }}-{{ query_stats.last_item }} of {{ query_stats.total_items }}</div>
                    <div class="col-md-8 text-right">
                        <uib-pagination ng-model="query.page" max-size="5" total-items="data.count" items-per-page="query.page_size" ng-change="onChangePage()"></uib-pagination>
                    </div>
                </div>
                {% endverbatim %}
                </div>
            </div>
        </uib-tab>
        <uib-tab heading="Inherited Quality of Service Profiles">
            <div class="row"
                ng-controller="InheritedQosListCtrl" ng-init="init('{% url 'current:inherited-profile-list' %}')"
                ng-cloak
            >
                <div class="col-sm-12 col-lg-9">
                <div class="row">
                    <div class="col-sm-12">
                        <h1>Inherited Quality of Service Profiles</h1>
                    </div>
                </div>

                {% verbatim %}
                <div class="table-controls">
                    <div class="row">
                        <div class="col-sm-5">
                            <div class="btn-toolbar">
                                <table-options page-options="page_options" query="query"></table-options>
                            </div>
                        </div>
                        <div class="col-sm-4 col-lg-5 col-sm-offset-3 col-lg-offset-2">
                            <div class="btn-toolbar">
                                <form class="form-inline">
                                    <div class="input-group full-width">
                                        <input class="form-control" type="search" ng-model="query.search" ng-model-options="{debounce: 300}" ng-change="onChangeSearch()" placeholder="Search"/>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-bordered table-striped table-condensed" cg-busy="{promise:promise,message:'Loading',backdrop:false,delay:300}">
                            <thead table-header sortparams="query.ordering">
                            <tr>
                                <th header-column name="id">ID</th>
                                <th header-column name="name">Name</th>
                                <th class="nobreak"># of Classes</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr ng-show="profiles.length === 0">
                                    <td colspan="6">No Quality of Service profiles to show.</td>
                                </tr>
                                <tr ng-repeat="profile in profiles track by profile.url">
                                    <td class="vert-align-middle"><a ng-href="/qos/inherited/{{ profile.id }}/">{{ profile.id }}</a></td>
                                    <td class="vert-align-middle"><a ng-href="/qos/inherited/{{ profile.id }}/">{{ profile.name }}</a></td>
                                    <td class="vert-align-middle" ng-show="profile.bonds_count === 0">
                                        {{ profile.bonds_count }}
                                    </td>
                                    <td class="vert-align-middle">{{ profile.traffic_classes_count }}</td>
                                    <td>
                                        <a ng-href="/qos/{{ profile.id }}" class="btn btn-default btn-sm" title="QoS details"><i class="fa fa-search-plus"></i></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row" ng-if="data.results.length > 0">
                    <div class="col-md-4"><br/><br/>{{ query_stats.first_item }}-{{ query_stats.last_item }} of {{ query_stats.total_items }}</div>
                    <div class="col-md-8 text-right">
                        <uib-pagination ng-model="query.page" max-size="5" total-items="data.count" items-per-page="query.page_size" ng-change="onChangePage()"></uib-pagination>
                    </div>
                </div>
                {% endverbatim %}
                </div>
            </div>
        </uib-tab>
    </uib-tabset>
{% endblock %}

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