<div class="panel-container" id="background-effects-container" fxLayout="column" fxLayoutAlign="space-evenly none">
	<div class="panel-header-container" fxFlex="55px" fxLayoutAlign="start center">
		<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>

	<div class="effects-container" fxFlex="100%" fxLayoutAlign="space-evenly none">
		<div>
			<h4>{{ '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)"
				>
					<mat-icon
						[matTooltip]="
							effect.type === effectType.NONE
								? ('PANEL.BACKGROUND.NO_EFFECTS' | translate)
								: ('PANEL.BACKGROUND.BLURRED_EFFECT' | translate)
						"
						>{{ effect.thumbnail }}</mat-icon
					>
				</button>
				<!-- <button
					mat-icon-button
					class="effect-button"
					id="hard-blur-btn"
					[class.active-effect-btn]="backgroundSelectedId === 'hard_blur'"
					(click)="applyBackground('hard_blur')"
				>
					<mat-icon matTooltip="Hard blur effect">blur_on</mat-icon>
				</button> -->
			</div>
		</div>
		<hr />
		<div>
			<h4>{{ 'PANEL.BACKGROUND.IMAGES_SECTION' | translate }}</h4>

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