<div data-element="editor-templates" ng-controller="Umbraco.Editors.Templates.EditController as vm">

    <umb-load-indicator ng-if="vm.page.loading"></umb-load-indicator>

   <form name="contentForm"
      ng-submit="vm.save()"
      novalidate
      val-form-manager>

        <umb-editor-view ng-if="!vm.page.loading">

            <umb-editor-header
                name="vm.template.name"
                alias="vm.template.alias"
                key="vm.template.key"
                description="vm.template.virtualPath"
                description-locked="true"
                hide-icon="false"
                editorfor="vm.header.editorfor"
                setpagetitle="vm.header.setPageTitle">
            </umb-editor-header>

            <umb-editor-container>
                <umb-box>
                    <umb-box-content>

                        <div class="flex" style="margin-bottom: 30px;">

                            <div class="flex">

                                <div ng-class="{'btn-group': vm.template.masterTemplateAlias}" style="margin-right: 10px;">

                                    <button type="button"
                                            data-element="button-masterTemplate"
                                            class="btn umb-button__button umb-button--xs umb-outline"
                                            style="font-size: 14px;"
                                            ng-click="vm.openMasterTemplateOverlay()">
                                        <span class="bold"><localize key="template_mastertemplate">Master template</localize>:</span>
                                        <span style="margin-left: 5px;">
                                            <span ng-if="vm.template.masterTemplateAlias">{{ vm.getMasterTemplateName(vm.template.masterTemplateAlias, vm.templates) }}</span>
                                            <span ng-if="!vm.template.masterTemplateAlias"><localize key="template_noMaster">No master</localize></span>
                                        </span>
                                    </button>

                                    <button type="button"
                                            class="btn umb-button__button umb-button--xs dropdown-toggle umb-button-group__toggle flex-inline items-center"
                                            style="font-size: 14px; height: 100%;"
                                            localize="title"
                                            title="@general_remove"
                                            ng-if="vm.template.masterTemplateAlias"
                                            ng-click="vm.removeMasterTemplate()">
                                        <umb-icon icon="icon-wrong" class="icon"></umb-icon>
                                    </button>

                                </div>

                            </div>

                            <div class="flex" style="margin-left: auto;">

                                <umb-button-group
                                    style="margin-right: 5px;"
                                    default-button="vm.page.insertDefaultButton"
                                    sub-buttons="vm.page.insertSubButtons"
                                    size="xs">
                                </umb-button-group>

                                <umb-button
                                    style="margin-right: 5px;"
                                    alias="queryBuilder"
                                    type="button"
                                    size="xs"
                                    action="vm.openQueryBuilderOverlay()"
                                    icon="icon-wand"
                                    label-key="template_queryBuilder"
                                    add-ellipsis="true">
                                </umb-button>

                                <umb-button
                                    alias="sections"
                                    type="button"
                                    size="xs"
                                    action="vm.openSectionsOverlay()"
                                    icon="icon-indent"
                                    label-key="template_insertSections"
                                    add-ellipsis="true">
                                </umb-button>

                            </div>

                        </div>

                        <div
                            data-element="code-editor"
                            auto-scale="85"
                            umb-ace-editor="vm.aceOption"
                            model="vm.template.content">
                        </div>
                    </umb-box-content>
                </umb-box>

            </umb-editor-container>

            <umb-editor-footer>

                <umb-editor-footer-content-left>

                    <umb-keyboard-shortcuts-overview
                        model="vm.page.keyboardShortcutsOverview"
                        show-overlay="vm.showKeyboardShortcut"
                        on-close="vm.closeShortcuts()">
                    </umb-keyboard-shortcuts-overview>

                </umb-editor-footer-content-left>

            <umb-editor-footer-content-right>

                <umb-button
                    ng-if="model.infiniteMode"
                    type="button"
                    button-style="link"
                    label-key="general_close"
                    shortcut="esc"
                    action="vm.close()">
                </umb-button>

                <umb-button
                    alias="save"
                    type="submit"
                    button-style="success"
                    state="vm.page.saveButtonState"
                    shortcut="ctrl+s"
                    label="Save"
                    label-key="buttons_save">
                </umb-button>

            </umb-editor-footer-content-right>

         </umb-editor-footer>

        </umb-editor-view>
    </form>

</div>
