{% load i18n %}

{% verbatim %}
<div class="nice" ng-controller="NiceCtrl">
    <div id="{{ tabs_list_id }}" ng-tabs class="nice-tabs tabs-plugin">
{% endverbatim %}
        <ul class="tabs-list list-unstyled list-inline">
            <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#nice-catalog">{% trans 'Classes Catalog' %}</a></li>
            <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#nice-all">{% trans 'All Classes' %}</a></li>
        </ul>
{% verbatim %}


        <div class="nice-catalog tab-body" id="nice-catalog" ng-tab-body>
            <div class="nice-categories">
                <ul class="list-unstyled list-inline">
                    <li ng-repeat="category in categories track by category.id" ng-class="selectedCategory == category.id ? 'active' : ''">
                        <button ng-click="selectCategory(category.id)" class="btn btn-link">{{ category.title }}</button> <span class="category_size badge" id="category_{{ category.id }}_label">{{ category.selected.length || '' }}</span>
                    </li>
                </ul>
            </div>

            <div class="nice-classes">
                <ul class="list-unstyled">
                    <li ng-repeat="class in nice | filter:filterByCategory">
                        <label for="class_{{ class.id }}">
                            <input id="class_{{ class.id }}" type="checkbox" ng-model="class.selected" ng-change="setClasses()"/>
                            <strong>{{ class.id }}</strong> – {{ class.title }}
                            <button ng-show="class.description.length > 0" popover="{{ class.description }}" popover-title="{{ class.title }}" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-xs btn-default">···</button>
                        </label>


                    </li>
                </ul>
            </div>
        </div>

        <div class="nice-all tab-body" id="nice-all" ng-tab-body>
            <ul class="list-unstyled list-inline">
                <li ng-repeat="class in nice">
                    <label for="class_{{ class.id }}">
                        <input id="class_{{ class.id }}" type="checkbox" ng-model="class.selected" ng-change="setClasses()"/>
                        <strong>{{ class.id }}</strong> – {{ class.title }}
                        <button ng-show="class.description.length > 0" popover="{{ class.description }}" popover-title="{{ class.title }}" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-xs btn-default">···</button>
                    </label>


                </li>
            </ul>
        </div>
    </div>
    {% endverbatim %}

    {% if request.LANGUAGE_CODE == 'ru' %}
        {% verbatim %}<h5 ng-show="classes_values.length > 0">{{ GetNoun(classes, 'Выбран', 'Выбраны', 'Выбрано') }} {{ classes }}  {{ GetNoun(classes, 'класс', 'класса', 'классов') }}</h5>{% endverbatim %}
    {% else %}
        {% verbatim %}<h5 ng-show="classes_values.length > 0">Selected {{ classes }} {{ GetNoun(classes, 'сlass', 'сlasses', 'сlasses') }}</h5>{% endverbatim %}
    {% endif %}

    {% verbatim %}
    <ul class="nice-selected list-unstyled list-inline">
        <li ng-repeat="id in classes_values"><span class="label label-default"><strong>{{ nice[id-1].id }}</strong> – {{ nice[id-1].title }}</span></li>
    </ul>

</div>
{% endverbatim %}