<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="vm.cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title" ng-show="vm.mode == 'edit'">{{'Edit item' | translate}}</h1>
    <h1 class="modal-title" ng-show="vm.mode != 'edit'">{{'Add item' | translate}}</h1>
</div>
<div class="modal-body">
    <div class="megamenuDesignerDialog">
        <div wizdom-include="vm.template"></div>
        <div class="form-group" ng-show="vm.showLanguages && activeLanguages.length > 1">
            <label>{{'Language' | translate}}</label>
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownLanguage" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    {{vm.currentLanguageDisplayName}}&nbsp;&nbsp;<span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a ng-model="vm.currentLanguage" ng-click="vm.languageChanged()">{{'All' | translate}}</a></li>
                    <li ng-repeat="language in vm.languages | orderBy:'displayName' | filter: { active: 'true' } as activeLanguages">
                        <a ng-model="vm.currentLanguage" ng-click="vm.languageChanged(language)">{{language.displayName}}&nbsp;<i class="glyphicon glyphicon-ok" ng-show="vm.translationHasValues(language.tag)"></i></a>
                    </li>
                </ul>
                &nbsp;<i class="glyphicon glyphicon-flag" title="{{'Language settings is set' | translate}}" ng-show="vm.translationsExists"></i>
            </div>            
            <a class="cursor-pointer" ng-show="vm.translationHasValues(vm.currentLanguage)" ng-click="vm.clearLanguage()">
                {{'Remove this translation' | translate}}
            </a>
        </div>
        <div class="form-group" ng-show="vm.showAudiences">
            <label>{{'Only visible for' | translate}}</label>
            <div wizdom365-principalpicker principals="vm.audiences" mode="groups" allowmultiple="true" add-fn="vm.addAudience(principal)" remove-fn="vm.removeAudience(principal)" class="principal-picker" allowwizdomgroups="true"></div>
            <span ng-class="{'principal-picker-hint': vm.audiences && vm.audiences.length>0,'principal-picker-empty-hint': !(vm.audiences && vm.audiences.length>0)}">{{'Add one or more groups to make this element only visible for users in selected groups' | translate}}</span>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-danger" ng-click="vm.delete();" ng-show="vm.mode == 'edit'" ng-if="!vm.readOnlyMode">{{'Remove' | translate}}</button>
    <button class="btn btn-default" ng-click="vm.cancel();">{{'Cancel' | translate}}</button>
    <button class="btn btn-primary" ng-click="vm.ok();" ng-if="!vm.readOnlyMode">{{'Ok' | translate}}</button>
</div>