<div class="template-editor">
    <div class="wizdom-middle-nav full-height">

        <wizdom365-spinner loading="loading"></wizdom365-spinner>

        <div class="wizdom-middle-nav-inside">
            <ul class="nav nav-stacked" ng-repeat="(group, templates) in templateGroups">
                <!--<div style="color:white;padding:5px;" ng-if="showDirectories">{{group}}</div>-->
                <li role="presentation" class="wizdom-subcategory-title" ng-if="showDirectories">
                    <a class="active">
                        <span class="display-table">
                            <span class="wizdom-flex-column">{{group}}</span>
                        </span>
                    </a>
                </li>
                <li role="presentation" class="wizdom-subcategory-title" ng-repeat="template in templates">
                    <a href=""
                       ng-class="{'active' : template === currentTemplate}"
                       ng-click="selectTemplate(template);">
                        <span>{{template.name}}</span>
                        <span class="badge"
                              ng-class="{'view-templates-badge-system': template.state === 0,
                        'view-templates-badge-custom': template.state === 1,
                        'view-templates-badge-customized': template.state === 2}">
                            {{(template.state === 0 ? 'System' : (template.state === 1 ? 'Created' : 'Customized')) | translate}}
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="wizdom-editor" ng-show="currentTemplate">
        <div class="toolbar">
            <span class="template-path">{{currentTemplate.path}}</span>
            <span class="template-buttons">
                <button class="btn btn-primary-reversed"
                        ng-if="currentTemplate && currentTemplate.state !== 0"
                        ng-click="saveTemplate();">
                    {{'Save' | translate}}
                </button>
                <button class="btn btn-default-reversed"
                        ng-show="currentTemplate && currentTemplate.state === 0 && !modernAndDisabled"
                        ng-click="customizeTemplate();">
                    {{'Customize' | translate}}
                </button>
                <button class="btn btn-primary-reversed"
                        ng-if="currentTemplate && !modernAndDisabled"
                        ng-click="saveAsTemplate();">
                    {{'Save as...' | translate}}
                </button>
                <button class="btn btn-warning"
                        ng-show="currentTemplate && currentTemplate.state === 1"
                        ng-click="deleteTemplate();">
                    {{'Delete' | translate}}
                </button>
                <button class="btn btn-default-reversed"
                        ng-disabled="currentTemplate.state !== 2"
                        ng-show="currentTemplate && currentTemplate.state !== 1"
                        ng-click="uncustomizeTemplate();">
                    {{'Uncustomize' | translate}}
                </button>
            </span>
        </div>

        <div class="main">
            <div class="wizdom-fixed-cell" style="display: block; height: 100%;" id="aceEditorContainer" ui-ace="{useWrapMode : true, showGutter: true, theme:'monokai', mode: 'html', showPrintMargin: false, rendererOptions: {maxLines: 1000}}" ng-model="currentTemplate.content" ng-if="editorMode !== 'javascript'">
            </div>
            <div class="wizdom-fixed-cell" style="display: block; height: 100%;" id="aceEditorContainer" ui-ace="{useWrapMode : true, showGutter: true, theme:'monokai', mode: 'javascript', showPrintMargin: false, rendererOptions: {maxLines: 1000}}" ng-model="currentTemplate.content" ng-if="editorMode === 'javascript'">
            </div>
        </div>
    </div>
</div>