<div *ngIf="series" class="content-space">
    <button class="btn btn-sm btn-success pull-right" (click)="submitRequests()" title="Go to top">{{ 'Search.TvShows.SubmitRequest' | translate }}</button>
    
    <ngb-tabset>
             
        <div *ngFor="let season of series.seasonRequests">
            <ngb-tab [id]="season.seasonNumber" [title]="season.seasonNumber">
                <ng-template ngbTabContent>
                    <h2 [translate]="'Requests.SeasonNumberHeading'" [translateParams]="{seasonNumber: season.seasonNumber}">Season: {{season.seasonNumber}}</h2>
                    
                    <button (click)="addAllEpisodes(season)" class="btn btn-sm btn-primary-outline" [translate]="'Search.TvShows.SelectAllInSeason'" [translateParams]="{seasonNumber: season.seasonNumber}">Select All in Season {{season.seasonNumber}}</button>
                    <table class="table table-striped table-hover table-responsive table-condensed">
                        <thead>
                        <tr>
                            <th>
                                <a>
                                    #
                                </a>
                            </th>
                            <th>
                                <a>
                                    Title
                                </a>
                            </th>
                            <th>
                                <a>
                                    Air Date
                                </a>
                            </th>
                            <th>
                                <a>
                                    Status
                                </a>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let ep of season.episodes">
                            <td>
                                {{ep.episodeNumber}}
                            </td>
                            <td>
                                {{ep.title}}
                            </td>
                            <td>
                                {{ep.airDate | date: 'dd/MM/yyyy' }}
                            </td>
                            <td>
                                <ng-template [ngIf]="ep.available"><span class="label label-success" id="availableLabel">Available</span></ng-template>
                                <ng-template [ngIf]="ep.approved && !ep.available "><span class="label label-info" id="processingRequestLabel">Processing Request</span></ng-template>
                                <ng-template [ngIf]="ep.selected"><span class="label label-info" id="selectedLabel">Selected</span></ng-template>
                                <ng-template [ngIf]="ep.requested && !ep.approved && !ep.available && !ep.selected"><span class="label label-warning" id="pendingApprovalLabel">Pending Approval</span></ng-template>
                                <ng-template [ngIf]="!ep.requested && !ep.available && !ep.approved"><span class="label label-danger" id="notRequetsedLabel">Not Requested</span></ng-template>
                            </td>

                            <td>
                                <button *ngIf="!ep.selected" (click)="addRequest(ep)" [disabled]="ep.available || ep.requested || ep.approved" class="btn btn-sm btn-primary-outline">Select</button>
                                <button *ngIf="ep.selected" (click)="removeRequest(ep)" class="btn btn-sm btn-primary-outline">Unselect</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </ng-template>
            </ngb-tab>
        </div>
    </ngb-tabset>
    
</div>
