<!-- eslint-disable @angular-eslint/template/button-has-type, @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus, @angular-eslint/template/prefer-ngsrc -->
@if (lightboxAttachment()) {
  <div
    class="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm"
    (click)="closeLightbox()"
    (contextmenu)="openImageContextMenu($event, lightboxAttachment()!)"
    (keydown.escape)="closeLightbox()"
    tabindex="0"
  >
    <div
      class="relative max-h-[90vh] max-w-[90vw]"
      (click)="$event.stopPropagation()"
    >
      <img
        [src]="lightboxAttachment()!.objectUrl"
        [alt]="lightboxAttachment()!.filename"
        class="max-h-[90vh] max-w-[90vw] rounded-lg object-contain shadow-2xl"
        (contextmenu)="openImageContextMenu($event, lightboxAttachment()!); $event.stopPropagation()"
      />
      <div class="absolute right-3 top-3 flex gap-2">
        <button
          (click)="downloadAttachment(lightboxAttachment()!)"
          class="grid h-9 w-9 place-items-center rounded-lg bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
          title="Download"
        >
          <ng-icon
            name="lucideDownload"
            class="h-5 w-5"
          />
        </button>
        <button
          (click)="closeLightbox()"
          class="grid h-9 w-9 place-items-center rounded-lg bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80"
          title="Close"
        >
          <ng-icon
            name="lucideX"
            class="h-5 w-5"
          />
        </button>
      </div>
      <div class="absolute bottom-3 left-3 right-3 flex items-center justify-between">
        <div class="rounded-lg bg-black/60 px-3 py-1.5 backdrop-blur-sm">
          <span class="text-sm text-white">{{ lightboxAttachment()!.filename }}</span>
          <span class="ml-2 text-xs text-white/60">{{ formatBytes(lightboxAttachment()!.size) }}</span>
        </div>
      </div>
    </div>
  </div>
}

@if (imageContextMenu()) {
  <app-context-menu
    [x]="imageContextMenu()!.positionX"
    [y]="imageContextMenu()!.positionY"
    (closed)="closeImageContextMenu()"
  >
    <button
      (click)="copyImageToClipboard(imageContextMenu()!.attachment); closeImageContextMenu()"
      class="context-menu-item-icon"
    >
      <ng-icon
        name="lucideCopy"
        class="h-4 w-4 text-muted-foreground"
      />
      Copy Image
    </button>
    <button
      (click)="downloadAttachment(imageContextMenu()!.attachment); closeImageContextMenu()"
      class="context-menu-item-icon"
    >
      <ng-icon
        name="lucideDownload"
        class="h-4 w-4 text-muted-foreground"
      />
      Save Image
    </button>
  </app-context-menu>
}
