<div class="panel-container" id="settings-container" fxLayout="column" fxLayoutAlign="space-evenly none">
	<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
		<h3 class="panel-title">{{ 'PANEL.SETTINGS.TITLE' | translate }}</h3>
		<button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()">
			<mat-icon>close</mat-icon>
		</button>
	</div>

	<div class="settings-container" fxFlex="100%" fxLayoutAlign="space-evenly none">
		<div class="item-menu" [ngClass]="{ mobile: isMobile }">
			<mat-selection-list
				#optionList
				(selectionChange)="onSelectionChanged(optionList.selectedOptions.selected[0]?.value)"
				[multiple]="false"
			>
				<mat-list-option
					class="option"
					id="general-opt"
					[selected]="selectedOption === settingsOptions.GENERAL"
					[value]="settingsOptions.GENERAL"
				>
					<mat-icon mat-list-icon>manage_accounts</mat-icon>
					<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div>
				</mat-list-option>
				<mat-list-option
					class="option"
					id="video-opt"
					[selected]="selectedOption === settingsOptions.VIDEO"
					[value]="settingsOptions.VIDEO"
				>
					<mat-icon mat-list-icon>videocam</mat-icon>
					<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div>
				</mat-list-option>
				<mat-list-option
					class="option"
					id="audio-opt"
					[selected]="selectedOption === settingsOptions.AUDIO"
					[value]="settingsOptions.AUDIO"
				>
					<mat-icon mat-list-icon>mic</mat-icon>
					<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.AUDIO' | translate }}</div>
				</mat-list-option>
				<mat-list-option
					*ngIf="showCaptions"
					class="option"
					[selected]="selectedOption === settingsOptions.CAPTIONS"
					[value]="settingsOptions.CAPTIONS"
					id="captions-opt"
				>
					<mat-icon mat-list-icon>closed_caption</mat-icon>
					<div mat-line *ngIf="!isMobile">{{ 'PANEL.SETTINGS.CAPTIONS' | translate }}</div>
				</mat-list-option>
			</mat-selection-list>
		</div>

		<div class="item-content">
			<div *ngIf="selectedOption === settingsOptions.GENERAL">
				<ov-nickname-input></ov-nickname-input>
				<mat-list>
					<mat-list-item>
						<mat-icon mat-list-icon>language</mat-icon>
						<div mat-line>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
						<ov-lang-selector></ov-lang-selector>
					</mat-list-item>
				</mat-list>
			</div>
			<ov-video-devices-select *ngIf="selectedOption === settingsOptions.VIDEO"></ov-video-devices-select>
			<ov-audio-devices-select *ngIf="selectedOption === settingsOptions.AUDIO"></ov-audio-devices-select>
			<ov-captions-settings *ngIf="selectedOption === settingsOptions.CAPTIONS && showCaptions"></ov-captions-settings>
		</div>
	</div>
</div>
