<mat-expansion-panel
	(opened)="setPanelOpened(true)"
	(closed)="setPanelOpened(false)"
	[expanded]="expanded"
	[ngClass]="{ 'no-body': !isPanelOpened }"
>
	<mat-expansion-panel-header>
		<mat-list>
			<mat-list-item>
				<div
					matListItemIcon
					class="activity-icon"
					[ngClass]="{
						started: broadcastingStatus === broadcastingStatusEnum.STARTED,
						stopped: broadcastingStatus === broadcastingStatusEnum.STOPPED,
						failed: broadcastingStatus === broadcastingStatusEnum.FAILED,
						starting:
							broadcastingStatus === broadcastingStatusEnum.STARTING || broadcastingStatus === broadcastingStatusEnum.STOPPING
					}"
				>
					<mat-icon
						id="broadcasting-icon"
						*ngIf="
							broadcastingStatus !== broadcastingStatusEnum.FAILED && broadcastingStatus !== broadcastingStatusEnum.STARTED
						"
					>
						sensors
					</mat-icon>
					<mat-icon *ngIf="broadcastingStatus === broadcastingStatusEnum.FAILED">error</mat-icon>
					<mat-icon class="blink" *ngIf="broadcastingStatus === broadcastingStatusEnum.STARTED">sensors</mat-icon>
				</div>
				<h3 matListItemTitle class="activity-title">{{ 'PANEL.STREAMING.TITLE' | translate }}</h3>
				<p matListItemLine class="activity-subtitle">{{ 'PANEL.STREAMING.SUBTITLE' | translate }}</p>
				<div class="activity-action-buttons" matListItemMeta>
					<div
						id="broadcasting-status"
						class="activity-status"
						[ngClass]="{
							started: broadcastingStatus === broadcastingStatusEnum.STARTED,
							stopped: broadcastingStatus === broadcastingStatusEnum.STOPPED,
							failed: broadcastingStatus === broadcastingStatusEnum.FAILED,
							starting:
								broadcastingStatus === broadcastingStatusEnum.STARTING ||
								broadcastingStatus === broadcastingStatusEnum.STOPPING
						}"
					>
						<span>{{ broadcastingStatus | uppercase }}</span>
					</div>
				</div>
			</mat-list-item>
		</mat-list>
	</mat-expansion-panel-header>
	<div *ngIf="isPanelOpened" class="panel-body-container">
		<div class="content">
			<!-- Broadcasting image -->
			<div *ngIf="broadcastingStatus === broadcastingStatusEnum.STOPPED">
				<img
					src="data:image/png;base64,[encoded data, 14604 characters]"
				/>
			</div>

			<!-- Broadcasting button -->
			<div class="input-container" id="broadcasting-url-input">
				<input
					placeholder="{{ 'PANEL.STREAMING.URL' | translate }}"
					[disabled]="
						broadcastingStatus !== broadcastingStatusEnum.STOPPED && broadcastingStatus !== broadcastingStatusEnum.FAILED
					"
					autocomplete="off"
					(keypress)="eventKeyPress($event)"
					[(ngModel)]="broadcastUrl"
					id="broadcast-url-input"
				/>
				<button
					mat-icon-button
					*ngIf="broadcastingStatus !== broadcastingStatusEnum.STARTED"
					id="broadcasting-btn"
					[disabled]="
						!broadcastUrl ||
						broadcastingStatus === broadcastingStatusEnum.STARTING ||
						broadcastingStatus === broadcastingStatusEnum.STOPPING
					"
					(click)="startBroadcasting()"
					matTooltip="{{ 'PANEL.STREAMING.START' | translate }}"
				>
					<mat-icon>play_circle</mat-icon>
				</button>

				<button
					mat-icon-button
					*ngIf="broadcastingStatus === broadcastingStatusEnum.STARTED"
					id="stop-broadcasting-btn"
					(click)="stopBroadcasting()"
					matTooltip="{{ 'PANEL.STREAMING.STOP' | translate }}"
				>
					<mat-icon>stop_circle</mat-icon>
				</button>
			</div>

			<div>
				<p>{{ 'CONTENT_SUBTITLE' | translate }}</p>
				<p *ngIf="urlRequiredError" class="error-text" id="required-url-error">{{ 'PANEL.STREAMING.REQUIRED_URL' | translate }}</p>
				<p *ngIf="broadcastingError" class="error-text" id="broadcasting-error">{{ broadcastingError }}</p>
			</div>
		</div>
	</div>
</mat-expansion-panel>
