<mat-progress-spinner *ngIf="images === null"></mat-progress-spinner>

<h2 class="text-center" *ngIf="images !== null && images.length <= 0">
  There are no images to display
</h2>

<ng-container *ngIf="images !== null && images.length > 0">
  <masonry [columns]="columns">
    <div *ngFor="let image of images" class="m-2" masonry-item>
      <mat-card>
        <mat-card-header>
          <mat-card-title>Image by you</mat-card-title>
          <mat-card-subtitle>
            Uploaded {{ image.created | amTimeAgo }}
          </mat-card-subtitle>
        </mat-card-header>
        <picsur-img
          mat-card-image
          [src]="getThumbnailUrl(image)"
          alt="Image uploaded by you"
        >
        </picsur-img>
        <mat-card-actions>
          <button mat-stroked-button (click)="viewImage(image)">VIEW</button>
          <button mat-button color="warn" (click)="deleteImage(image)">
            DELETE
          </button>
        </mat-card-actions>
      </mat-card>
    </div>
  </masonry>

  <paginator
    [total-pages]="pages"
    [page]="page"
    (page)="gotoPage($event)"
  ></paginator>
</ng-container>
