<mat-expansion-panel (opened)="panelOpened()" (closed)="panelClosed()" [expanded]="expanded">
	<mat-expansion-panel-header>
		<mat-list>
			<mat-list-item>
				<div
					matListAvatar
					class="activity-icon"
					[ngClass]="{
						started: recordingStatus === recStatusEnum.STARTED,
						stopped: recordingStatus === recStatusEnum.STOPPED,
						failed: recordingStatus === recStatusEnum.FAILED,
						pending: recordingStatus === recStatusEnum.STARTING || recordingStatus === recStatusEnum.STOPPING
					}"
				>
					<mat-icon *ngIf="recordingStatus !== recStatusEnum.FAILED && recordingStatus !== recStatusEnum.STARTED">
						video_camera_front
					</mat-icon>
					<mat-icon *ngIf="recordingStatus === recStatusEnum.FAILED">error</mat-icon>
					<mat-icon class="blink" *ngIf="recordingStatus === recStatusEnum.STARTED">radio_button_checked</mat-icon>
				</div>
				<h3 matLine class="activity-title">{{ 'PANEL.RECORDING.TITLE' | translate }}</h3>
				<p matLine class="activity-subtitle">{{ 'PANEL.RECORDING.SUBTITLE' | translate }}</p>
				<div class="activity-action-buttons">
					<div
						id="recording-status"
						[ngClass]="{
							started: recordingStatus === recStatusEnum.STARTED,
							stopped: recordingStatus === recStatusEnum.STOPPED,
							failed: recordingStatus === recStatusEnum.FAILED,
							pending: recordingStatus === recStatusEnum.STARTING || recordingStatus === recStatusEnum.STOPPING
						}"
					>
						<span>{{ recordingStatus | uppercase }}</span>
					</div>
				</div>
			</mat-list-item>
		</mat-list>
	</mat-expansion-panel-header>
	<div *ngIf="opened" class="panel-body-container">
		<div class="content">
			<!-- Recording image -->
			<div *ngIf="recordingsList.length === 0">
				<img
					src="data:image/png;base64,[encoded data, 8680 characters]"
				/>
			</div>

			<h2 *ngIf="recordingsList.length === 0">{{ 'PANEL.RECORDING.CONTENT_TITLE' | translate }}</h2>
			<span *ngIf="recordingsList.length === 0">{{ 'PANEL.RECORDING.CONTENT_SUBTITLE' | translate }}</span>

			<!-- Recording button -->
			<div *ngIf="isSessionCreator" class="item recording-action-buttons">
				<button *ngIf="recordingAlive" mat-flat-button id="stop-recording-btn" (click)="stopRecording()">
					<span>{{ 'TOOLBAR.STOP_RECORDING' | translate }}</span>
				</button>

				<button
					*ngIf="recordingStatus === recStatusEnum.STOPPED"
					mat-flat-button
					id="start-recording-btn"
					(click)="startRecording()"
				>
					<span *ngIf="recordingStatus === recStatusEnum.STOPPED">{{ 'TOOLBAR.START_RECORDING' | translate }}</span>
				</button>

				<span *ngIf="recordingStatus === recStatusEnum.STARTING">{{ 'PANEL.RECORDING.STARTING' | translate }} </span>
				<span *ngIf="recordingStatus === recStatusEnum.STOPPING">{{ 'PANEL.RECORDING.STOPPING' | translate }} </span>
				<span *ngIf="recordingStatus === recStatusEnum.FAILED">Message: </span>
				<span *ngIf="recordingStatus === recStatusEnum.FAILED" class="recording-error">{{ recordingError | json }} </span>
				<div>
					<button
						*ngIf="recordingStatus === recStatusEnum.FAILED"
						mat-flat-button
						id="reset-recording-status-btn"
						(click)="resetStatus()"
					>
						<span>{{ 'PANEL.RECORDING.RESTORE' | translate }}</span>
					</button>
				</div>
			</div>

			<!-- Message for no Moderators-->
			<p *ngIf="!isSessionCreator" class="not-allowed-message">{{ 'PANEL.RECORDING.NO_MODERATOR' | translate }}</p>
		</div>
		<mat-divider *ngIf="recordingsList.length > 0"></mat-divider>

		<!-- Recording list -->
		<div *ngIf="recordingsList.length > 0" class="item">
			<mat-list>
				<div mat-subheader>{{ 'PANEL.RECORDING.RECORDINGS' | translate }}</div>
				<mat-list-item *ngFor="let recording of recordingsList">
					<mat-icon class="recording-icon" mat-list-icon>video_file</mat-icon>
					<div mat-line>
						<span class="recording-name">{{ recording.id }}</span>
					</div>
					<div mat-line class="time-container">
						<span class="recording-duration"> {{ recording.duration | duration }} </span>
						<span class="recording-size"> | {{ recording.size / 1024 / 1024 | number: '1.1-2' }} MBs</span>
					</div>
					<div mat-line class="recording-date">{{ recording.createdAt | date: 'HH:mm - dd/MM/yyyy' }}</div>

					<button
						mat-icon-button
						(click)="play(recording)"
						id="play-recording-btn"
						matTooltip="{{ 'PANEL.RECORDING.PLAY' | translate }}"
					>
						<mat-icon>play_arrow</mat-icon>
					</button>
					<button
						mat-icon-button
						(click)="download(recording)"
						id="download-recording-btn"
						matTooltip="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}"
					>
						<mat-icon>download</mat-icon>
					</button>

					<button
						mat-icon-button
						class="delete-recording-btn"
						id="delete-recording-btn"
						(click)="deleteRecording(recording.id)"
						matTooltip="{{ 'PANEL.RECORDING.DELETE' | translate }}"
					>
						<mat-icon>delete</mat-icon>
					</button>
				</mat-list-item>
			</mat-list>
		</div>
	</div>
</mat-expansion-panel>
