<div class="dashboard-container">
	<mat-toolbar class="header">
		<span>{{ title || ('ADMIN.DASHBOARD_TITLE' | translate) }}</span>
		<span class="toolbar-spacer"></span>

		<button class="logout-btn" mat-icon-button aria-label="Refresh" (click)="logout()">
			<mat-icon>logout</mat-icon>
		</button>
	</mat-toolbar>

	<div class="dashboard-body">
		<mat-toolbar id="toolbar-search">
			<div class="search-bar">
				<textarea
					id="search-input"
					maxlength="100"
					rows="4"
					placeholder="{{ 'ADMIN.RECORDINGS.SEARCH' | translate }}"
					autocomplete="off"
					[(ngModel)]="searchValue"
				></textarea>
				<button *ngIf="searchValue" class="searchbar-btn" mat-icon-button aria-label="Clear" (click)="searchValue = ''">
					<mat-icon>close</mat-icon>
				</button>
				<button *ngIf="!searchValue" class="searchbar-btn" mat-icon-button aria-label="Search">
					<mat-icon>search</mat-icon>
				</button>
			</div>

			<button id="sort-menu-btn" color="primary" mat-flat-button [matMenuTriggerFor]="sortMenu">
				{{ sortByLegend }}
				<mat-icon>arrow_drop_down</mat-icon>
			</button>

			<mat-menu #sortMenu="matMenu">
				<button mat-menu-item class="order-select-btn" (click)="sortRecordingsByDateStart()">
					{{ 'ADMIN.RECORDINGS.DATE_START' | translate }}
				</button>
				<button mat-menu-item class="order-select-btn" (click)="sortRecordingsByDateEnd()">
					{{ 'ADMIN.RECORDINGS.DATE_END' | translate }}
				</button>
				<button mat-menu-item class="order-select-btn" (click)="sortRecordingsByDuration()">
					{{ 'ADMIN.RECORDINGS.DURATION' | translate }}
				</button>
				<button mat-menu-item class="order-select-btn" (click)="sortRecordingsBySize()">
					{{ 'ADMIN.RECORDINGS.SIZE' | translate }}
				</button>
			</mat-menu>

			<span class="toolbar-spacer"></span>

			<button mat-icon-button aria-label="Refresh" (click)="refreshRecordings()">
				<mat-icon>refresh</mat-icon>
			</button>
		</mat-toolbar>

		<div class="recordings-container">
			<div *ngIf="!recordings || recordings.length === 0" class="no-recordings-warn">
				<span>{{ 'ADMIN.RECORDINGS.EMPTY' | translate }}</span>
			</div>

			<div
				*ngFor="
					let recording of recordings
						| searchByStringProperty: { properties: ['roomName', 'filename', 'outputMode'], filter: searchValue };
					trackBy: trackByRecordingId
				"
				class="recording-card"
			>
				<mat-card appearance="outlined" class="card">
					<mat-card-content>
						<div class="video-div-container">
							<img
								src="data:image/png;base64,[encoded data, 9992 characters]"
							/>
							<div class="video-btns">
								<button *ngIf="recording.status === recordingStatusEnum.READY" mat-icon-button (click)="play(recording)">
									<mat-icon id="play" aria-label="Play" title="{{ 'PANEL.RECORDING.PLAY' | translate }}"
										>play_arrow</mat-icon
									>
								</button>

								<button
									(click)="download(recording)"
									*ngIf="
										(recording.location && recording.status === recordingStatusEnum.READY) ||
										recording.status === recordingStatusEnum.FAILED
									"
									mat-icon-button
									aria-label="Download"
									title="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}"
								>
									<mat-icon id="download">download</mat-icon>
								</button>
								<button
									mat-icon-button
									class="delete-recording-btn"
									(click)="deleteRecording(recording)"
									*ngIf="
										recording.status === recordingStatusEnum.READY || recording.status === recordingStatusEnum.FAILED
									"
								>
									<mat-icon id="delete" aria-label="Delete" title="{{ 'PANEL.RECORDING.DELETE' | translate }}"
										>delete</mat-icon
									>
								</button>
							</div>
						</div>
						<div class="video-info-container">
							<div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.RECORDINGS.NAME' | translate }}</span
									><span class="video-card-value">{{ recording.filename }}</span>
								</div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.RECORDINGS.ROOM' | translate }}</span
									><span class="video-card-value">{{ recording.roomName }}</span>
								</div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.RECORDINGS.OUTPUT' | translate }}</span
									><span class="video-card-value">{{ recording.outputMode }}</span>
								</div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.RECORDINGS.DATE_START' | translate }}</span
									><span class="video-card-value">{{ recording.startedAt | date: 'M/d/yy, H:mm:ss' }}</span>
								</div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.RECORDINGS.DATE_END' | translate }}</span
									><span class="video-card-value">{{ recording.endedAt | date: 'M/d/yy, H:mm:ss' }}</span>
								</div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.RECORDINGS.DURATION' | translate }}</span
									><span class="video-card-value">{{ recording.duration | duration }}</span>
								</div>
								<div class="video-div-tag">
									<span class="video-card-tag">{{ 'ADMIN.RECORDINGS.SIZE' | translate }}</span
									><span class="video-card-value">{{ recording.size / 1024 / 1024 | number: '1.1-2' }} MB</span>
								</div>
								<div class="video-div-tag" style="margin-top: 11px">
									<span class="video-card-tag">{{ 'ADMIN.RECORDINGS.STATUS' | translate }}</span>
									<span class="video-card-value status-value" [ngClass]="recording.status">{{ recording.status }}</span>
								</div>
							</div>
						</div>
					</mat-card-content>
				</mat-card>
			</div>
		</div>

		<div class="load-more-container">
			<button mat-fab extended class="load-more-btn" (click)="loadMore($event)">
				<mat-icon>keyboard_double_arrow_down</mat-icon>
				{{ 'ADMIN.LOAD_MORE' | translate }}
			</button>
		</div>
	</div>

	<mat-toolbar class="footer" id="footer" role="heading">
		<span>{{ 'ADMIN.POWERED_BY' | translate }}</span>
		<a href="https://openvidu.io/">OpenVidu</a>
	</mat-toolbar>
</div>
