<!-- Dummy Entry for when there is a gap in the schedule -->
<div *ngIf="dummyProgram" class="programBox" [ngClass]="'guide_type_default'"
    [style.width.%]=durationToWidth(dummyProgram)>
    <div class="programTitle">{{ dummyProgram.Title }}</div>
    <div class="programBody">
        <div class="programCatType">{{ dummyProgram.Category }}</div>
        <div class="programSubtitle"></div>
    </div>
</div>

<div class="programBox cursor-pointer" [ngClass]="[typeclass, catclass, 'guide_type_default']"
    [style.width.%]=durationToWidth(program) (click)="openDialog()" pTooltip="{{ getToolTip() }}" tooltipPosition="top">
    <div class="programTitle">{{ program.Title }}</div>
    <div class="programBody">
        <div class="programCatType">{{ program.Category }}</div>
        <div *ngIf="program.Recording">
            <!-- Recorded = -3, Recording = -2, WillRecord = -1, -->
            <div class="programCatType" [ngClass]="[-3,-2,-1].indexOf(program.Recording.Status)>-1?
                'bg-green-500' : 'bg-pink-400'">
                {{ program.Recording.StatusName }}</div>
        </div>
        <div class="programSubtitle">{{(program.Season ? 'S' + program.Season + 'E' + program.Episode : '') + ' ' +
            program.SubTitle }}</div>
    </div>
</div>