<app-modal id="photo-gallery-modal">
  <div class="modal-wrapper" *ngIf="images">
    <div class="header">
      <img (click)="closeModal()" class="close-icon" src="assets/images/close.svg" alt="close" />
    </div>
    <div class="title align-center">{{ title }}</div>
    <div [ngStyle]="{ width: '100%' }" class="align-center" (swipeleft)="nextItem()" (swiperight)="previousItem()">
      <ng-container *ngFor="let image of images; let i = index">
        <div
          class="images"
          *ngIf="i === activeImage"
          [@showFromRightAnimation]="i === activeImage && rightAnimation === true"
          [@showFromLeftAnimation]="i === activeImage && rightAnimation === false"
        >
          <img src="{{ image }}" />
        </div>
      </ng-container>
    </div>
    <div class="thumbnail-wrapper">
      <ng-container *ngFor="let image of images; let i = index">
        <div id="{{ i }}" class="thumbnail" [ngClass]="{ selected: i === activeImage }" (click)="setActiveItem(i)">
          <img src="{{ image }}" />
        </div>
      </ng-container>
    </div>

    <div class="navigation">
      <div class="left-arrow" (click)="previousItem()">
        <img src="assets/images/Arrow_left.svg" />
      </div>
      <div class="current-item">
        <span>{{ currentItem }}</span>
      </div>
      <div class="von">
        <span>von</span>
      </div>
      <div class="total-items">
        <span>{{ images.length }}</span>
      </div>
      <div class="right-arrow" (click)="nextItem()">
        <img src="assets/images/Arrow_right.svg" />
      </div>
    </div>
  </div>
</app-modal>
