<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"
                         alias-locked="vm.runtimeModeProduction"
                         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="umb-alert umb-alert--info mb3" ng-if="vm.runtimeModeProduction">
              <localize key="template_runtimeModeProduction">Content is not editable when using runtime mode <code>Production</code>.</localize>
            </div>

            <div class="flex mb3" ng-if="!vm.runtimeModeProduction">

              <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="90"
                 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 ng-if="!vm.runtimeModeProduction"
                                           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>
