<div class="template-editor">
    <div class="wizdom-middle-nav full-height" style="padding-top: 0">
        <div class="wizdom-middle-nav-inside">
            <div class="wizdom-middle-toolbar">
                <button class="btn btn-primary"
                        ng-click="vm.addFile();">
                    {{'New' | translate}}
                </button>
            </div>

            <ul class="nav nav-stacked">
                <li role="presentation"
                    class="wizdom-subcategory-title"
                    ng-repeat="file in vm.files">
                    <a href=""
                        ng-class="{'active' : file === vm.currentFile}"
                        ng-click="vm.selectFile(file)">
                        <span>
                            {{file.name}}
                        </span>
                        <span class="badge"
                            ng-class="{'view-templates-badge-enabled': file.enabled === true,
                            'view-templates-badge-disabled': file.enabled === false}">
                            {{(file.enabled ? "Enabled" : "Disabled") | translate}}
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="wizdom-editor" ng-show="vm.currentFile">
        <div class="toolbar">
            <span class="template-path">
                {{vm.currentFile.path}}
            </span>
            <span class="template-buttons">
                <button class="btn btn-success"
                        ng-click="vm.saveFile(vm.currentFile);">
                    {{'Save' | translate}}
                </button>
                <button class="btn btn-danger"
                        ng-click="vm.deleteFile(vm.currentFile);">
                    {{'Delete' | translate}}
                </button>
                <!--<button class="btn"
                    ng-class="{'btn-info': vm.currentFile.enabled == false,
                                'btn-warning': vm.currentFile.enabled == true }"
                    ng-show="vm.currentFile"
                    ng-click="vm.toggleFileState(vm.currentFile, !vm.currentFile.enabled);">
                {{(vm.currentFile.enabled ? "Disable" : "Enable") | translate}}
            </button>-->
            </span>
        </div>

        <div class="main">
            <div class="wizdom-flex-row" style="display: block; height: 100%;"
                ui-ace="vm.aceOptions"
                ng-show="vm.currentFile"
                ng-model="vm.currentFile.content">
            </div>
        </div>
    </div>
</div>
