<div style="height: 100%;"
     class="template-editor"
     ng-controller="ModernCustomStylesController as vm"
     ng-init="vm.init()">

    <div class="template-editor row full-height" style="margin-left:0px; margin-right: 0px;">
        <div class="col-xs-3 wizdom-middle-nav full-height remove-left-padding" style="height: 100%; padding-bottom: 34px;">
            <wizdom365-spinner loading="loading"></wizdom365-spinner>
            <ul class="nav nav-stacked">

                <li role="presentation" class="wizdom-subcategory-title templates-placeholder" style="margin:0 10px 10px 10px;">
                    <div class="create-new-container">
                        <div class="save-file pull-right">
                            <button title="{{'Save' | translate}}" class="btn btn-success" ng-if="vm.saving === false" ng-show="vm.currentTemplate" ng-click="vm.saveTemplate();">{{'Save' | translate}}</button>
                            <button title="{{'Saving' | translate}}" class="btn btn-info" ng-if="vm.saving === true" ng-show="vm.currentTemplate">{{'Saving' | translate}}</button>
                        </div>
                        <div class="create-new pull-right">
                            <button title="{{'New' | translate}}" class="btn btn-primary" ng-click="vm.addTemplate();">+ {{'New' | translate}}</button>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <ul class="nav nav-tabs nav-justified">
                        <li role="presentation" ng-class="{'active' : vm.templateFilter.enabled == 'true'}">
                            <a ng-click="vm.showEnabled()" href="">{{'Enabled' | translate }}</a>
                        </li>
                        <li role="presentation" ng-class="{'active' : vm.templateFilter.enabled == 'false'}">
                            <a ng-click="vm.showDisabled()" href="">{{'Disabled' | translate }}</a>
                        </li>
                        <li role="presentation" ng-class="{'active' : !vm.templateFilter.enabled}">
                            <a ng-click="vm.showAll()" href="">{{'All' | translate }}</a>
                        </li>
                    </ul>

                    <div class="tab-content">

                        <div ng-repeat="template in vm.templates | filter:vm.templateFilter">

                            <span class="display-table" ng-class="{'active' : template === vm.currentTemplate}">
                                <i class="glyphicons glyphicons-tick pull-left" ng-show="vm.currentTemplate == template"></i>
                                <a class="wizdom-flex-column" href=""
                                   ng-class="{'active' : template === vm.currentTemplate}"
                                   ng-click="vm.selectTemplate(template)"
                                   onclick="adjustEditorColHeights();">
                                    <span class="wizdom-flex-column">
                                        {{template.name}}
                                    </span>
                                </a>
                                <span class="wizdom-fixed-column">

                                    <!-- Loading -->
                                    <span title="{{'Loading' | translate}}" ng-if="(vm.currentTemplate == template && vm.saving === true)" class="label label-click label-primary">
                                        {{'Loading' | translate}}
                                    </span>

                                    <!-- enable -->
                                    <span title="{{'Enable' | translate}}" ng-if="(vm.currentTemplate == template && vm.templateFilter.enabled) && (template.enabled === false && vm.saving === false)" class="label label-click label-info" ng-click="vm.toggleTemplateState();">
                                        {{'Enable' | translate}}
                                    </span>

                                    <!-- disable -->
                                    <span title="{{'Disable' | translate}}" ng-if="(vm.currentTemplate == template && vm.templateFilter.enabled) && (template.enabled === true && vm.saving === false)" class="label label-click label-warning" ng-click="vm.toggleTemplateState();">
                                        {{'Disable' | translate}}
                                    </span>


                                    <!-- enable all area -->
                                    <span ng-if="(!vm.templateFilter.enabled && template.enabled === false) && (vm.currentTemplate != template)" class="label label-warning action-disabled">
                                        {{'Disabled' | translate}}
                                    </span>

                                    <span title="{{'Enable' | translate}}" ng-if="(!vm.templateFilter.enabled && template.enabled === false) && (vm.currentTemplate == template && vm.saving === false)" class="label label-click label-info"
                                          ng-class="{'action-enabled' : vm.currentTemplate == template, 'action-disabled': vm.currentTemplate != template}" ng-click="vm.toggleTemplateState();">
                                        {{'Enable' | translate}}
                                    </span>

                                    <!-- disable all area-->
                                    <span ng-if="(!vm.templateFilter.enabled && template.enabled === true) && (vm.currentTemplate != template)" class="label label-info action-disabled">
                                        {{'Enabled' | translate}}
                                    </span>

                                    <span title="{{'Disable' | translate}}" ng-if="(!vm.templateFilter.enabled && template.enabled === true) && (vm.currentTemplate == template && vm.saving === false)" class="label label-click label-warning"
                                          ng-class="{'action-enabled' : vm.currentTemplate == template, 'action-disabled': vm.currentTemplate != template}" ng-click="vm.toggleTemplateState();">
                                        {{'Disable' | translate}}
                                    </span>

                                    <!-- delete in all area -->
                                    <span title="{{'Delete' | translate}}" ng-show="vm.currentTemplate == template" ng-if="!vm.templateFilter.enabled && vm.templates.length>1 && template.name != 'wizdom.css' && vm.saving === false" ng-click="vm.deleteTemplate();" class="label label-click label-danger">
                                        {{'Delete' | translate}}
                                    </span>
                                </span>
                            </span>
                        </div>
                    </div>

                </li>
            </ul>
        </div>

        <div class="col-xs-9 remove-left-padding remove-right-padding" ng-show="vm.currentTemplate" style="height: 100%;">
            <div class="display-table">
                <div class="wizdom-fixed-row toolbar">
                    <span class="configuration-dropdown">
                        <span class="hidden-md hidden-sm hidden-xs">{{'Configuration' | translate}}</span>
                        <wizdom365-specific-configuration-picker module="'ModernCustomStyling'"></wizdom365-specific-configuration-picker>
                    </span>
                </div>
                <div class="wizdom-fixed-row">
                    <div class="display-table toolbar" style="padding-right:5px;padding-left:30px;background-color:#e7e7e7;">
                        <span class="wizdom-flex-column" style="vertical-align:bottom;">
                            {{vm.currentTemplate.path}}
                        </span>
                    </div>
                </div>

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