<div class="faqEditWebpart">
    <div class="modal-header">
        <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
        <h1 class="modal-title">{{'FAQ' | translate}}</h1>
    </div>
    <div class="modal-body">
        <div wizdom365-spinner="" loading="loading"></div>
        <div ng-hide="loading">
            <div class="row">
                <div class="col-sm-12">
                    <div class="link-sortable link-collection-content">
                        <div class="form-group">
                            <label class="control-label">{{'Template' | translate}}</label>
                            <wizdom365-template-picker template-url="webpartProperties.templateUrl" directory-path="FAQ/Templates/ViewTemplates"></wizdom365-template-picker>
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{'Show questions in dialog' | translate}}</label>
                            <br />
                            <wizdom365-toggle ng-model="webpartProperties.useDialog" onstyle="toggleOn" offStyle="toggleOff" ng-change="changed()" on="{{'Yes' | translate}}" off="{{'No' | translate}}"></wizdom365-toggle>
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{'Use shared FAQ set' | translate}}</label>
                            <br />
                            <wizdom365-toggle ng-model="view.useGlobalSet" onstyle="toggleOn" offStyle="toggleOff" ng-disabled="!globalSets.length" ng-change="manageGlobalSettings()" on="{{'Yes' | translate}}" off="{{'No' | translate}}"></wizdom365-toggle>
                        </div>
                        <div ng-show="view.useGlobalSet">
                            <select data-ng-model="view.faqSet" ng-options="t.title for t in globalSets track by t.id" class="form-control"></select>
                        </div>
                        <div ng-hide="view.useGlobalSet">
                            <div class="form-group">
                                <label class="control-label">{{'Title' | translate}}</label>
                                <div class="wt-paddingTopSmall"><input type="text" class="form-control" ng-model="view.faqSet.title"></div>
                            </div>

                            <div ui-sortable="sortableOptionsCategory" class="category-container" ng-model="view.faqSet.categories">
                                <div class="link-collection-content sortable"
                                     ng-repeat="category in view.faqSet.categories track by $index">

                                    <div class="link-category">
                                        <div class="float-wrapper">
                                            <div class="pull-left">
                                                <a class="categoryLink">
                                                    <i class="glyphicon"
                                                        ng-class="category.isRoot ? 'glyphicon-list-alt' : 'glyphicon-folder-close'">
                                                    </i>
                                                    <span ng-if="!category.isRoot">
                                                        {{category.title}}
                                                    </span>
                                                    <span ng-if="category.isRoot">
                                                        {{'Uncategorized' | translate}}
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="float-wrapper">
                                            <div class="pull-right" style="padding: 5px; margin-right: 12px;">
                                                <span class="link-move-container">

                                                    <a ng-if="$index > 0"><i class="glyphicon glyphicon-arrow-up" ng-click="moveCategory($index, -1, category)"></i></a>
                                                    <a ng-if="$index < view.faqSet.categories.length - 1"><i class="glyphicon glyphicon-arrow-down" ng-click="moveCategory($index, 1, category)"></i></a>

                                                    <a ng-click="editQuestion({isTopFAQ : true},category,true)">
                                                        <i class="ms-Icon ms-Icon--Add"></i>
                                                        <!--<span class="wt-linkText ng-binding" title="{{'Add question' | translate}}">
                                                            {{'Add question' | translate}}
                                                        </span>-->
                                                    </a>
                                                </span>
                                                <a ng-hide="category.isRoot">
                                                    <i class="glyphicon glyphicon-pencil"
                                                       ng-click="editCategory(category,false)">
                                                    </i>
                                                </a>
                                                <a ng-hide="category.isRoot">
                                                    <i class="glyphicon glyphicon-trash"
                                                       ng-click="deleteCategory($index)">
                                                    </i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div ui-sortable="sortableOptions"
                                         class="categorylinks-container"
                                         ng-model="category.questions">
                                        <div class="link-container sortable"
                                             ng-repeat="question in category.questions">
                                            <div class="link">
                                                <div class="float-wrapper">
                                                    <div class="pull-left">
                                                        <i class="glyphicon glyphicon-question-sign" ng-hide="question.icon"></i>
                                                        <wizdom365-icon icon="question.icon"></wizdom365-icon>
                                                        <span ng-bind="question.question"></span>
                                                    </div>
                                                </div>
                                                <div class="float-wrapper">
                                                    <div class="pull-right">
                                                        <span class="link-move-container">
                                                            <a ng-if="$index > 0">
                                                                <i class="glyphicon glyphicon-arrow-up"
                                                                   ng-click="moveQuestion($index, -1, category)">
                                                                </i>
                                                            </a>
                                                            <a ng-if="$index < category.questions.length - 1">
                                                                <i class="glyphicon glyphicon-arrow-down"
                                                                   ng-click="moveQuestion($index, 1, category)">
                                                                </i>
                                                            </a>
                                                        </span>
                                                        <a><i class="glyphicon glyphicon-pencil" ng-click="editQuestion(question,category,false)"> </i></a>
                                                        <a><i class="glyphicon glyphicon-trash" ng-click="deleteQuestion($index,category)"></i> </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="panel-heading text-right" style="padding: 10px 25px;">
                                <button class="btn btn-default"
                                        ng-click="editCategory({},true);">
                                    {{'Add category' | translate}}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary wiz-btn-padding" ng-disabled="loading" ng-click="save();">{{'Save' | translate}}</button>
        <button class="btn btn-default wiz-btn-padding" ng-disabled="loading" ng-click="cancel();">{{"Cancel" | translate}}</button>
    </div>
</div>