<div class="device-container-element">
	<button mat-icon-button id="microphone-button" [disabled]="!hasAudioDevices" [class.warn-btn]="isAudioMuted" (click)="toggleMic()">
		<mat-icon
			*ngIf="!isAudioMuted"
			[matTooltipDisabled]="!hasAudioDevices"
			matTooltip="{{ 'TOOLBAR.MUTE_AUDIO' | translate }}"
			id="mic"
		>
			mic
		</mat-icon>
		<mat-icon
			*ngIf="isAudioMuted"
			[matTooltipDisabled]="!hasAudioDevices"
			matTooltip="{{ 'TOOLBAR.UNMUTE_AUDIO' | translate }}"
			id="mic_off"
		>
			mic_off
		</mat-icon>
	</button>
	<mat-form-field>
		<mat-label *ngIf="hasAudioDevices">{{ 'PREJOIN.AUDIO_DEVICE' | translate }}</mat-label>
		<mat-label *ngIf="!hasAudioDevices">{{ 'PREJOIN.NO_AUDIO_DEVICE' | translate }}</mat-label>
		<mat-select
			[disabled]="isAudioMuted || !hasAudioDevices"
			[value]="microphoneSelected?.device"
			(click)="onDeviceSelectorClicked.emit()"
			(selectionChange)="onMicrophoneSelected($event)"
		>
			<mat-option *ngFor="let microphone of microphones" [value]="microphone.device">
				{{ microphone.label }}
			</mat-option>
		</mat-select>
	</mat-form-field>
</div>
