<div *ngIf="state.state==0">
  <create-snapshot
    (create)="createdSnapshot($event)"
    [appId]="appId"></create-snapshot>
  <button (click)="openModal()" class="btn btn-link">
    <clr-icon shape="add"></clr-icon>
    {{'PVC.CREATE_SNAPSHOOT' | translate}}
  </button>
  <button (click)="deleteAllSnap()" class="btn btn-link">
    <clr-icon shape="trash"></clr-icon>
    {{'PVC.DELETE_ALL' | translate}}
  </button>
</div>

<clr-datagrid (clrDgRefresh)="snapshotRefresh()">
  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="{hidden: false}">ID</ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="{hidden: false}">{{'PVC.SNAPSHOOT_VERSION' | translate}}</ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="{hidden: false}">{{'PVC.SIZE' | translate}}</ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="{hidden: false}">{{'TITLE.ACTION' | translate}}</ng-container>
  </clr-dg-column>

  <clr-dg-row *ngFor="let snap of state.snaps" [clrDgItem]="snap">
    <clr-dg-cell>
      {{snap.id}}
    </clr-dg-cell>
    <clr-dg-cell> {{snap.name}}</clr-dg-cell>
    <clr-dg-cell> {{snap.size / (1024 * 1024 * 1024)}}GB</clr-dg-cell>
    <clr-dg-cell>
      <a href="javascript:void(0)" style="padding-right: 10px" [title]="'PVC.DELETE_SNAPSHOOT' | translate" (click)="deleteSnap(snap.name)">
        <clr-icon shape="trash"></clr-icon>
      </a>
      <a href="javascript:void(0)" [title]="'PVC.ROLLBACK_SNAPSHOOT' | translate" (click)="rollbackSnap(snap.name)">
        <clr-icon shape="undo"></clr-icon>
      </a>
    </clr-dg-cell>
  </clr-dg-row>
  <clr-dg-footer [translate]="'PVC.RECORD'" [translateParams]="{value: (state.snaps ? state.snaps.length : 0)}">
  </clr-dg-footer>
</clr-datagrid>
