<div class="capabilitiesEdit" ng-class="{ busy: $ctrl.isBusy }">
    <div
        class="chip"
        ng-repeat="capability in $ctrl.availableCapabilities"
        ng-if="$ctrl.capabilitiesSet[capability.id]"
    >
        <span
            class="capability-name"
            title="{{ capability.description }} {{ ($ctrl.isIncludedInRole(capability) ? ('<br/><br/>' + ('UsersManager_IncludedInUsersRole'|translate)): '') }}"
        >
            {{ capability.category }}: {{ capability.name }}
        </span>
        <span
            class="icon-close"
            ng-if="!$ctrl.isIncludedInRole(capability)"
            ng-click="$ctrl.capabilityToAddOrRemoveId = capability.id; $ctrl.onToggleCapability(false)"
        ></span>
    </div>

    <div piwik-field uicontrol="expandable-select"
         name="add_capability"
         full-width="true"
         ng-change="$ctrl.onToggleCapability(true)"
         ng-model="$ctrl.capabilityToAddOrRemoveId"
         options="$ctrl.availableCapabilitiesGrouped"
         data-disabled="$ctrl.isBusy"
         ng-if="$ctrl.availableCapabilitiesGrouped.length"
         class="addCapability"
    >
    </div>

    <div class="ui-confirm confirmCapabilityToggle modal">
        <div class="modal-content">
            <h2 ng-if="$ctrl.isAddingCapability" piwik-translate="UsersManager_AreYouSureAddCapability">
                <strong>{{ $ctrl.userLogin }}</strong>::<strong>{{ $ctrl.capabilityToAddOrRemove.name }}</strong>::<strong>{{ $ctrl.siteName }}</strong>
            </h2>
            <h2 ng-if="!$ctrl.isAddingCapability" piwik-translate="UsersManager_AreYouSureRemoveCapability">
                <strong>{{ $ctrl.capabilityToAddOrRemove.name }}</strong>::<strong>{{ $ctrl.userLogin }}</strong>::<strong>{{ $ctrl.siteName }}</strong>
            </h2>
        </div>
        <div class="modal-footer">
            <a href="" class="modal-action modal-close btn" ng-click="$ctrl.toggleCapability()">{{:: 'General_Yes'|translate }}</a>
            <a href="" class="modal-action modal-close modal-no" ng-click="$ctrl.capabilityToAddOrRemove = null; $ctrl.capabilityToAddOrRemoveId = null">
                {{:: 'General_No'|translate }}
            </a>
        </div>
    </div>
</div>
