<!-- Captions button -->
@if (showCaptionsButton()) {
	@if (isMobile()) {
		<!-- On mobile, the captions button will be inside a menu -->
		<button
			id="captions-button"
			mat-menu-item
			(click)="onCaptionsClick()"
			[disabled]="isCaptionsButtonDisabled()"
			[disableRipple]="true"
		>
			<mat-icon class="material-symbols-outlined">subtitles</mat-icon>
			<span class="button-text">
				@if (isCaptionsButtonDisabled()) {
					Live captions (disabled by admin)
				} @else {
					{{ areCaptionsEnabledByUser() ? 'Disable live captions' : 'Enable live captions' }}
				}
			</span>
		</button>
	} @else {
		<button
			id="captions-button"
			[ngClass]="areCaptionsEnabledByUser() ? 'active' : ''"
			mat-icon-button
			(click)="onCaptionsClick()"
			[disabled]="isCaptionsButtonDisabled()"
			[disabledInteractive]="isCaptionsButtonDisabled()"
			[disableRipple]="true"
			[matTooltip]="
				isCaptionsButtonDisabled()
					? 'Live captions are disabled by admin'
					: areCaptionsEnabledByUser()
						? 'Disable live captions'
						: 'Enable live captions'
			"
		>
			@if (isCaptionsButtonDisabled()) {
				<mat-icon>subtitles_off</mat-icon>
			} @else {
				<mat-icon>subtitles</mat-icon>
			}
		</button>
	}
}

<!-- Copy Link Button -->
@if (showCopyLinkButton()) {
	@if (isMobile()) {
		<!-- It will appear inside of a menu on mobile view -->
		<button id="copy-speaker-link" mat-menu-item (click)="onCopyLinkClick()" [disableRipple]="true">
			<mat-icon>link</mat-icon>
			<span class="button-text">{{ copyLinkText }}</span>
		</button>
	} @else {
		<!-- It will appear as an icon button on desktop view -->
		<button
			id="copy-speaker-link"
			mat-icon-button
			(click)="onCopyLinkClick()"
			[disableRipple]="true"
			[matTooltip]="copyLinkTooltip"
		>
			<mat-icon>link</mat-icon>
		</button>
	}
}
