<h2>Available Images</h2>

<div style="font-weight: bolder; font-size: 20px">
  <span style="width: 22.5em; display: inline-block; margin-left: 1.15em">Name</span>
  <span style="width: 22.5em; display: inline-block">Date</span>
  <span style="width: 22.5em; display: inline-block">File valid</span>
</div>

<mat-expansion-panel
  *ngFor="let image of filterOnlyNewestImageVersion() | slice:paginationGetStart():paginationGetEnd()"
  (opened)="loadImage(getImageIndex(image), image.filename.split('.')[0])"
>
  <mat-expansion-panel-header (click)="$event.stopPropagation()">
    <h4 style="width: 25em"
    >{{image.name}}</h4>
    <h4 style="width: 25em"
    >{{image.datetime}}</h4>
    <h4 style="width: 25em; color: red">
      ✓ | X (TO BE DONE)
    </h4>
    <span style="float: right; margin-left: auto; margin-right: 1em;">
      <button mat-raised-button color="warn"
              (click)="deleteImage(image); $event.stopPropagation()">
        Delete
      </button>
    </span>
  </mat-expansion-panel-header>

  <mat-divider style="
  margin-top: 1em;
  margin-bottom: 1em;
  opacity: 20%;"></mat-divider>

  <ng-template matExpansionPanelContent>

    <mat-grid-list cols="4" rowHeight="22em" style="width: 100%; margin: auto">

      <mat-grid-tile style="justify-content: left!important;" colspan="1">
        <div style="width: 20em; height: 20em; border: solid; margin-bottom: 1em; display: flex">
          <img *ngIf="image.image_b64, let b64; else loadingImage"
               [src]="b64"
               style="width: 100%; margin: auto" [alt]="image.filename"/>
          <ng-template #loadingImage>
            <mat-spinner style="margin: auto;"></mat-spinner>
          </ng-template>

        </div>
      </mat-grid-tile>

      <mat-grid-tile colspan="3">
        <div style="display: block; width: 100%">
          <h3>Metadata:</h3>
          <p *ngIf="image.filename">filename: {{image.filename}}</p>
          <p *ngIf="image.latitude">latitude: {{image.latitude}}</p>
          <p *ngIf="image.longitude">longitude: {{image.longitude}}</p>
          <p *ngIf="image.version">version: {{image.version}}</p>
        </div>
      </mat-grid-tile>
    </mat-grid-list>

    <app-file-uploader [mode]="'put'"
                       [filename]="image.filename.split('.')[0]"
                       [meta]=image
                       (reload)="this.reload.emit()"
    ></app-file-uploader>

    <ng-container *ngIf="getRelatedImageMeta(image); let relatedImageMetadata">
      <mat-expansion-panel *ngIf="relatedImageMetadata.length > 0">
        <mat-expansion-panel-header>
          Previous version meta
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent>
          <div *ngFor="let imageMeta of relatedImageMetadata">
            <p *ngIf="imageMeta.filename">filename: {{imageMeta.filename}}</p>
            <p *ngIf="imageMeta.latitude">latitude: {{imageMeta.latitude}}</p>
            <p *ngIf="imageMeta.longitude">longitude: {{imageMeta.longitude}}</p>
            <p *ngIf="imageMeta.version">version: {{imageMeta.version}}</p>
          </div>
        </ng-template>
      </mat-expansion-panel>
    </ng-container>

  </ng-template>
</mat-expansion-panel>

<mat-paginator *ngIf="filterOnlyNewestImageVersion().length > 0"
               [length]="filterOnlyNewestImageVersion().length"
               [pageSize]="pageSizeOptions[0]"
               [pageSizeOptions]="pageSizeOptions"
               (page)="lastPageEvent = $event"
               showFirstLastButtons
></mat-paginator>

<mat-divider style="margin-top: 2em"></mat-divider>
<h3>Upload New Image</h3>
<app-file-uploader [mode]="'post'" (reload)="reload.emit()"></app-file-uploader>
<mat-divider style="margin-top: 2em"></mat-divider>
