<div class="fl-content fl-content-min-height" layoutDirection="column">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <table class="full-width" mat-table *ngIf="tableData.length; else noLogs" [dataSource]="tableData">
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef i18n>Name</th>
      <td mat-cell *matCellDef="let element">
        <a [routerLink]="config.getPanelUrl('openstack/object-store/' + element.container)"
           [queryParams]="{path: element.prefix}"
           *ngIf="element.prefix && element.prefix !== 'None'; else noPath"
           class="active-link">
          {{element.name}}
        </a>
        <ng-template #noPath>{{element.name}}</ng-template>
      </td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef i18n>Type</th>
      <td mat-cell *matCellDef="let element"> {{element.type}} </td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef i18n>Status</th>
      <td mat-cell *matCellDef="let element"> {{element.status}} </td>
    </ng-container>

    <ng-container matColumnDef="published">
      <th mat-header-cell *matHeaderCellDef i18n>Published (bytes)</th>
      <td mat-cell *matCellDef="let element"> {{element.published}} </td>
    </ng-container>

    <ng-container matColumnDef="pending">
      <th mat-header-cell *matHeaderCellDef i18n>Publishable (bytes)</th>
      <td mat-cell *matCellDef="let element"> {{element.pending}} </td>
    </ng-container>

    <ng-container matColumnDef="container">
      <th mat-header-cell *matHeaderCellDef i18n>Container</th>
      <td mat-cell *matCellDef="let element"> {{element.container}} </td>
    </ng-container>

    <ng-container matColumnDef="(actions)">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <div>
          <button mat-icon-button fl-tooltip="Discard" i18n-fl-tooltip
                  *ngIf="element.status !== 'Disabled' && element.type !== 'SYS'"
                  (click)="discardLog(element.name)" class="fl-float-right">
            <mat-icon>folder_delete</mat-icon>
          </button>

          <button mat-icon-button fl-tooltip="Disable" i18n-fl-tooltip
                  *ngIf="element.status !== 'Disabled' && element.type !== 'SYS'"
                  (click)="disableLog(element.name)" class="fl-float-right">
            <mat-icon>pause</mat-icon>
          </button>

          <button mat-icon-button fl-tooltip="Enable" i18n-fl-tooltip *ngIf="element.status === 'Disabled'"
                  (click)="enableLog(element.name)" class="fl-float-right">
            <mat-icon>play_arrow</mat-icon>
          </button>

          <button mat-icon-button fl-tooltip="Publish" i18n-fl-tooltip *ngIf="element.pending"
                  (click)="publishLog(element.name)" class="fl-float-right">
            <mat-icon>publish</mat-icon>
          </button>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <ng-template #noLogs>
    <p class="fl-detail" i18n>No logs</p>
  </ng-template>

</div>
