<div class="captions-container" #captionsContainer>
	<div
		*ngIf="captionsContainer.offsetWidth >= 600 && !settingsPanelOpened"
		class="captions-offset"
		[ngClass]="{ 'captions-offset': captionsContainer.offsetWidth >= 1000 }"
	>
		<button (click)="onSettingsCliked()" id="caption-settings-btn" mat-flat-button>
			<mat-icon id="subtitle-settings-icon">settings</mat-icon>
			<span>{{ captionLangSelected.name }}</span>
		</button>
	</div>
	<div
		*ngIf="isSttReady"
		class="captions-center-container"
		[ngClass]="{
			'events-one': captionEvents.length === 1,
			'events-two': captionEvents.length === 2,
			'events-three': captionEvents.length === 3,
			'screen-xl': captionsContainer.offsetWidth >= 1000,
			'screen-md': captionsContainer.offsetWidth >= 960 && captionsContainer.offsetWidth < 1000,
			'screen-sm': captionsContainer.offsetWidth >= 600 && captionsContainer.offsetWidth < 960,
			'screen-xs': captionsContainer.offsetWidth < 600
		}"
	>
		<div class="element" *ngFor="let caption of captionEvents; let i = index" @captionAnimation>
			<p id="speaker" [ngStyle]="{ color: caption.color }">
				{{ caption.nickname }}
			</p>
			<div
				id="caption-event"
				class="caption-event"
				[ngClass]="{ 'going-to-disappear': i === 0 && captionEvents.length === MAX_EVENTS_LIMIT }"
				#captionEventElement
			>
				<span id="caption-text" class="caption-text">{{ caption.text }}</span>
			</div>
		</div>
	</div>
	<div *ngIf="!isSttReady" class="captions-center-container error-container">
		<mat-spinner [diameter]="20"></mat-spinner>
		<span>{{'ERRORS.SST_CONNECTION' | translate}}</span>

	</div>

	<div *ngIf="captionsContainer.offsetWidth >= 600 && !settingsPanelOpened" class="captions-offset"></div>
</div>
