<clr-datagrid (clrDgRefresh)="refresh($event)" [(clrDgSelected)]="selected" class="wayne-clr-datagrid">
  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
  <clr-dg-column class="col-id">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      #
    </ng-container>
  </clr-dg-column>
  <clr-dg-column class="col-time">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      {{'TITLE.CREATE_TIME' | translate}}
    </ng-container>
  </clr-dg-column>
  <clr-dg-column class="col-cluster">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      {{'TITLE.CONFIG_CLUSTER' | translate}}
    </ng-container>
  </clr-dg-column>
  <clr-dg-column class="col-cluster">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      {{'TITLE.ONLINE_CLUSTER' | translate}}
    </ng-container>
  </clr-dg-column>
  <clr-dg-column class="col-description">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      {{'TITLE.RELEASE_EXPLAIN' | translate}}
    </ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="{hidden: false}">
      {{'TITLE.CREATE_USER' | translate}}
    </ng-container>
  </clr-dg-column>
  <clr-dg-column class="col-operate">
    <ng-container *clrDgHideableColumn="{hidden: false}">
      {{'TITLE.ACTION' | translate}}
    </ng-container>
  </clr-dg-column>
  <clr-dg-row *ngFor="let tpl of pvcTpls" [clrDgItem]="tpl">
    <clr-dg-cell class="col-id">{{tpl.id}}</clr-dg-cell>
    <clr-dg-cell class="col-time">{{ tpl.createTime | date:'yyyy-MM-dd HH:mm:ss' }}</clr-dg-cell>
    <clr-dg-cell class="col-cluster">
      <div class="form-group" style="padding-bottom: 2px" *ngFor="let cluster of tpl.clusters">
        {{cluster}}
      </div>
    </clr-dg-cell>
    <clr-dg-cell class="col-cluster">
      <div class="form-group" style="padding-bottom: 2px" *ngFor="let status of tpl.status">
        {{status.cluster}}&nbsp;<clr-icon style="color: #FF3434" shape="exclamation-triangle" *ngIf="status.state === 1"
                                          class="is-solid"></clr-icon>
        <clr-icon style="color: green" shape="success-standard" *ngIf="status.state === 0" class="is-solid"></clr-icon>
      </div>
    </clr-dg-cell>
    <clr-dg-cell class="col-description">
      <div class="text-overflow">
        <a href="javascript:void(0)" (click)="tplDetail(tpl)">{{tpl.description}}</a>
      </div>
    </clr-dg-cell>
    <clr-dg-cell>{{tpl.user}}</clr-dg-cell>
    <clr-dg-cell class="col-operate">
      <button class="wayne-button text" (click)="publishPvcTpl(tpl)"
              *ngIf="authService.currentAppPermission.pvc.deploy || authService.currentUser.admin">
        {{'BUTTON.RELEASE' | translate}}
      </button>
      <button class="wayne-button text" (click)="detailPvcTpl(tpl)"
              *ngIf="authService.currentAppPermission.pvc.read || authService.currentUser.admin">
        {{'BUTTON.DETAIL' | translate}}
      </button>
      <button class="wayne-button text" (click)="clonePvcTpl(tpl)"
              *ngIf="authService.currentAppPermission.pvc.create || authService.currentUser.admin">
        {{'BUTTON.CLONE' | translate}}
      </button>
      <button class="wayne-button text"
              *ngIf="!tpl.status && (authService.currentAppPermission.pvc.delete || authService.currentUser.admin)"
              (click)="deletePvcTpl(tpl)">
        {{'BUTTON.DELETE' | translate}}
      </button>
      <button class="wayne-button text" (click)="offlinePvcTpl(tpl)"
              *ngIf="tpl.status && (authService.currentAppPermission.pvc.offline || authService.currentUser.admin)">
        {{'BUTTON.DROP' | translate}}
      </button>
    </clr-dg-cell>
  </clr-dg-row>
  <clr-dg-footer>
    <wayne-paginate
      [(currentPage)]="currentPage"
      [total]="pageState.page.totalCount"
      [rate]="0.5"
      [pageSizes]="[5, 10, 25]"
      (sizeChange)="pageSizeChange($event)"
    >
    </wayne-paginate>
  </clr-dg-footer>
</clr-datagrid>
<wayne-ace-editor></wayne-ace-editor>
<user-info></user-info>
<publish-tpl (published)="published($event)"></publish-tpl>
<div *ngIf="isEnableRobin">
  <h3>{{'PVC.DEPLOYMENT_STATUS' | translate}}</h3>

  <span *ngIf="loading" style="margin-left: 46%" class="spinner spinner-lg">
  Loading...
