<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<app-help-message-show
  [help_message_content]="'define.help' | i18n"
  [guild_link]="'define.help.link' | i18n"
  [module_name]="'menu.advanced.define'"
  [icon_name]="'code'"
></app-help-message-show>

<nz-divider></nz-divider>

<nz-layout style="height: 100vh; overflow: hidden">
  <nz-sider [nzTheme]="theme == 'dark' ? 'dark' : 'light'" style="height: 100%; overflow: hidden" [nzTrigger]="null">
    <app-monitor-select-list
      [loading]="menuLoading"
      [data]="appMenusArr"
      [selected]="currentApp"
      (selectedChanged)="onMenuSelectedChanged($event)"
    >
      <ng-template let-app="item" #prefix>
        <button
          *ngIf="app.hide == true || app.hide == undefined"
          nz-button
          nzSize="small"
          nz-tooltip
          [nz-tooltip]="'define.hide-true.tip' | i18n"
          nz-popconfirm
          [nzPopconfirmTitle]="'define.hide-true.confirm' | i18n"
          (nzOnConfirm)="updateAppTemplateConfig(app.value, !app.hide)"
          nzPopconfirmPlacement="bottom"
        >
          <i nz-icon nzType="eye-invisible" nzTheme="outline"></i>
        </button>
        <button
          *ngIf="app.hide == false"
          nz-button
          nzSize="small"
          nz-tooltip
          [nz-tooltip]="'define.hide-false.tip' | i18n"
          nz-popconfirm
          [nzPopconfirmTitle]="'define.hide-false.confirm' | i18n"
          (nzOnConfirm)="updateAppTemplateConfig(app.value, !app.hide)"
          nzPopconfirmPlacement="bottom"
        >
          <i nz-icon nzType="eye" nzTheme="outline"></i>
        </button>
      </ng-template>
    </app-monitor-select-list>
  </nz-sider>
  <nz-content style="display: flex; flex-direction: column">
    <app-toolbar wrapperStyle="margin: 8px 8px 4px 8px">
      <ng-template #left>
        <button *ngIf="currentApp != null" nzGhost nz-button nzType="primary" (click)="onNewMonitorDefine()">
          <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
          {{ 'define.new' | i18n }}
        </button>
        <button nzGhost *ngIf="currentApp != null" nz-button nzType="primary" routerLink="/monitors" [queryParams]="{ app: currentApp }">
          <i nz-icon nzType="file-text" nzTheme="outline"></i>
          {{ 'app-' + currentApp + '.yml' }}
          <i nz-icon nzType="more" nzTheme="outline"></i>
        </button>
        <button *ngIf="currentApp != null && !isEditing" nz-button nzType="primary" (click)="isEditing = true">
          <i nz-icon nzType="edit" nzTheme="outline"></i>
          {{ 'common.button.edit' | i18n }}
        </button>
        <button *ngIf="isEditing && currentApp != null" nz-button nzDanger (click)="isEditing = false; code = originalCode">
          <i nz-icon nzType="close-circle" nzTheme="outline"></i>
          {{ 'common.button.cancel' | i18n }}
        </button>
        <button *ngIf="!loading && code != originalCode" nz-button nzType="primary" [nzLoading]="saveLoading" (click)="onSaveAndApply()">
          <i nz-icon nzType="save" nzTheme="outline"></i>
          {{ 'define.save-apply' | i18n }}
        </button>
        <button *ngIf="currentApp != null" nz-button nzDanger (click)="onDeleteDefineYml()">
          <i nz-icon nzType="delete" nzTheme="outline"></i>
          {{ 'define.delete' | i18n : { app: currentApp } }}
        </button>
      </ng-template>
      <ng-template #right>
        <nz-switch
          [ngModel]="dark"
          (ngModelChange)="onDarkModeChange($event)"
          [nzUnCheckedChildren]="unchecked"
          [nzCheckedChildren]="checked"
        ></nz-switch>
        <ng-template #unchecked>
          <span nz-icon nzType="bulb"></span>
        </ng-template>
        <ng-template #checked>
          <span nz-icon nzType="poweroff"></span>
        </ng-template>
      </ng-template>
    </app-toolbar>
    <div style="flex: 1; margin: 4px 8px 4px 4px">
      <nz-code-editor
        *ngIf="!isEditing || currentApp == null"
        class="editor"
        [nzLoading]="loading"
        [(ngModel)]="code"
        [nzEditorMode]="'normal'"
        [nzEditorOption]="{ language: 'yaml', theme: 'vs', folding: true, automaticLayout: true, readOnly: !isEditing }"
      ></nz-code-editor>
      <nz-code-editor
        *ngIf="isEditing && currentApp != null"
        class="editor"
        [nzLoading]="loading"
        [nzOriginalText]="originalCode"
        [(ngModel)]="code"
        [nzEditorMode]="'diff'"
        [nzEditorOption]="{ language: 'yaml', theme: 'vs', folding: true, automaticLayout: true }"
      ></nz-code-editor>
    </div>
  </nz-content>
</nz-layout>
