@if (isValid()) {
  <div class="image-container {{imageFitClass$ | async}} {{layoutClass$ | async}} {{emulateBookClass$ | async}}"
    [style.filter]="(darkness$ | async)  ?? '' | safeStyle"
    [ngClass]="{'center-double': (shouldRenderDouble$ | async)}">
    @if (currentImage) {
      <img alt=" "
        tabindex="0" [style.outline]="'none'"
        #image [src]="currentImage.src"
        id="image-1"
        class="{{imageFitClass$ | async}} {{readerModeClass$ | async}} {{showClickOverlayClass$ | async}}"
        >
      }
      @if (shouldRenderDouble$ | async) {
        <img alt=" " [src]="currentImage2.src"
          id="image-2"
          class="image-2 {{imageFitClass$ | async}} {{readerModeClass$ | async}} {{showClickOverlayClass$ | async}}">
        }
      </div>
    }