<div class="drag-and-drop" *ngIf="drag" (dragover)="dragover($event)" (drop)="drop($event)"
    [ngClass]="{'drag-and-drop__on-drag': drag2 === true }">
    <!-- (dragleave)="dragleave($event)"  -->
    <div class="drag-and-drop__card">
        <div class="drag-and-drop__border">
            <div class="drag-and-drop__label">
                Drag & drop to upload
            </div>
        </div>
    </div>
</div>

<div *ngIf="showRestartNotification" class="auto-update" [class.auto-update__activated]="restartNotificationAvailable">
    <div class="auto-update__display">
        <div class="auto-update__display--text">{{restartNotificationLabel}}</div> <a href class="auto-update__display--reload" (click)="loadNewVersion()" title="reload">reload</a> <a href class="auto-update__display--close" (click)="closeRestartNotification()" title="close"><fa-icon [icon]="faTimes"></fa-icon></a>
    </div>
</div>

<app-media-viewer id="media-viewer" *ngIf="openedMediaEvent" [openedMediaEvent]="openedMediaEvent"
    (closeSubject)="closeMedia()" (dragenter)="dragenter($event)"></app-media-viewer>

<div class="app" (dragenter)="dragenter($event)">
    <app-left-side-bar>
    </app-left-side-bar>

    <!--<app-streams-main-display>
</app-streams-main-display>-->

    <div id="display-zone">
        <app-tutorial id="tutorial" *ngIf="tutorialActive"></app-tutorial>
        <app-floating-column id="floating-column" *ngIf="floatingColumnActive"></app-floating-column>
        <app-notification-hub></app-notification-hub>
        <router-outlet></router-outlet>
    </div>

    <app-streams-selection-footer>
    </app-streams-selection-footer>
</div>

<!--<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <button (click)="launchWindow()">Launch Window</button>
</div>-->