<div id="container" class="projector-container" [osResized]="resizeSubject" #container>
    <div id="projector" class="projector">
        <div id="offline-indicator" *ngIf="isOffline">
            <mat-icon>
                fiber_manual_record
            </mat-icon>
        </div>
        <div id="header" class="headerFooter" *ngIf="projector && projector.show_header_footer">
            <!-- projector logo -->
            <img *ngIf="projector.show_logo && projectorLogo" src="{{ projectorLogo }}" class="projector-logo-main" />

            <div *ngIf="projector.show_title" id="eventdata">
                <div
                    *ngIf="eventName"
                    class="event-name"
                    [ngClass]="!eventDescription ? 'titleonly' : ''"
                    [innerHTML]="eventName"
                ></div>
                <div *ngIf="eventDescription" class="event-description" [innerHTML]="eventDescription"></div>
            </div>
        </div>

        <div *ngFor="let slide of slides">
            <os-slide-container
                [slideData]="slide"
                [scroll]="scroll"
                [scale]="scale"
                [projector]="projector"
            ></os-slide-container>
        </div>

        <div id="footer" class="headerFooter" *ngIf="projector && projector.show_header_footer">
            <div class="footertext">
                <span *ngIf="eventDate"> {{ eventDate }} </span>
                <span *ngIf="eventDate && eventLocation"> | </span>
                <span *ngIf="eventLocation"> {{ eventLocation }} </span>
            </div>
        </div>
    </div>
</div>
