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

<div style="margin: 15px; padding: 15px; background-color: white">
  <div align="right">
    <div style="margin: 0px 4px 0px 4px; display: inline-block">
      {{ 'Auto Reload' | translate }}
      <nz-switch [(ngModel)]="switchValue" (click)="onSwitchAutoReload()"></nz-switch>
    </div>

    <nz-radio-group>
      <label nz-radio-button nzValue="All">{{ 'All' | translate }}</label>
      <label nz-radio-button nzValue="Own">{{ 'Owned By Me' | translate }}</label>
      <label nz-radio-button nzValue="Access">{{ 'Accessible By Me' | translate }}</label>
    </nz-radio-group>
    <a
      nz-button
      target="_blank"
      nzType="primary"
      style="margin: 0px 4px 0px 4px"
      [nzLoading]="isMlflowLoading"
      [href]="mlflowUrl"
    >
      <i nz-icon nzType="radar-chart"></i>
      MLflow UI
    </a>
    <a
      nz-button
      target="_blank"
      nzType="primary"
      style="margin: 0px 4px 0px 4px"
      [nzLoading]="isTensorboardLoading"
      [href]="tensorboardUrl"
    >
      <i nz-icon nzType="area-chart"></i>
      TensorBoard
    </a>
    <br />
    <nz-input-group nzSearch style="width: 300px; margin: 10px 4px 10px 4px" [nzAddOnAfter]="suffixIconButton">
      <input type="text" nz-input placeholder="{{'input search text' | translate}}" />
    </nz-input-group>
    <ng-template #suffixIconButton>
      <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
    </ng-template>

    <button
      nz-button
      id="openExperiment"
      nzType="primary"
      style="margin: 10px 4px 10px 4px"
      (click)="form.initModal('create')"
    >
      <i nz-icon nzType="plus"></i>
      {{'New Experiment' | translate}}
    </button>

    <button
      nz-button
      nzType="primary"
      style="margin: 10px 4px 10px 4px"
      nz-popconfirm
      nzTitle="{{'Confirm to delete?' | translate}}"
      nzCancelText="{{'Cancel' | translate}}"
      nzOkText="{{'Ok' | translate}}"
      (nzOnConfirm)="deleteExperiments()"
    >
      <i nz-icon nzType="delete"></i>
      {{'Delete' | translate}}
    </button>
  </div>
  <submarine-experiment-list
    [experimentList]="experimentList"
    [checkedList]="checkedList"
    [isLoading]="isListLoading"
    (deleteExperiment)="onDeleteExperiment($event, true)"
    (initModal)="onInitModal($event)"
    [(selectAllChecked)]="selectAllChecked"
  ></submarine-experiment-list>
  <submarine-experiment-form #form></submarine-experiment-form>
</div>
