<!--
  ~ 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.
-->

<ng-container *ngTemplateOutlet="main; context: { hoverable: true, height: height, card: true }"></ng-container>

<ng-template #main let-card="card" let-hoverable="hoverable" let-height="height">
  <nz-card
    [nzHoverable]="hoverable"
    [style]="{ height: height || '100%', display: 'flex', flexDirection: 'column' }"
    [nzBordered]="true"
    [nzBodyStyle]="{ overflow: !monitor ? 'hidden' : 'auto' }"
    [nzTitle]="card ? card_title : ''"
    [nzLoading]="!app || loading"
    [nzExtra]="card ? (!monitor ? metrics_card_extra : monitor_card_extra) : ''"
  >
    <div *ngIf="!!monitor" class="monitor-detail-container">
      <div class="monitor-basic-info">
        <div class="monitor-info-header">
          <div class="monitor-name">{{ monitor.name }}</div>
          <nz-tag *ngIf="monitor.status == 0" [nzColor]="'#b2b2b2'" class="status-tag">
            <i nz-icon nzType="meh" nzTheme="outline"></i>
            <span>{{ 'monitor.status.paused' | i18n }}</span>
          </nz-tag>
          <nz-tag *ngIf="monitor.status == 1" [nzColor]="'#498765'" class="status-tag">
            <i nz-icon nzType="smile" nzTheme="outline"></i>
            <span>{{ 'monitor.status.up' | i18n }}</span>
          </nz-tag>
          <nz-tag *ngIf="monitor.status == 2" [nzColor]="'#fd4357'" class="status-tag">
            <i nz-icon nzType="frown" nzTheme="outline"></i>
            <span>{{ 'monitor.status.down' | i18n }}</span>
          </nz-tag>
        </div>

        <div nz-row [nzGutter]="16">
          <div nz-col [nzSpan]="24">
            <nz-descriptions nzBordered [nzColumn]="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
              <nz-descriptions-item [nzTitle]="'ID'">{{ monitorId }}</nz-descriptions-item>
              <nz-descriptions-item [nzTitle]="'monitor.period' | i18n">
                <ng-container *ngIf="monitor.scheduleType === 'cron' && monitor.cronExpression; else showInterval">
                  {{ monitor.cronExpression }}
                </ng-container>
                <ng-template #showInterval> {{ monitor.intervals }}s </ng-template>
              </nz-descriptions-item>
              <nz-descriptions-item [nzTitle]="'Instance'" [nzSpan]="2">{{ monitor.instance }}</nz-descriptions-item>
              <nz-descriptions-item [nzTitle]="'label' | i18n" [nzSpan]="2">
                <div class="tags-container">
                  <ng-container *ngFor="let label of getObjectEntries(monitor.labels)">
                    <nz-tag>{{ label[0] }}: {{ label[1] }}</nz-tag>
                  </ng-container>
                </div>
              </nz-descriptions-item>
              <nz-descriptions-item [nzTitle]="'monitor.detail.description' | i18n" [nzSpan]="2">
                {{ monitor.description }}
              </nz-descriptions-item>
              <nz-descriptions-item [nzTitle]="'common.new-time' | i18n">
                {{ monitor.gmtCreate | date : 'YYYY-MM-dd HH:mm:ss' }}
              </nz-descriptions-item>
              <nz-descriptions-item [nzTitle]="'common.edit-time' | i18n">
                {{ monitor.gmtUpdate | date : 'YYYY-MM-dd HH:mm:ss' }}
              </nz-descriptions-item>
            </nz-descriptions>
          </div>
        </div>
      </div>

      <div class="monitor-annotations" *ngIf="monitor.annotations && getObjectLength(monitor.annotations) > 0">
        <h3 class="section-title">{{ 'annotation' | i18n }}</h3>
        <nz-descriptions nzBordered [nzColumn]="1" [nzSize]="'small'">
          <nz-descriptions-item *ngFor="let annotation of getObjectEntries(monitor.annotations)" [nzTitle]="annotation[0]">
            {{ annotation[1] }}
          </nz-descriptions-item>
        </nz-descriptions>
      </div>
    </div>
    <nz-table
      *ngIf="!monitor && isTable"
      nzSize="small"
      [nzNoResult]="'monitor.detail.chart.no-data' | i18n"
      [nzFrontPagination]="false"
      [nzShowPagination]="false"
      [nzData]="valueRows"
      [nzScroll]="height ? { y: scrollY } : { x: '100%' }"
      #smallTable
    >
      <thead>
        <tr>
          <th style="text-align: center" *ngFor="let field of fields" nzWidth="100px">
            {{ 'monitor.app.' + app + '.metrics.' + metrics + '.metric.' + field.name | i18nElse : field.name }}
            <nz-tag *ngIf="field.unit" [nzBordered]="false">{{ field.unit }}</nz-tag>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let valueRow of smallTable.data">
          <td *ngFor="let value of valueRow.values; let i = index" nzEllipsis nz-tooltip [nzTooltipTitle]="contentTemplate">
            <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
            <ng-template #contentTemplate>
              {{ value.origin }}
              <nz-tag *ngIf="value.origin == null">{{ 'monitor.detail.value.null' | i18n }}</nz-tag>
            </ng-template>
          </td>
        </tr>
      </tbody>
    </nz-table>
    <nz-table
      *ngIf="!monitor && !isTable"
      nzSize="small"
      [nzNoResult]="'monitor.detail.chart.no-data' | i18n"
      [nzFrontPagination]="false"
      [nzShowPagination]="false"
      [nzData]="valueRows"
      [nzScroll]="height ? { y: scrollY } : { x: '100%' }"
    >
      <thead>
        <tr>
          <th style="text-align: center">{{ 'common.name' | i18n }}</th>
          <th style="text-align: center">{{ 'common.value' | i18n }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let field of fields; let i = index">
          <td>
            {{ 'monitor.app.' + app + '.metrics.' + metrics + '.metric.' + field.name | i18nElse : field.name }}
            <nz-tag *ngIf="field.unit" [nzBordered]="false">{{ field.unit }}</nz-tag>
          </td>
          <td
            >{{ rowValues[i].origin }}
            <nz-tag *ngIf="rowValues[i].origin == null">{{ 'monitor.detail.value.null' | i18n }}</nz-tag>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-card>
</ng-template>

<ng-template #card_title>
  <p style="font-size: small; text-align: left">
    {{ !monitor ? ('monitor.app.' + app + '.metrics.' + metrics | i18nElse : metrics) : ('monitor.detail.basic' | i18n) }}
  </p>
</ng-template>

<ng-template #monitor_card_extra>
  <a nz-icon nzType="edit" nzTheme="outline" [routerLink]="['/monitors/' + monitorId + '/edit']"></a>
</ng-template>

<ng-template #metrics_card_extra>
  <div style="display: flex; gap: 10px; align-items: center">
    <div style="cursor: pointer" (click)="toggleFavorite()">
      <i
        nz-icon
        nzType="star"
        [nzTheme]="isFavorite() ? 'fill' : 'outline'"
        [style.color]="isFavorite() ? '#faad14' : '#8c8c8c'"
        nz-tooltip
        [nzTooltipTitle]="isFavorite() ? ('monitor.favorite.remove' | i18n) : ('monitor.favorite.add' | i18n)"
      ></i>
    </div>
    <div nz-popover [nzPopoverContent]="('monitor.collect.time.tip' | i18n) + ': ' + (time | _date : 'yyyy-MM-dd HH:mm:ss')">
      <a><i nz-icon nzType="field-time" nzTheme="outline"></i></a>
      <i style="font-size: 13px; font-weight: normal; color: rgba(112, 112, 112, 0.89)">
        {{ 'monitor.collect.time' | i18n }}: {{ time | _date : 'HH:mm:ss' }}
      </i>
    </div>
    <div>
      <a (click)="showModal = true"><i nz-icon nzType="fullscreen" nzTheme="outline"></i></a>
    </div>
  </div>
</ng-template>

<ng-template #modal_title>
  <div style="display: flex; justify-content: space-between">
    <ng-container *ngTemplateOutlet="card_title"></ng-container>
    <div style="display: flex; justify-content: space-between; gap: 10px">
      <div>
        <i nz-icon nzType="field-time" nzTheme="outline"></i>
        <i style="font-size: 13px; font-weight: normal; color: rgba(112, 112, 112, 0.89)">
          {{ ('monitor.collect.time.tip' | i18n) + ': ' + (time | _date : 'yyyy-MM-dd HH:mm:ss') }}
        </i>
      </div>
      <div style="cursor: pointer" (click)="showModal = false"><i nz-icon nzType="close"></i></div>
    </div>
  </div>
</ng-template>

<nz-modal
  [nzTitle]="modal_title"
  [nzClosable]="false"
  [nzStyle]="{ width: '90%', height: '90%' }"
  [nzFooter]="null"
  [nzContent]="main"
  [(nzVisible)]="showModal"
  (nzOnCancel)="showModal = false"
>
</nz-modal>
