<div style="height: 90vh">
    <p-table [value]="programs" scrollHeight="flex" [scrollable]="true" styleClass="p-datatable-striped"
        [rowHover]="true" responsiveLayout="scroll">
        <ng-template pTemplate="header">
            <tr>
                <th style="flex-basis: 8%" class="justify-content-end p-1">
                    {{ 'dashboard.upcoming.date' | translate }} </th>
                <th style="flex-basis: 6%" class="justify-content-end p-1">
                    {{ 'dashboard.upcoming.time' | translate }} </th>
                <th style="flex-basis: 7%" class="justify-content-end pl-1 pr-3 pt-1 pb-1"></th>
                <th style="flex-basis: 12%" class="p-1">
                    {{ 'dashboard.recordings.title' | translate }}</th>
                <th style="flex-basis: 18%" class="p-1">{{ 'dashboard.recordings.subtitle' | translate
                    }}</th>
                <th style="flex-basis: 4%" class="p-1">{{ 'dashboard.recordings.seas_ep' | translate
                    }}</th>
                <th style="flex-basis: 8%" class="justify-content-end p-1">
                    {{ 'dashboard.recordings.orig_airdate' | translate }}
                </th>
                <th style="flex-basis: 10%" class="p-1">{{ 'dashboard.recordings.channel' | translate
                    }}</th>
                <th style="flex-basis: 7%" class="p-1">
                    {{ 'dashboard.upcoming.status' | translate }} </th>
                <th style="flex-basis: 2%" class="p-1"> <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>
            <tr [ngClass]="getClasses(program)">
                <td style="flex-basis: 8%" class="justify-content-end p-1 overflow-hidden">
                    <div [innerHTML]="formatStartDate(program)"></div>
                </td>
                <td style="flex-basis: 6%" class="justify-content-end p-1 overflow-hidden">
                    {{formatStartTime(program)}}</td>
                <td style="flex-basis: 7%" class="justify-content-end pl-1 pr-3 pt-1 pb-1 overflow-hidden">
                    {{ getDuration(program) | number:'1.0-0' }} min</td>
                <td style="flex-basis: 12%" class="p-1 overflow-hidden"> {{program.Title}}</td>
                <td style="flex-basis: 18%" class="p-1 overflow-hidden" pTooltip="{{program.Description}}"
                    tooltipPosition="top">
                    {{program.SubTitle.slice(0,50)}}</td>
                <td style="flex-basis: 4%" class="p-1">
                    <div *ngIf="program.Season>0 || program.Episode>0"> {{program.Season}}x{{program.Episode}}</div>
                </td>
                <td style="flex-basis: 8%" class="justify-content-end p-1">
                    <div [innerHTML]="formatAirDate(program)"></div>
                </td>
                <td style="flex-basis: 10%" class="p-1">
                    {{program.Channel.ChanNum}} {{program.Channel.CallSign}}</td>
                <td style="flex-basis: 7%" class="p-1">
                    <!-- Recorded = -3, Recording = -2, WillRecord = -1, -->
                    <div *ngIf="program.Recording" [ngClass]="[-3,-2,-1].indexOf(program.Recording.Status)>-1?
                        'bg-green-500' : 'bg-pink-500'" class="text-white">
                        <b>{{program.Recording.StatusName}}</b>
                    </div>
                </td>
                <td style="flex-basis: 2%; background: var(--surface-card);" class="p-1">
                    <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"></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>
</div>