@if (isValid()) {
  <div class="image-container {{layoutClass$ | async}} {{emulateBookClass$ | async}}"
       [style.filter]="(darkness$ | async)  ?? '' | safeStyle"
       [ngClass]="{'center-double': (shouldRenderDouble$ | async), 'reverse': (shouldRenderDouble$ | async)}">

    @if(leftImage) {
      <img alt=" "
           tabindex="0" [style.outline]="'none'"
           #image [src]="leftImage.src"
           id="image-1"
           class="{{imageFitClass$ | async}} {{readerModeClass$ | async}} {{showClickOverlayClass$ | async}}">
    }

    @if (shouldRenderDouble$ | async) {
      <img alt=" " [src]="rightImage.src"
           id="image-2"
           class="image-2 {{imageFitClass$ | async}} {{readerModeClass$ | async}} {{showClickOverlayClass$ | async}}">  <!--reverse-->
    }
  </div>
}