<div *ngIf="data">
    <div class="slidetitle">
        <h1>
            {{ 'List of speakers' | translate }}
            <mat-icon *ngIf="data.data.closed">lock</mat-icon>
        </h1>
        <h2>
            {{ getTitle() }}
            <span *ngIf="getSpeakersCount() > 0 && !hideAmountOfSpeakers">
                &ndash; {{ getSpeakersCount() }} <span translate>Speakers</span>
            </span>
        </h2>
    </div>

    <!-- Last speakers -->
    <div *ngIf="data.data.finished && data.data.finished.length">
        <div *ngFor="let speaker of data.data.finished" class="lastSpeakers">
            {{ speaker.user }}
            <mat-icon *ngIf="speaker.marked">star</mat-icon>
        </div>
    </div>

    <!-- Current speaker -->
    <div *ngIf="data.data.current" class="currentSpeaker">
        <mat-icon>mic</mat-icon>
        <span>{{ data.data.current.user }}</span>
        <mat-icon *ngIf="data.data.current.marked">star</mat-icon>
    </div>

    <!-- Next speakers -->
    <div *ngIf="data.data.waiting && data.data.waiting.length">
        <ol class="nextSpeakers">
            <li *ngFor="let speaker of data.data.waiting">
                {{ speaker.user }}
                <mat-icon *ngIf="speaker.marked">star</mat-icon>
            </li>
        </ol>
    </div>
</div>
