<div style="min-width: 960px;">
    <div style="white-space: 'pre-line';">
        <p-toast position="center"></p-toast>
    </div>
    <h2>{{ 'dashboard.upcoming.heading' | translate }}</h2>
    <div class="block card w-full">
        <div style="height: 90vh">
            <p-table #table *ngIf="showTable" [value]="programs" scrollHeight="flex" [scrollable]="true"
                [totalRecords]="totalRecords" styleClass="p-datatable-gridlines p-datatable-sm" [virtualScroll]="true"
                [rows]="100" [lazy]="true" (onLazyLoad)="loadLazy($event)" [rowHover]="true" sortField="StartTime">

                <ng-template pTemplate="caption">
                    <!-- Top Buttons -->
                    <div class="flex align-items-center">

                        {{ 'dashboard.upcoming.status' | translate }}: &nbsp;
                        <p-dropdown [(ngModel)]="selectedStatus" [options]="dataService.recStatusList"
                            optionLabel="Name" optionValue="Status" name="Statusfilter" (onChange)="onFilter()"
                            placeholder="{{ 'data.recstatus.Default' | translate }}" [showClear]="true" class="'px-3">
                        </p-dropdown>

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        {{ 'dashboard.upcoming.recrule' | translate }}: &nbsp;
                        <p-dropdown [(ngModel)]="selectedRule" [options]="recRules" name="rulefilter"
                            (onChange)="onFilter()" optionLabel="Title"
                            placeholder="{{ 'settings.chanedit.all' | translate }}" [showClear]="true" class="'px-3">
                        </p-dropdown>

                        <!-- Refresh button and number of rows. -->
                        <div *ngIf="refreshing else refreshBn"><p-progressSpinner
                                [style]="{width: '2rem', height: '2rem'}"></p-progressSpinner></div>
                        <ng-template #refreshBn>
                            <button pButton pRipple icon="pi pi-refresh" class="p-button-text .p-button-success"
                                (click)="refresh()" pTooltip="{{ 'common.refresh' | translate }}"></button>
                            &nbsp;&nbsp;&nbsp;{{ programs.length }} {{ 'common.rows' | translate }}
                        </ng-template>
                    </div>
                </ng-template>

                <ng-template pTemplate="header">
                    <tr>
                        <!-- Column Headings -->
                        <th style="width: 10%" class="p-1" pSortableColumn="StartTime">
                            {{ 'dashboard.upcoming.date' | translate }}<p-sortIcon field="StartTime"></p-sortIcon>
                        </th>
                        <th style="width: 7%" class="justify-content-end p-1">
                            {{ 'dashboard.upcoming.time' | translate }} </th>
                        <th style="width: 7%" class="justify-content-end pl-1 pr-3 pt-1 pb-1"></th>
                        <th style="width: 8%" class="p-1">{{ 'dashboard.upcoming.encoder' |
                            translate }} </th>
                        <th style="width: 11%" class="p-1" pSortableColumn="Title">
                            {{ 'dashboard.recordings.title' | translate }}<p-sortIcon field="Title"></p-sortIcon>
                        </th>
                        <th style="width: 17%" class="p-1">{{ 'dashboard.recordings.subtitle' | translate
                            }}</th>
                        <th style="width: 4%" class="p-1">{{ 'dashboard.recordings.seas_ep' | translate
                            }}</th>
                        <th style="width: 8%" class="justify-content-end p-1">
                            {{ 'dashboard.recordings.orig_airdate' | translate }}
                        </th>
                        <th style="width: 9%" class="p-1" pSortableColumn="Channel.ChanNum">{{
                            'dashboard.recordings.channel' | translate
                            }} <p-sortIcon field="Channel.ChanNum"></p-sortIcon></th>
                        <th style="width: 8%" class="p-1">
                            {{ 'dashboard.recordings.recgrp' | translate }} </th>
                        <th style="width: 7%" class="p-1">
                            {{ 'dashboard.upcoming.status' | translate }} </th>
                        <th style="width: 4%" class="p-1" style="white-space: nowrap;">
                            <button pButton pRipple icon="pi pi-paperclip" [disabled]="true"
                                class="p-button-text p-button-primary"></button>
                            <button pButton pRipple icon="pi pi-pencil" [disabled]="true"
                                class="p-button-text p-button-primary"></button>
                        </th>
                    </tr>
                </ng-template>

                <ng-template pTemplate="body" let-program let-rowIndex="rowIndex">
                    <tr #row>
                        <td class="p-1 overflow-hidden">
                            <div class="mycell">
                                <div class="mytext" [innerHTML]="formatStartDate(program, rowIndex)"></div>
                            </div>
                        </td>
                        <td class="justify-content-end p-1 overflow-hidden">
                            <div class="mycell">
                                <div class="mytext">{{formatStartTime(program)}} </div>
                            </div>
                        </td>
                        <td class="justify-content-end pl-1 pr-3 pt-1 pb-1 overflow-hidden">
                            <div class="mycell">
                                <div class="mytext">{{ getDuration(program) | number:'1.0-0' }} min</div>
                            </div>
                        </td>
                        <td class="p-1">
                            <div class="mycell">
                                <div class="mytext">{{program.Recording.EncoderName}}</div>
                            </div>
                        </td>
                        <td class="p-1 overflow-hidden">
                            <div class="mycell">
                                <div class="mytext">{{program.Title}}</div>
                            </div>
                        </td>
                        <td class="p-1 overflow-hidden" pTooltip="{{program.Description}}" tooltipPosition="top">
                            <div class="mycell">
                                <div class="mytext">{{program.SubTitle.slice(0,50)}}</div>
                            </div>
                        </td>
                        <td class="p-1">
                            <div *ngIf="program.Season>0 || program.Episode>0">
                                {{program.Season}}x{{program.Episode}}
                            </div>
                        </td>
                        <td class="justify-content-end p-1">
                            <div class="mycell">
                                <div class="mytext" [innerHTML]="formatAirDate(program)"></div>
                            </div>
                        </td>
                        <td class="p-1">
                            <div class="mycell">
                                <div class="mytext">{{program.Channel.ChanNum}} {{program.Channel.CallSign}}</div>
                            </div>
                        </td>
                        <td class="p-1">{{program.Recording.RecGroup}}</td>
                        <td class="p-1">
                            <div class="mycell">
                                <div class="mytext" *ngIf="program.Recording" [ngClass]="['WillRecord','Recording','Recorded'].indexOf(program.Recording.StatusName)>-1 ?
                                'text-green-500' : 'text-pink-500'">
                                    {{dataService.recStatusText[program.Recording.StatusName]}}
                                </div>
                            </div>
                        </td>
                        <td class="pt-1 pb-0" style="white-space: nowrap;">
                            <button pButton pRipple icon="pi pi-stop-circle" class="p-button-text p-button-danger"
                                *ngIf="['Recording', 'Failing'].indexOf(program.Recording.StatusName) > -1 else restartBn"
                                (click)="stopRequest(program)"
                                pTooltip="{{ 'dashboard.recordings.stop_recording' | translate }}"
                                tooltipPosition="left"></button>
                            <ng-template #restartBn>
                                <button pButton pRipple icon="pi pi-video" class="p-button-text p-button-primary"
                                *ngIf="['Recorded', 'Failed'].indexOf(program.Recording.StatusName) > -1 else overrideBn"
                                (click)="restartRequest(program)"
                                pTooltip="{{ 'dashboard.recordings.restart_recording' | translate }}"
                                tooltipPosition="left"></button>
                            </ng-template>
                            <ng-template #overrideBn>
                                <button pButton pRipple icon="pi pi-paperclip" class="p-button-text p-button-primary"
                                    (click)="override(program)"
                                    pTooltip="{{ 'dashboard.recordings.override_rule' | translate }}"
                                    tooltipPosition="left"></button>
                            </ng-template>
                            <button pButton pRipple icon="pi pi-pencil" class="p-button-text p-button-primary"
                                (click)="updateRecRule(program)"
                                pTooltip="{{ 'dashboard.recordings.edit_rule' | translate }}" tooltipPosition="left"
                                [disabled]="program.Recording && (program.Recording.RecType == 7 || program.Recording.RecType == 8
                                    || program.Recording.StatusName == 'NeverRecord')"></button>
                        </td>
                    </tr>
                </ng-template>
            </p-table>

            <p-dialog header="{{ 'dashboard.recordings.stop_recording' | translate }}" [(visible)]="displayStop"
                [modal]="true" [draggable]="false" [resizable]="false">
                <h2>{{ 'settings.common.ru_sure' | translate }}</h2>
                <p>{{ 'dashboard.recordings.stop_details' |
                    translate }} <br><b> {{ program?.Title }}: {{ program?.SubTitle }}</b></p>
                <ng-template pTemplate="footer">
                    <div class="col-12" style="text-align: left;">
                        <p-message *ngIf="errorCount > 0" severity="error"
                            text="{{ 'common.networkfail' | translate }}"></p-message>
                    </div>
                    <p-button icon="pi pi-times-circle" (onClick)="displayStop=false"
                        label="{{ 'common.close' | translate }}" styleClass="p-button-warning">
                    </p-button>
                    <p-button icon="pi pi-check-circle" (onClick)="stopRecording(program!)"
                        label="{{ 'dashboard.recordings.stop_recording' | translate }}"
                        styleClass="p-button-danger"></p-button>
                </ng-template>
            </p-dialog>

            <app-schedule [inter]="inter"></app-schedule>
        </div>

    </div>
</div>