<div>
  <form [formGroup]="imgForm" (ngSubmit)="onSubmit(imgForm.value)" autocomplete="off" style="padding: 10px;">
    <p>
      <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
        (change)="onFileChanged($event)" />
    </p>
    <p>
      <mat-form-field>
        <mat-label>Comment about the image</mat-label>
        <input matInput type="text" formControlName="comment" />
      </mat-form-field>
    </p>

    <button mat-button color="warn" type="submit">
      <mat-icon>file_upload</mat-icon>
      Upload image
    </button>
    <label>{{ imageError }}</label>
  </form>
</div>

<div *ngIf="resultsLength > 0">
  <table mat-table [dataSource]="dataSourceTable">
    <ng-container matColumnDef="comment">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;">Comments</th>
      <td mat-cell *matCellDef="let element" style="text-align: left;"><span style="white-space:nowrap;">{{element.comment}}</span></td>
    </ng-container>

    <ng-container matColumnDef="data">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;">Image</th>
      <td mat-cell *matCellDef="let element" style="text-align: center;">
        <img src="{{element.data}}" alt="image" style="width:50%;" (click)="openModal(element)" class="cursor">
      </td>
    </ng-container>

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

  <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div>

<div class="imgmodal" [ngStyle]="{'display': (showPopin === true) ? 'block' : 'none'}">
  <span class="close cursor" (click)="closeModal()">&times;</span>
  <mat-icon aria-hidden="false" aria-label="Rotation" (click)="rotate()" class="rotate cursor">undo</mat-icon>
  <div class="imgbox">
    <img class="center-fit cursor" src="{{ popinImage }}" (click)="closeModal()" [@rotatedState]='stateRotation'>
  </div>
</div>
