<ng-container *ngIf="isValid()">
    <div class="image-container {{layoutClass$ | async}} {{emulateBookClass$ | async}}"
        [style.filter]="(darkness$ | async)  ?? '' | safeStyle"
        [ngClass]="{'center-double': (shouldRenderDouble$ | async), 'reverse': (shouldRenderDouble$ | async)}">
        <ng-container *ngIf="leftImage">
            <img alt=" "
                #image [src]="leftImage.src"
                id="image-1"
                class="{{imageFitClass$ | async}} {{readerModeClass$ | async}} {{showClickOverlayClass$ | async}}"
            >
        </ng-container>
        <ng-container *ngIf="shouldRenderDouble$ | async">
            <img alt=" " [src]="rightImage.src"
            id="image-2"
            class="image-2 {{imageFitClass$ | async}} {{readerModeClass$ | async}} {{showClickOverlayClass$ | async}}">  <!--reverse-->
        </ng-container>
    </div>
</ng-container>