</span>

  <clr-datagrid *ngIf="!loading" class="wayne-clr-datagrid">
    <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
    <clr-dg-column style="width: 5%">
      <ng-container *clrDgHideableColumn="{hidden: false}">
        {{'TITLE.CLUSTER' | translate}}
      </ng-container>
    </clr-dg-column>
    <clr-dg-column>
      <ng-container *clrDgHideableColumn="{hidden: false}">
        {{'TITLE.TOTAL' | translate}}
      </ng-container>
    </clr-dg-column>
    <clr-dg-column>
      <ng-container *clrDgHideableColumn="{hidden: false}">
        {{'PVC.PV_NAME' | translate}}
      </ng-container>
    </clr-dg-column>
    <clr-dg-column>
      <ng-container *clrDgHideableColumn="{hidden: false}">
        {{'PVC.ACCESS_PATTERN' | translate}}
      </ng-container>
    </clr-dg-column>
    <clr-dg-column>
      <ng-container *clrDgHideableColumn="{hidden: false}">
        {{'TITLE.STATUS' | translate}}
      </ng-container>
    </clr-dg-column>
    <clr-dg-column>
      <ng-container *clrDgHideableColumn="{hidden: false}">
        {{'PVC.FILE_SYSTEM_STATUS' | translate}}
      </ng-container>
    </clr-dg-column>
    <clr-dg-column>
      <ng-container *clrDgHideableColumn="{hidden: false}">
         {{'EVENT.ERROR_MESSAGE' | translate}}
      </ng-container>
    </clr-dg-column>
    <clr-dg-column>
      <ng-container *clrDgHideableColumn="{hidden: false}">
        {{'TITLE.ACTION' | translate}}
      </ng-container>
    </clr-dg-column>
    <div *ngFor="let tpl of pvcTpls">
      <div *ngIf="tpl.status">
        <div *ngFor="let state of tpl.status">
          <clr-dg-row *ngIf="state.pvc" [clrDgItem]="state.pvc">
            <clr-dg-cell>{{state.cluster}}</clr-dg-cell>
            <clr-dg-cell>{{state.pvc?.spec.resources.requests.storage}}</clr-dg-cell>
            <clr-dg-cell class="copy">{{state.pvc?.spec.volumeName}}</clr-dg-cell>
            <clr-dg-cell>
              <div class="form-group" style="padding-bottom: 2px" *ngFor="let ac of state.pvc.status.accessModes">
                <a href="javascript:void(0)" class="label label-success">
                  {{ac}}
                </a>
              </div>
            </clr-dg-cell>
            <clr-dg-cell>{{state.pvc?.status.phase}}</clr-dg-cell>
            <clr-dg-cell>{{fileSystemState(state.fileSystemStatus)}}</clr-dg-cell>
            <clr-dg-cell>{{state.fileSystemStatus?.msg}}</clr-dg-cell>
            <clr-dg-cell>
              <div *ngIf="state.state==0">
                <button class="wayne-button text" *ngIf="!containState(state.fileSystemStatus,'Mount')"
                        style="padding-right: 5px"
                        (click)="activePv(state)">
                  {{'PVC.ACTIVATE_STORAGE' | translate}}
                </button>
                <button class="wayne-button text" *ngIf="containState(state.fileSystemStatus,'Mount')" [title]="'PVC.DEACTIVATED_STORAGE' | translate"
                        style="padding-right: 5px"
                        (click)="inActivePv(state)">
                  {{'PVC.DEACTIVATED_STORAGE' | translate}}
                </button>
                <button class="wayne-button text"
                        *ngIf="containState(state.fileSystemStatus,'Mount') && !containState(state.fileSystemStatus,'LoginForbidden')"
                        [title]="'PVC.FORCE_OFFLINE_USER' | translate" style="padding-right: 5px" (click)="offlineImageUser(state)">
                  {{'PVC.FORCE_OFFLINE_USER' | translate}}
                </button>
                <button class="wayne-button text"
                        *ngIf="containState(state.fileSystemStatus,'Mount') && containState(state.fileSystemStatus,'LoginForbidden')"
                        [title]="'PVC.ALLOW_USER_LOGIN' | translate" style="padding-right: 5px" (click)="activePv(state)">
                  {{'PVC.ALLOW_USER_LOGIN' | translate}}
                </button>
                <button class="wayne-button text" *ngIf="containState(state.fileSystemStatus,'Mount')"
                        (click)="loginInfo(state)" title="'PVC.VIEW_USER_PASS' | translate">
                  {{'PVC.VIEW_USER_PASS' | translate}}
                </button>
                <button class="wayne-button text"
                        *ngIf="containState(state.fileSystemStatus,'Mount') && containState(state.fileSystemStatus,'LoginForbidden')"
                        title="'PVC.CHECK_FILE' | translate" style="padding-right: 5px" (click)="verifyFileSystem(state)">
                  {{'PVC.CHECK_FILE' | translate}}
                </button>
              </div>
            </clr-dg-cell>
            <clr-dg-row-detail *clrIfExpanded>
              <snapshot-persistentvolumeclaim *ngIf="state.fileSystemStatus?.imageType === 'rbd'" [appId]="appId"
                                              style="width: 98%"
                                              [state]="state"></snapshot-persistentvolumeclaim>
            </clr-dg-row-detail>
          </clr-dg-row>
        </div>
      </div>
    </div>
  </clr-datagrid>
</div>
