<div class="faqEditAdministration">
    <div class="modal-header">
        <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
        <h1 class="modal-title">{{'Edit FAQ set' | translate}}</h1>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 wizdom-link-collection">
            </div>
        </div>
    </div>
    <div class="modal-body">
        <div class="link-sortable link-collection-content container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="link-sortable link-collection-content">
                                <div class="form-group">
                                    <label class="control-label">{{'Title' | translate}}</label>
                                    <div class="wt-paddingTopSmall"><input type="text" class="form-control" ng-model="faqSet.title"></div>
                                </div>

                                <div ui-sortable="sortableOptionsCategory" class="category-container" ng-model="faqSet.categories">
                                    <div class="link-collection-content sortable"
                                     ng-repeat="category in 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 < 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="glyphicon glyphicon-plus-sign"></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>
                                                        <i class='{{question.modernIcon.icon}}' style='color: {{question.modernIcon.color}}; background-color: {{question.modernIcon.backgroundColor}};'></i>
                                                        <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>
                        </div>
                        <div class="panel-footer">
                            <a ng-click="editCategory({},true);">
                                <i class="glyphicon glyphicon-plus"></i>
                                {{'Add category' | translate}}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary wiz-btn-padding" ng-click="save()">{{'Save' | translate}}</button>
        <button class="btn btn-default wiz-btn-padding" ng-click="cancel();">{{'Cancel' | translate}}</button>
    </div>
</div>