<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="!snapshots" overlayParent></app-fl-backdrop>
  <ng-container *ngIf="snapshots">
    <div layoutDirection="column">
      <div layoutDirection="row">
        <button mat-button (click)="createNewSnapshot()" color="primary" i18n>
          Create new snapshot
        </button>
      </div>
    </div>

    <table class="inline-table" mat-table [dataSource]="snapshots.objects">
      <ng-container matColumnDef="(status)">
        <th mat-header-cell *matHeaderCellDef></th>
        <td class="position-relative" mat-cell *matCellDef="let snapshot">
          <app-status-line [direction]="LineDirection.Vertical"
                           [type]="snapshotStatus[snapshot.id].type" [color]="snapshotStatus[snapshot.id].value">
          </app-status-line>
        </td>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef i18n>Name</th>
        <td class="position-relative" mat-cell *matCellDef="let snapshot">
          <a class="fl-ellipsis-text"
             [routerLink]="config.getPanelUrl('openstack/volume-snapshots/') + snapshot.id">
            {{snapshot.name}}<br><span class="fl-sub-text">{{snapshot.status | uppercase}}</span>
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef i18n>ID</th>
        <td mat-cell *matCellDef="let snapshot">
          <a class="fl-ellipsis-text"
             [routerLink]="config.getPanelUrl('openstack/volume-snapshots/') + snapshot.id">
            <span>{{snapshot.id}}</span>
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="created_at">
        <th mat-header-cell *matHeaderCellDef i18n>Created at</th>
        <td mat-cell *matCellDef="let snapshot">
          <a class="fl-ellipsis-text"
             [routerLink]="config.getPanelUrl('openstack/volume-snapshots/') + snapshot.id">
            <app-date-displayer [date]="snapshot.created_at" withTime></app-date-displayer>
          </a>
        </td>
      </ng-container>
      <ng-container matColumnDef="(actions)">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let snapshot">
          <app-object-actions [objectActions]="snapshotActions[snapshot.id]" [maxVisibleActions]="1">
          </app-object-actions>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="['(status)', 'name', 'id', 'created_at', '(actions)']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['(status)', 'name', 'id', 'created_at', '(actions)'];">
      </tr>
    </table>
    <div *ngIf="previousPage || nextPage" layoutDirection="row" layoutAlign="center center" appLayoutGap="10px">
      <button mat-button (click)="changePage('previous')"
              [disabled]="!previousPage" color="primary" i18n>
        Previous page <ng-container *ngIf="previousPage">({{currentPage - 1}})</ng-container>
      </button>
      <button mat-button (click)="changePage('next')"
              [disabled]="!nextPage === true" color="primary" i18n>
        Next page <ng-container *ngIf="nextPage">({{currentPage + 1}})</ng-container>
      </button>
    </div>
    </ng-container>
</div>
