<div class="modal-header">
    <button type="button"
            class="close closebtn"
            data-ng-click="vm.dialog.close()"
            aria-hidden="true">
        &times;
    </button>
    <h1 class="modal-title">
        {{'Link collection' | translate}}
    </h1>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-sm-12">
            <ul class="nav nav-tabs">
                <li role="presentation"
                    ng-class="{ active: vm.dialog.isActive('editview')}">
                    <a href=""
                       ng-click="vm.dialog.changeView('editview')">
                        {{'Properties' | translate}}
                    </a>
                </li>
                <li role="presentation"
                    ng-class="{ active: vm.dialog.isActive('editpredefinedlinks')}">
                    <a href=""
                       ng-click="vm.dialog.changeView('editpredefinedlinks')">
                        {{'Predefined links' | translate}}
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 wizdom-link-collection">
            <!--edit view-->
            <div ng-if="vm.dialog.mode == 'editview'">
                <form role="form">
                    <div class="form-group">
                        <label class="control-label">
                            {{'Template' | translate}}
                        </label>
                        <wizdom365-template-picker template-url="vm.webpartProperties.templateUrl"
                                                   directory-path="PersonalLink/Templates/ViewTemplates">
                        </wizdom365-template-picker>
                    </div>

                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="vm.webpart.allowPersonalLinks">
                                {{'Allow personal links' | translate}}
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="vm.webpart.allowDeleteLinks">
                                {{'Allow user to delete predefined links' | translate}}
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="vm.webpart.allowSortLinks">
                                {{'Allow user to sort predefined links' | translate}}
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="vm.webpart.allowSortLinkCategories">
                                {{'Allow user to sort link categories' | translate}}
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <!--edit predefinedlinks-->
            <div ng-if="vm.dialog.mode == 'editpredefinedlinks'">
                <wizdom365-edit-linklist is-admin="true"
                                         viewid="{{vm.webpart.viewId}}"
                                         create-categories="true"
                                         category-datasource="vm.webpart.categories" access-options="vm.webpart">
                </wizdom365-edit-linklist>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-default wiz-btn-padding" ng-click="vm.dialog.save();">{{'Close' | translate}}</button>
</div>