@if (contentType() !== 'unsupported') {
  <div
    class="d-inline-block"
    (click)="openModal(modalTemplate)"
  >
    <div #customButtonRef>
      <ng-content select="[customButton]"></ng-content>
    </div>

    @if (!customButtonRef.children.length) {
      <button
        class="btn btn-default btn-icon"
        [title]="'Preview file' | translate"
        type="button"
      >
        <i c8yIcon="search"></i>
      </button>
    }
  </div>
}

<ng-template #modalTemplate>
  <c8y-modal
    class="text-break-word"
    [title]="mo().name"
    [customFooter]="false"
    (onClose)="modalRef.hide()"
    (onDismiss)="modalRef.hide()"
    [labels]="{ cancel: '', ok: 'Close' | translate }"
  >
    @if (!dataUrl) {
      <div class="text-center d-block">
        <c8y-loading
          layout="application"
          [progress]="progress.percentage"
        ></c8y-loading>
        {{
          BUFFERING_STATUS_TEXT
            | translate
              : {
                  totalBytes: progress.totalBytes | bytes,
                  bufferedBytes: progress.bufferedBytes | bytes,
                  percentage: progress.percentage,
                  speed: progress.bytesPerSecond | bytes
                }
        }}
      </div>
    }

    @if (dataUrl) {
      <div id="modal-body">
        @switch (contentType()) {
          @case ('image') {
            <img
              class="fit-w"
              alt="safeDataUrl"
              [src]="safeDataUrl"
            />
          }
          @case ('video') {
            <video
              class="fit-w"
              controls
              autoplay
            >
              <source [src]="safeDataUrl" />
              {{ 'Your browser does not support the video tag.' | translate }}
            </video>
          }
          @case ('text') {
            <!--        @TODO: Implement text viewer-->
            text
          }
          @case ('json') {
            <!--        @TODO: Implement json viewer-->
            json
          }
        }
      </div>
    }
  </c8y-modal>
</ng-template>