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

    <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 && 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="'CustomJs'"></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" class="wizdom-fixed-cell" style="height: 100%; display: block;"
                     ui-ace="{useWrapMode : true, showGutter: true,
                              theme:'monokai', mode: 'javascript',
                              showPrintMargin: false,
                              rendererOptions: {maxLines: 1000}}"
                     ng-model="vm.currentTemplate.content">
                </div>
            </div>
        </div>
    </div>
</div>
