<!--
  ~ Licensed to tde Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See tde NOTICE file
  ~ distributed witd tdis work for additional information
  ~ regarding copyright ownership.  tde ASF licenses tdis file
  ~ to you under tde Apache License, Version 2.0 (tde
  ~ "License"); you may not use tdis file except in compliance
  ~ witd tde License.  You may obtain a copy of tde License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under tde License is distributed on an
  ~ "AS IS" BASIS, WItdOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, eitder express or implied.  See tde License for tde
  ~ specific language governing permissions and limitations
  ~ under tde License.
  -->
<div style="margin: 15px; padding: 15px; background-color: white">
  <nz-spin [nzSpinning]="isModelInfoLoading">
    <article nz-typography>
      <h3 nz-typography>{{modelName}}</h3>
      <p nz-typography>
        <span><strong>{{ 'Create Time' | translate }}: </strong></span>
        {{ isModelInfoLoading ? null : humanizedCreationTime }}
      </p>
      <p nz-typography>
        <span><strong>{{ 'Last Updated' | translate }}: </strong></span>
        {{ isModelInfoLoading ? null : humanizedLastUpdatedTime }}
      </p>
      <p nz-typography>
        <span><strong>{{ 'Tags' | translate }}: </strong></span>
        <span *ngIf="!isModelInfoLoading">
          <submarine-model-tags [modelName]="modelName" [tags]="selectedModelInfo.tags" [useVersionTags]="false" ></submarine-model-tags>
        </span>
      </p>
      <p nz-typography>
        <span><strong>{{ 'Description' | translate }}: </strong></span>
        {{ isModelInfoLoading ? null : selectedModelInfo.description }}
      </p>
    </article>
  </nz-spin>
  <nz-divider [nzText]="text" nzOrientation="left">
    <ng-template #text>
      {{ 'Model Versions' | translate }}
      <i nz-icon nzType="form"></i>
    </ng-template>
  </nz-divider>
  <nz-table
    id="modelVersionsTable"
    nzBordered
    #basicTable
    [nzData]="modelVersions"
    [nzNoResult]="'No data' | translate"
    [nzLoading]="isModelVersionsLoading"
  >
    <thead>
      <tr>
        <th>{{ 'Version' | translate }}</th>
        <th>{{ 'Stage' | translate }}</th>
        <th>{{ 'Create Time' | translate }}</th>
        <th>{{ 'Last Updated' | translate }}</th>
        <th>{{ 'Tags' | translate }}</th>
        <th>{{ 'Description' | translate }}</th>
        <th>{{ 'Action' | translate }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data; let i = index" class="model-info-item" [routerLink]="data.version">
        <td>{{ data.version }}</td>
        <td>{{ data.currentStage }}</td>
        <td>{{ data.creationTime | date: 'M/d/yyyy, h:mm a' }}</td>
        <td>{{ data.lastUpdatedTime | date: 'M/d/yyyy, h:mm a' }}</td>
        <td>
          <submarine-model-version-tag *ngFor="let tag of data.tags" [tag]="tag" [type]="'default'"></submarine-model-version-tag>
        </td>
        <td>{{ data.description }}</td>
        <td>
          <a
            id="btn-createServe{{ i }}"
            *ngIf="data.currentStage!='Production'"
            class="icon-link"
            nz-popconfirm
            nzPlacement="left"
            nzTitle="{{ 'Are you sure you want to serve the model?' | translate }}"
            nzCancelText="{{ 'Cancel' | translate }}"
            nzOkText="{{ 'Ok' | translate }}"
            (nzOnConfirm)="onCreateServe(data.modelVersionId, data.version)"
            (click)="preventEvent($event)"
          >
            <i id="icon-createServe{{ i }}" nz-icon nzType="play-circle" nzTheme="fill" class="model-info-icon" ></i>
          </a>
          <a
            id="anchor-preview{{ i }}"
            *ngIf="data.currentStage=='Production'"
            class="icon-link"
            nz-popconfirm
            nzPlacement="left"
            nzTitle="{{ 'Are you sure you want to delete the model serve?' | translate }}"
            nzCancelText="{{ 'Cancel' | translate }}"
            nzOkText="{{ 'Ok' | translate }}"
            (nzOnConfirm)="onDeleteServe(data.modelVersionId, data.version)"
            (click)="preventEvent($event)"
          >
            <i id="icon-pause{{ i }}" nz-icon nzType="pause-circle" nzTheme="fill" class="model-info-icon"></i>
          </a>
          <nz-divider nzType="vertical"></nz-divider>
          <a
            id="anchor-preview{{ i }}"
            *ngIf="data.currentStage!=='Production'"
            class="icon-link"
            nz-popconfirm
            nzPlacement="left"
            nzTitle="{{ 'Are you sure you want to delete the model?' | translate }}"
            nzCancelText="{{ 'Cancel' | translate }}"
            nzOkText="{{ 'Ok' | translate }}"
            (nzOnConfirm)="onDeleteModelVersion(data.version)"
            (click)="preventEvent($event)"
          >
            <i nz-icon nzType="delete" nzTheme="fill" class="model-info-icon" ></i>
          </a>
          <a
            id="anchor-preview{{ i }}"
            *ngIf="data.currentStage==='Production'"
            class="icon-link"
            nzTooltipTitle='{{ "The model is in \"Production\" stage. It cannot be deleted." | translate }}'
            nz-tooltip
            (click)="preventEvent($event)"
          >
            <i nz-icon nzType="delete" nzTheme="fill" class="model-info-icon" ></i>
          </a>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>
