<div class="panel-container" id="background-effects-container" [class.prejoin-mode]="mode === 'prejoin'">
	@if (mode === 'meeting') {
		<div class="panel-header-container">
			<h3 class="panel-title">{{ 'PANEL.BACKGROUND.TITLE' | translate }}</h3>

			<button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()">
				<mat-icon>close</mat-icon>
			</button>
		</div>
	} @else {
		<button class="panel-close-button" mat-icon-button matTooltip="{{ 'PANEL.CLOSE' | translate }}" (click)="close()">
			<mat-icon>arrow_back</mat-icon>
		</button>
	}

	@if (!isVirtualBackgroundSupported()) {
		<div class="not-supported-message">
			<p class="warning-title">{{ 'PANEL.BACKGROUND.NOT_SUPPORTED' | translate }}</p>
			<p class="warning-description">{{ 'PANEL.BACKGROUND.NOT_SUPPORTED_DESCRIPTION' | translate }}</p>
		</div>
	}

	<div class="effects-container" fxFlex="100%" fxLayoutAlign="space-evenly none">
		<div>
			<h4 class="background-title">{{ 'PANEL.BACKGROUND.BLURRED_SECTION' | translate }}</h4>
			<div>
				<button
					*ngFor="let effect of noEffectAndBlurredBackground"
					mat-icon-button
					class="effect-button"
					[class.active-effect-btn]="backgroundSelectedId === effect.id"
					(click)="applyBackground(effect)"
					[attr.id]="effect.id + '-btn'"
					[disabled]="!isVirtualBackgroundSupported()"
					[matTooltip]="
						effect.type === effectType.NONE
							? ('PANEL.BACKGROUND.NO_EFFECTS' | translate)
							: ('PANEL.BACKGROUND.BLURRED_EFFECT' | translate)
					"
				>
					<mat-icon>{{ effect.thumbnail }}</mat-icon>
				</button>
			</div>
		</div>
		<hr />
		<div>
			<h4 class="background-title">{{ 'PANEL.BACKGROUND.IMAGES_SECTION' | translate }}</h4>

			<div class="grid">
				<div
					*ngFor="let effect of backgroundImages"
					class="effect-button"
					[id]="'effect-' + effect.id"
					[class.active-effect-btn]="backgroundSelectedId === effect.id"
					[class.disabled]="!isVirtualBackgroundSupported()"
					(click)="isVirtualBackgroundSupported() && applyBackground(effect)"
				>
					<img [src]="effect.thumbnail" />
				</div>
			</div>
		</div>
	</div>
</div>
