<div class="clr-row">
  <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
    <div class="table-search">
      <div class="table-search-left">
        <button class="wayne-button normal" (click)="createResource()">
          {{'ADMIN.KUBERNETES.PVC.CREATE' | translate}}
        </button>
        <button class="wayne-button normal" (click)="retrieveResource()">
          {{'ADMIN.KUBERNETES.ACTION.REFRESH' | translate}}
        </button>
        <wayne-filter-box (confirm)="onConfirmEvent()" (cancel)="onCancelEvent()">
          <wayne-checkbox-group [(ngModel)]="showList">
            <wayne-checkbox value="name">{{'ADMIN.KUBERNETES.PVC.LIST.NAME' | translate}}</wayne-checkbox>
            <wayne-checkbox value="label">{{'ADMIN.KUBERNETES.PVC.LIST.LABEL' | translate}}</wayne-checkbox>
            <wayne-checkbox value="status">{{'ADMIN.KUBERNETES.PVC.LIST.STATUS' | translate}}</wayne-checkbox>
            <wayne-checkbox value="storage">{{'ADMIN.KUBERNETES.PVC.LIST.STORAGE' | translate}}</wayne-checkbox>
            <wayne-checkbox value="accessModes">{{'ADMIN.KUBERNETES.PVC.LIST.ACCESSMODES' | translate}}</wayne-checkbox>
            <wayne-checkbox value="pv">{{'ADMIN.KUBERNETES.PVC.LIST.PV' | translate}}</wayne-checkbox>
            <wayne-checkbox value="storageClass">{{'ADMIN.KUBERNETES.PVC.LIST.STORAGECLASS' | translate}}</wayne-checkbox>
            <wayne-checkbox value="age">{{'ADMIN.KUBERNETES.PVC.LIST.AGE' | translate}}</wayne-checkbox>
          </wayne-checkbox-group>
        </wayne-filter-box>
        <label for="namespace_name" class="clr-col-md-3">{{'ADMIN.KUBERNETES.LABEL.NAMESPACE' | translate}}</label>
        <wayne-select [(ngModel)]="namespace" (change)="retrieveResource()"
                      searchable
                      name="namespace_name"
                      [placeholder]="'PLACEHOLDER.CHOOSE' | translate"
                      style="margin-left: 12px;">
          <wayne-option *ngFor="let ns of namespaces" [value]="ns">{{ns}}</wayne-option>
        </wayne-select>
      </div>
    </div>

    <wayne-list-pvc
      [resources]="resources"
      [showState]="showState"
      (delete)="onDeleteResourceEvent($event)"
      (edit)="onEditResourceEvent($event)"
      [page]="pageState.page"
      [cluster]="cluster"
      (migration)="migration($event)"
      (paginate)="retrieveResource($event)">
    </wayne-list-pvc>
  </div>
</div>
<kube-migration></kube-migration>
<deletion-dialog (outputObj)="confirmDeleteEvent($event)"></deletion-dialog>
<wayne-ace-editor (createOutputObj)="onCreateResourceEvent($event)" (outputObj)="onSaveResourceEvent($event)"></wayne-ace-editor>
<wayne-float-window value="{{ cluster }}">
  <wayne-float-window-item *ngFor="let cluster of clusters" [value]="cluster"
                           (click)="jumpToHref(cluster)"></wayne-float-window-item>
</wayne-float-window>
