<!--
  ~ Licensed 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 class="job-link" *ngIf="runtimeInfos && runtimeInfos.jobUrl">
  <a
    [attr.href]="runtimeInfos.jobUrl.values[0].jobUrl"
    target="_blank"
    nz-tooltip
    [nzTooltipTitle]="runtimeInfos.jobUrl.tooltip"
  >
    <i nz-icon nzType="build" nzTheme="fill"></i>
    {{ runtimeInfos.jobUrl.label }}
  </a>
</div>
<div class="status">{{ status }}</div>
<div class="progress" *ngIf="status === 'RUNNING'">{{ progress }}%</div>
<ng-container *ngIf="!revisionView">
  <a class="operate">
    <i
      nz-icon
      *ngIf="status !== 'RUNNING' && status !== 'PENDING' && enabled"
      (click)="runParagraph.emit()"
      nzType="play-circle"
      class="run-para"
      nzTheme="outline"
      nz-tooltip
      nzTooltipTitle="Run paragraph"
    ></i>
    <i
      nz-icon
      *ngIf="status === 'RUNNING' || status === 'PENDING'"
      (click)="cancelParagraph.emit()"
      class="cancel-para"
      nzType="pause-circle"
      nzTheme="outline"
      nz-tooltip
      nzTooltipTitle="Cancel paragraph"
    ></i>
  </a>
  <a (click)="toggleEditor()" nz-tooltip nzTooltipTitle="Show/hide the code">
    <i nz-icon [nzType]="editorHide ? 'fullscreen' : 'fullscreen-exit'" nzTheme="outline"></i>
  </a>
  <a (click)="toggleOutput()" nz-tooltip nzTooltipTitle="Show/hide the output">
    <i nz-icon [nzType]="tableHide ? 'book' : 'read'" nzTheme="outline"></i>
  </a>
  <a nz-dropdown [nzDropdownMenu]="menu" [nzTrigger]="'click'" [nzClickHide]="false" [(nzVisible)]="dropdownVisible">
    <span nz-tooltip nzTooltipTitle="More">
      <i nz-icon nzType="setting" nzTheme="outline"></i>
    </span>
  </a>
  <nz-dropdown-menu #menu="nzDropdownMenu">
    <ul nz-menu class="setting-menu">
      <li nz-menu-item class="paragraph-id">
        <a (click)="copyClipboard(pid)">{{ pid }}</a>
      </li>
      <li nz-menu-divider></li>
      <li nz-menu-item *ngIf="runOnSelectionChange === true || runOnSelectionChange === false" class="list-item">
        <span>
          <i nz-icon nzType="filter" nzTheme="outline"></i>
          Run on selection change
        </span>
        <span>
          <nz-switch
            nzSize="small"
            [ngModel]="runOnSelectionChange"
            (ngModelChange)="toggleRunOnSelectionChange()"
          ></nz-switch>
        </span>
      </li>
      <li nz-menu-item class="list-item">
        <span>
          <i nz-icon nzType="gateway" nzTheme="outline"></i>
          Width
        </span>
        <span>
          <select [ngModel]="colWidth" (ngModelChange)="changeColWidth($event)">
            <option [value]="col" [label]="col" *ngFor="let col of colWidthOption"></option>
          </select>
        </span>
      </li>
      <li nz-menu-item class="list-item">
        <span>
          <i nz-icon nzType="font-size" nzTheme="outline"></i>
          Font size
        </span>
        <span>
          <select [ngModel]="fontSize" (ngModelChange)="changeFontSize($event)">
            <option [value]="size" [label]="size" *ngFor="let size of fontSizeOption"></option>
          </select>
        </span>
      </li>
      <ng-container *ngFor="let menu of listOfMenu">
        <li nz-menu-item class="list-item" [nzDisabled]="menu.disabled" *ngIf="menu.show" (click)="menu.trigger()">
          <span>
            <i nz-icon [nzType]="menu.icon" nzTheme="outline"></i>
            {{ menu.label }}
          </span>
          <span class="short-cut">{{ menu.shortCut }}</span>
        </li>
      </ng-container>
    </ul>
  </nz-dropdown-menu>
</ng-container>
