<clr-datagrid class="wayne-clr-datagrid">
  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
  <clr-dg-column [clrDgSortBy]="nameComparator">
    <ng-container *clrDgHideableColumn="showState['name']">
     {{'TITLE.NAME' | translate}}
    </ng-container>
    <clr-dg-string-filter [clrDgStringFilter]="nameFilter"></clr-dg-string-filter>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['总量']">
      总量
    </ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['access_pattern']">
      {{'PVC.ACCESS_PATTERN' | translate}}
    </ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['回收策略']">
      回收策略
    </ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['状态']">
      {{'TITLE.STATUS' | translate}}
    </ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['已绑定PVC']">
      已绑定PVC
    </ng-container>
    <clr-dg-string-filter [clrDgStringFilter]="pvcFilter"></clr-dg-string-filter>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['原因']">
      原因
    </ng-container>
  </clr-dg-column>
  <clr-dg-column [clrDgField]="'pv.metadata.creationTimestamp'" [clrDgSortBy]="timeComparator"
                 [(clrDgSortOrder)]="sortOrder">
    <ng-container *clrDgHideableColumn="showState[ 'start_time']">
      {{'TITLE.START_TIME' | translate}}
    </ng-container>
  </clr-dg-column>
  <clr-dg-row *clrDgItems="let pv of persistentVolumes">
    <clr-dg-action-overflow>
      <button *ngIf="pv.spec.cephfs && !pv.spec.cephfs.created && isEnableRobin" class="action-item"
              (click)="createRbdImage(pv)">创建Cephfs镜像
      </button>
      <button *ngIf="pv.spec.rbd && !pv.spec.rbd.created && isEnableRobin" class="action-item"
              (click)="createRbdImage(pv)">创建Rbd镜像
      </button>
      <button class="action-item" (click)="editPv(pv)">{{'BUTTON.EDIT' | translate}}</button>
      <button class="action-item" (click)="deletePv(pv)">{{'BUTTON.DELETE' | translate}}</button>
    </clr-dg-action-overflow>
    <clr-dg-cell class="copy">{{pv.metadata.name}}</clr-dg-cell>
    <clr-dg-cell>{{pv.spec.capacity.storage}}</clr-dg-cell>
    <clr-dg-cell>
      <div class="form-group" style="padding-bottom: 2px"
           *ngFor="let ac of pv.spec.accessModes">
        <a href="javascript:void(0)" class="label label-success">
          {{ac}}
        </a>
      </div>
    </clr-dg-cell>
    <clr-dg-cell>{{pv.spec.persistentVolumeReclaimPolicy}}</clr-dg-cell>
    <clr-dg-cell>{{pv.status.phase}}</clr-dg-cell>
    <clr-dg-cell>{{pv.spec.claimRef?.name}}</clr-dg-cell>
    <clr-dg-cell>{{pv.status.reason}}</clr-dg-cell>
    <clr-dg-cell>{{pv.metadata.creationTimestamp | date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
    <clr-dg-row-detail *clrIfExpanded="false">
      <form style="padding-top: 0" *ngIf="isEnableRobin">
        <section *ngIf="pv.spec.rbd" class="form-block">
          <label for="rbd_created">RBD状态:</label>
          <div class="form-group" style="margin-bottom: 0">
            <label for="rbd_created">是否已创建镜像:</label>
            <input type="text" id="rbd_created" size="35" readonly value="{{createdRbdImage(pv)}}">
          </div>
          <div class="form-group">
            <label for="rbd_name">RBD镜像名称:</label>
            <input type="text" id="rbd_name" size="35" readonly value="{{pv.spec.rbd?.image}}">
          </div>
        </section>
        <section *ngIf="pv.spec.cephfs" class="form-block">
          <label for="cephfs_created">Cephfs状态:</label>
          <div class="form-group" style="margin-bottom: 0">
            <label for="rbd_created">是否已创建镜像:</label>
            <input type="text" id="cephfs_created" size="35" readonly value="{{createdCephfsPath(pv)}}">
          </div>
          <div class="form-group">
            <label for="cephfs_path">文件路径:</label>
            <input type="text" id="cephfs_path" size="35" readonly value="{{pv.spec.cephfs?.path}}">
          </div>
        </section>
      </form>
    </clr-dg-row-detail>
  </clr-dg-row>

  <clr-dg-footer>
    <ng-container *ngIf="pagination.totalItems">
      <wayne-select [(ngModel)]="pageSize" style="width: 50px; height: 24px;margin-left: 12px;" inputable>
        <wayne-option *ngFor="let pagesize of pageSizes" [value]="pagesize">{{pagesize}}</wayne-option>
      </wayne-select>
    </ng-container>
    {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} 共{{pagination.totalItems}}条记录
    <clr-dg-pagination #pagination [clrDgPageSize]="pageSize"></clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>
