{% load i18n %}

    <div class="questionset-head">

        <div ng-hide="service.project.read_only">
            <div class="help-block">
                {% blocktrans with name='{$ service.questionset.verbose_name $}' name_plural='{$ service.questionset.verbose_name_plural $}' trimmed %}
                Please fill in the form for each {{ name }}. The different {{ name_plural }} will be referred to in following questions. You can add a new {{ name }} using the green button. Once created, you can edit or delete {{ name_plural }} using the buttons in the top right corner.
                {% endblocktrans %}
            </div>

            <div class="set-buttons" ng-hide="service.values">
                <button type="button" class="btn btn-success"
                    ng-click="service.openValueSetFormModal(true)">
                    {% blocktrans with name='{$ service.questionset.verbose_name $}' %}Add {{ name }}{% endblocktrans %}
                </button>
            </div>
        </div>

        <ul class="nav nav-tabs" ng-show="service.values">
            <li ng-class="{ active: service.valuesets[set_index].values == service.values }"
                ng-repeat="set_index in service.valueset_list">


                <a href="" ng-click="service.activateValueSet(set_index)">
                    <span ng-hide="service.valuesets[set_index].values[service.questionset.attribute.id_attribute.id][0].text">
                        #{$ $index + 1 $}
                    </span>
                    <span ng-show="service.valuesets[set_index].values[service.questionset.attribute.id_attribute.id][0].text">
                        {$ service.valuesets[set_index].values[service.questionset.attribute.id_attribute.id][0].text $}
                    </span>
                </a>
            </li>
            <li ng-hide="service.project.read_only">
                <a href="" class="add-valueset" ng-click="service.openValueSetFormModal(true)">
                    {% blocktrans with name='{$ service.questionset.verbose_name $}' %}Add {{ name }}{% endblocktrans %}
                </a>
            </li>
        </ul>

        <div class="pull-right" ng-show="service.values">
            <a href="" class="fa fa-pencil"
                title="{% blocktrans with name='{$ service.questionset.verbose_name $}' %}Update {{ name }}{% endblocktrans %}"
                ng-click="service.openValueSetFormModal(false)"
                ng-show="service.questionset.attribute.id_attribute && !service.project.read_only">
            </a>
            <a href="" class="fa fa-trash"
                title="{% blocktrans with name='{$ service.questionset.verbose_name $}' %}Remove {{ name }}{% endblocktrans %}"
                ng-click="service.openValueSetDeleteModal(false)"
                ng-show="!service.project.read_only">
            </a>
        </div>

    </div>
