<mat-tab-group>
	<mat-tab *ngFor="let season of tv.seasonRequests">
		<ng-template mat-tab-label>
			<div attr.data-test="classStatus{{ season.seasonNumber }}" class="{{ getStatusClass(season) }} top-right">
				<span>{{ 'Requests.Season' | translate }} {{ season.seasonNumber }}</span>
			</div>
		</ng-template>

		<mat-card *ngIf="season.overview" class="mat-elevation-z8">
			<mat-card-content>
				<p>{{ season.overview }}</p>
			</mat-card-content>
		</mat-card>

		<table mat-table [dataSource]="season.episodes" class="mat-elevation-z8">
			<ng-container matColumnDef="select">
				<th mat-header-cell *matHeaderCellDef>
					<mat-checkbox
						attr.data-test="masterCheckbox{{ season.seasonNumber }}"
						*ngIf="isSeasonCheckable(season)"
						(change)="$event ? masterToggle(season.episodes) : null"
						[checked]="selection.hasValue() && isAllSelected(season.episodes)"
						[indeterminate]="selection.hasValue() && !isAllSelected(season.episodes)"
					>
					</mat-checkbox>
				</th>
				<td mat-cell *matCellDef="let row">
					<mat-checkbox
						attr.data-test="episodeCheckbox{{ season.seasonNumber }}{{ row.episodeNumber }}"
						*ngIf="!row.available && !row.requested && !row.approved"
						(click)="$event.stopPropagation()"
						(change)="$event ? selection.toggle(row) : null"
						[checked]="selection.isSelected(row)"
					>
					</mat-checkbox>
				</td>
			</ng-container>

			<ng-container matColumnDef="number">
				<th mat-header-cell *matHeaderCellDef>#</th>
				<td mat-cell *matCellDef="let element">{{ element.episodeNumber }}</td>
			</ng-container>

			<ng-container matColumnDef="title">
				<th mat-header-cell *matHeaderCellDef>{{ 'Requests.GridTitle' | translate }}</th>
				<td mat-cell *matCellDef="let element">{{ element.title }}</td>
			</ng-container>

			<ng-container matColumnDef="airDate">
				<th mat-header-cell *matHeaderCellDef>{{ 'Requests.AirDate' | translate }}</th>
				<td mat-cell *matCellDef="let element">{{ element.airDate | ombiDate: 'P' }}</td>
			</ng-container>

			<ng-container matColumnDef="status">
				<th mat-header-cell *matHeaderCellDef>{{ 'Requests.GridStatus' | translate }}</th>
				<td mat-cell *matCellDef="let ep">
					<div
						attr.data-test="episodeStatus{{ season.seasonNumber }}{{ ep.episodeNumber }}"
						class="{{ getEpisodeStatusClass(ep) }} top-right"
					>
						<span>{{ ep.requestStatus | translate }}</span>
					</div>
				</td>
			</ng-container>

			<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
			<tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="selection.toggle(row)"></tr>
		</table>
	</mat-tab>
</mat-tab-group>

<!-- <div *ngIf="isAdmin">
    <button *ngIf="!request.approved" mat-raised-button color="accent" (click)="approve(request);"> {{ 'Common.Approve' | translate }}</button>
    <button *ngIf="!request.available" mat-raised-button color="warn" (click)="changeAvailability(request, true);">{{ 'Requests.MarkAvailable' | translate }}</button>
    <button *ngIf="request.available" mat-raised-button color="warn" (click)="changeAvailability(request, false);">{{ 'Requests.MarkUnavailable' | translate }}</button>
    <button *ngIf="!request.denied" mat-raised-button color="danger" (click)="deny(request);">{{ 'Requests.Deny' | translate }}</button>
</div>
 -->

<button *ngIf="!tv.fullyAvailable && requestable" mat-fab color="accent" id="addFabBtn" class="floating-fab" [matMenuTriggerFor]="aboveMenu">
	<i class="fas fa-plus fa-lg"></i>
	<mat-menu #aboveMenu="matMenu" yPosition="above">
		<button id="requestAll" mat-menu-item (click)="requestAllSeasons()">{{ 'Search.TvShows.AllSeasons' | translate }}</button>

		<button id="requestFirst" mat-menu-item (click)="requestFirstSeason()">{{ 'Search.TvShows.FirstSeason' | translate }}</button>

		<button id="requestLatest" mat-menu-item (click)="requestLatestSeason()">{{ 'Search.TvShows.LatestSeason' | translate }}</button>

		<button id="requestSelected" mat-menu-item (click)="submitRequests()">{{ 'Common.Request' | translate }}</button>
	</mat-menu>
</button>
