@if (data.url && data.type === 'pdf') {
  <div id="outerContainer">
  <div class="pdf-container">
    <ngx-extended-pdf-viewer
      #pdfViewer
      [customToolbar]="additionalButtons"
      (currentZoomFactor)="updateZoomFactor($event)"
      useBrowserLocale="true"
      [src]="fileData.url"
        [zoom]="zoomSetting"
  [minZoom]="minZoom" [maxZoom]="maxZoom"
    ></ngx-extended-pdf-viewer>

   
  </div>
</div>
<div class="content-footer">
  <div class="d-flex justify-content-between align-items-center w-100">
    <span>{{ 'Página ' + currentPage + ' de ' + totalPages }}</span>
    <div class="d-flex align-items-center gap-2">
      <button (click)="zoomOut()" type="button" class="bg-transparent border-0 p-0 outline-none" style="outline: none;" tabindex="0" aria-label="Zoom Out">
        <lucide-angular [img]="minusIcon" size="24" color="#ffffff"></lucide-angular>
      </button>

      <button (click)="resetZoom()" type="button" class="bg-transparent border-0 p-0 outline-none" style="outline: none;" tabindex="0" aria-label="Zoom In">
        <lucide-angular [img]="zoomInIcon" size="24" color="#ffffff"></lucide-angular>
      </button>

      <button (click)="zoomIn()" type="button" class="bg-transparent border-0 p-0 outline-none" style="outline: none;" tabindex="0" aria-label="Reset Zoom">
        <lucide-angular [img]="plusIcon" size="24" color="#ffffff"></lucide-angular>
      </button>
    </div>
  </div>
</div>
 <ng-template #additionalButtons class="hiden">
      <div id="toolbarViewer" class="file-viewer-header">
        <div id="toolbarViewerLeft"  style="padding-left: 48px;">
            <div class="d-flex align-items-center gap-3">
        
            <button (click)="closeModal()" (keydown.enter)="closeModal()" type="button"
                class="bg-transparent border-0 p-0 outline-none" style="outline: none;" tabindex="0" aria-label="Close">
                <lucide-angular [img]="xIcon" size="32" color="#ffffff"></lucide-angular>
            </button>    <span class="text-title-file">{{ data.title }}</span>
            
        </div>
        </div>
        <div id="toolbarViewerRight" style="padding-right: 48px;" class="d-flex align-items-center gap-3">
          <button (click)="openInNewTab()"  type="button"
              class="bg-transparent border-0 p-0 outline-none" style="outline: none;" tabindex="0" aria-label="Close">  <lucide-angular [img]="externalLinkIcon" size="24" color="#ffffff"></lucide-angular></button>
  
            <button (click)="downloadPdf()"  type="button"
                class="bg-transparent border-0 p-0 outline-none" style="outline: none;" tabindex="0" aria-label="Close">  <lucide-angular [img]="downloadIcon" size="24" color="#ffffff"></lucide-angular></button>
            <button (click)="printPdf()"  type="button"
                class="bg-transparent border-0 p-0 outline-none" style="outline: none;" tabindex="0" aria-label="Close">  <lucide-angular [img]="printIcon" size="24" color="#ffffff"></lucide-angular></button>
        </div>
      </div>
    </ng-template>
}

@if (data.url && data.type === 'image') {
  <div class="w-100">
 <div  class="file-viewer-header d-flex justify-content-between align-items-center">
        <div  style="padding-left: 48px;">
            <div class="d-flex align-items-center gap-3">
        
            <button (click)="closeModal()" (keydown.enter)="closeModal()" type="button"
                class="bg-transparent border-0 p-0 outline-none" style="outline: none;" tabindex="0" aria-label="Close">
                <lucide-angular [img]="xIcon" size="32" color="#ffffff"></lucide-angular>
            </button>    <span class="text-title-file">{{ data.title }}</span>

        </div>
        </div>
        <div style="padding-right: 48px;" class="d-flex align-items-center gap-3">
            <button (click)="downloadPdf()"  type="button"
                class="bg-transparent border-0 p-0 outline-none" style="outline: none;" tabindex="0" aria-label="Close">  <lucide-angular [img]="downloadIcon" size="24" color="#ffffff"></lucide-angular></button>
      </div>

  </div>
    <div class="content-image w-100 d-flex justify-content-center align-items-center">
    <img [src]="data.url" [alt]="data.title" class="img-fluid" />
  </div>
  </div>

}