<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <div *ngIf="attachedVolumesResponse && !attachedVolumesResponse.objects.length"
       class="fl-heading-md fl-margin-bottom" i18n>No volumes</div>
  <div layoutDirection="row">
    <div layoutDirection="column">
      <button [color]="'primary'" [disabled]="object && !!object.display_task || !allowedAction('attach_volume') ||
      !permissions['instances.attach-volume']" (click)="openAttachVolumeDialog()" mat-button i18n>
        Attach volume
      </button>
    </div>
  </div>
  <table *ngIf="attachedVolumesResponse && attachedVolumesResponse.objects.length"
         mat-table [dataSource]="attachedVolumesResponse.objects" class="full-width">
    <ng-container matColumnDef="display_name">
      <th mat-header-cell *matHeaderCellDef i18n>Name</th>
      <td mat-cell *matCellDef="let element">
        <a [routerLink]="[config.getPanelUrl('openstack/volumes'), element.volume_id]">
          <span class="vol-display-name fl-ellipsis-text">{{element.volume.display_name}}</span>
          <span *ngIf="element.is_boot" i18n>(boot)</span>
        </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/volumes'), element.volume_id]">
          {{element.volume.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/volumes'), element.volume_id]" i18n>{{element.volume.size}} GB</a>
      </td>
    </ng-container>
    <ng-container matColumnDef="has_snapshots">
      <th mat-header-cell *matHeaderCellDef class="hide-lt-md" i18n>Has snapshots</th>
      <td mat-cell *matCellDef="let element" class="hide-lt-md">
        <a [routerLink]="[config.getPanelUrl('openstack/volumes'), element.volume_id]">
          {{element.volume.number_of_snapshots | yesNo}}
        </a>
      </td>
    </ng-container>
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef><span class="fl-float-right" i18n>Actions</span></th>
      <td mat-cell *matCellDef="let element">
        <button mat-icon-button [attr.fl-tooltip]="detachVolumeText" *ngIf="!element.is_boot"
                [disabled]="object && !!object.display_task || !permissions['instances.detach_volume']"
                (click)="detachVolume(element.volume.id)"
                class="fl-float-right">
          <mat-icon>link_off</mat-icon>
        </button>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>
