<div *ngIf="container" layoutDirection="column" class="fl-margin-top">
  <div>
    <a class="active-link"
       (click)="breadCrumbNavigation()" i18n>container root</a>
    <span>:&nbsp;</span>
    <div class="object-breadcrumbs-container">
      <ng-container *ngFor="let breadcrumb of breadcrumbs; let last=last;">
        <ng-container *ngIf="breadcrumb.path; else noPath">
          <a class="active-link object-breadcrumbs-link" (click)="breadCrumbNavigation(breadcrumb.path)">
            {{breadcrumb.display}}
          </a>
        </ng-container>
        <ng-template #noPath>
          {{breadcrumb.display}}
        </ng-template>
        <span *ngIf="!last">&nbsp;/&nbsp;</span>
      </ng-container>
    </div>
    <ng-container *ngIf="breadcrumbs.length === 0">
      <span>&nbsp;/&nbsp;</span>
    </ng-container>
  </div>
  <div *ngIf="objectList; else objectListLoading">
    <table class="full-width" mat-table [dataSource]="objectList.objects" [trackBy]="trackByFunction">
      <ng-container matColumnDef="(image)">
        <th mat-header-cell *matHeaderCellDef style="width: 50px"></th>
        <td mat-cell *matCellDef="let obj">
          <ng-container *ngIf="obj.is_folder; else isFileIcon">
            <a class="active-link" (click)="expandFolder(obj)">
              <app-icon [icon]="objectMeta[obj.id].icon"></app-icon>
            </a>
          </ng-container>
          <ng-template #isFileIcon>
            <app-icon [icon]="objectMeta[obj.id].icon"></app-icon>
          </ng-template>
        </td>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef i18n>Name</th>
        <td mat-cell *matCellDef="let obj" class="object-name">
          <ng-container *ngIf="obj.is_folder; else isFile">
            <a class="active-link" (click)="expandFolder(obj)">
              {{obj.name}}
            </a>
          </ng-container>
          <ng-template #isFile>
            {{obj.name}}
          </ng-template>
        </td>
      </ng-container>
      <ng-container matColumnDef="size">
        <th mat-header-cell *matHeaderCellDef i18n>Size</th>
        <td mat-cell *matCellDef="let obj" class="object-size">
          <ng-container *ngIf="!obj.is_folder; else noSize">
            {{formatHelper.readableBytes(obj.size)}}
          </ng-container>
          <ng-template #noSize>
            Folder
          </ng-template>
        </td>
      </ng-container>
      <ng-container matColumnDef="last_modified">
        <th mat-header-cell *matHeaderCellDef i18n>Modification date</th>
        <td mat-cell *matCellDef="let obj" class="object-date">
          <app-date-displayer [date]="obj.last_modified" withTime></app-date-displayer>
        </td>
      </ng-container>
      <ng-container matColumnDef="(actions)">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let obj" class="object-buttons">
          <app-object-actions [objectActions]="objectMeta[obj.id].actions" [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>
    <div layoutDirection="row" layoutAlign="end center" class="fl-margin-top">
      <button mat-button color="primary" [queryParams]="getQueryParams()"
              [routerLink]="[config.getPanelUrl('openstack/object-store'), container.id, 'object-upload']" i18n>Upload file</button>
      <button mat-button color="primary" [queryParams]="getQueryParams()"
              [routerLink]="[config.getPanelUrl('openstack/object-store'), container.id, 'folder-create']" i18n>Create folder</button>
    </div>
  </div>
  <ng-template #objectListLoading>
    <div class="fl-margin-top fl-margin-left">
      <app-flashing-dots></app-flashing-dots>
    </div>
  </ng-template>
</div>
