<div class="fl-content fl-content-min-height" *ngIf="object">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <div *ngIf="snapshots && !snapshots.length" class="fl-heading-md fl-margin-bottom" i18n>No snapshots</div>
  <div layoutDirection="row">
    <div layoutDirection="column">
      <button [color]="'primary'" (click)="openCreateSnapshotDialog()"
              [disabled]="!!object.display_task || !allowedAction('create_snapshot') ||
              !permissions['instances.create_snapshot']" mat-button i18n>Create snapshot
      </button>
    </div>
  </div>
  <div layoutDirection="row">
    <div *ngIf="snapshots && snapshots.length" layoutDirection="column" appFlex="100">
      <table mat-table [dataSource]="snapshots" class="full-width">
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef i18n>Name</th>
          <td mat-cell *matCellDef="let element">
            <a [routerLink]="[config.getPanelUrl('openstack/images'), element.id]">
              {{element.name}}
            </a>
          </td>
        </ng-container>
        <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef i18n>Status</th>
          <td mat-cell *matCellDef="let element">
            <a [routerLink]="[config.getPanelUrl('openstack/images'), element.id]">
              {{element.status}}
            </a>
          </td>
        </ng-container>
        <ng-container matColumnDef="size">
          <th mat-header-cell *matHeaderCellDef i18n>Size</th>
          <td mat-cell *matCellDef="let element">
            <a [routerLink]="[config.getPanelUrl('openstack/images'), element.id]">
              {{ this.readableBytes(element.size) }}
            </a>
          </td>
        </ng-container>
        <ng-container matColumnDef="created_at">
          <th mat-header-cell *matHeaderCellDef class="hide-lt-md" i18n>Created at</th>
          <td mat-cell *matCellDef="let element" class="hide-lt-md">
            <a [routerLink]="[config.getPanelUrl('openstack/images'), element.id]">
              <app-date-displayer [date]="element.created_at" withTime></app-date-displayer>
            </a>
          </td>
        </ng-container>
        <ng-container matColumnDef="client"
                      *ngIf="this.config.authService.feature('ui.openstack.instances.snapshots.display_client')">
          <th mat-header-cell *matHeaderCellDef class="hide-lt-md" i18n>Client</th>
          <td mat-cell *matCellDef="let element" class="hide-lt-md">
            <a [routerLink]="[config.getPanelUrl('openstack/images'), element.id]">
              {{ element.client ? element.client.name : '' }}
            </a>
          </td>
        </ng-container>
        <ng-container matColumnDef="(actions)">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let user">
            <app-object-actions [objectActions]="snapshotActions[user.id]" [maxVisibleActions]="1">
            </app-object-actions>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

      <span class="fl-margin-top" *ngIf="volumeSnapshotsCount > 0" i18n>
        Volume snapshots also exist! Check the volumes tab to see the volumes that have snapshots.
      </span>
    </div>
  </div>
  <p *ngIf="!object.region_obj.enable_snapshots" class="fl-detail" i18n>Snapshots are disabled for this instance region.</p>
</div>
