<section class="product-gallery" [attr.aria-label]="'productDetails.mediaAria' | translate">
  <div class="product-gallery-main" (touchstart)="onTouchStart($event)" (touchend)="onTouchEnd($event)">
    <div class="product-gallery-toolbar">
      <button type="button" class="toolbar-btn" (click)="zoomRequested.emit(selectedIndex)">{{ 'productDetails.zoom' | translate }}</button>
      <button type="button" class="toolbar-btn" (click)="fullscreenRequested.emit(selectedIndex)">{{ 'productDetails.fullscreen' | translate }}</button>
    </div>

    @switch (media[selectedIndex]?.type) {
      @case ('video') {
        <video [src]="media[selectedIndex].url" controls></video>
      }

      @case ('pdf') {
        <object [data]="media[selectedIndex].url" type="application/pdf" [attr.aria-label]="'productDetails.pdfDocument' | translate">
          <a [href]="media[selectedIndex].url" target="_blank" rel="noopener">{{ 'productDetails.openDocument' | translate }}</a>
        </object>
      }

      @case ('manual') {
        <div class="document-viewer">
          <p>{{ 'productDetails.manualDocument' | translate }}</p>
          <a [href]="media[selectedIndex].url" target="_blank" rel="noopener">{{ 'productDetails.openDocument' | translate }}</a>
        </div>
      }

      @case ('warranty') {
        <div class="document-viewer">
          <p>{{ 'productDetails.warrantyDocument' | translate }}</p>
          <a [href]="media[selectedIndex].url" target="_blank" rel="noopener">{{ 'productDetails.openDocument' | translate }}</a>
        </div>
      }

      @default {
        <img [src]="media[selectedIndex].url" [alt]="media[selectedIndex].alt" loading="eager" decoding="async" (error)="onImageError($event)" />
      }
    }
  </div>

  @if (media.length > 1) {
    <div class="product-gallery-thumbs">
      @for (item of media; track $index) {
        <button type="button" class="product-gallery-thumb" [class.active]="selectedIndex === $index" [attr.aria-current]="selectedIndex === $index ? 'true' : null" [attr.aria-label]="('productDetails.photo' | translate) + ' ' + ($index + 1)" (click)="select($index)">
          @if (item.type === 'video') {
            <span class="product-gallery-video">▶</span>
          } @else if (item.type !== 'image') {
            <span class="product-gallery-doc">{{ item.type }}</span>
          }
          <img [src]="item.thumbnailUrl" [alt]="item.alt + ' ' + ($index + 1)" loading="lazy" decoding="async" (error)="onImageError($event)" />
        </button>
      }
    </div>
  }
</section>
