<h2>{{ 'dashboard.programguide' | translate }} </h2>
<div *ngIf="loaded; else loading" style="min-width: 960px;">
    <div class="block pt-3"></div>
    <div class="flex">
        <div class="flex align-items-center pr-3" *ngIf="displayType == GRID">
            <p-dropdown [(ngModel)]="channelGroup" [options]="channelGroups" name="channelGroup" (onChange)="refresh()"
                optionLabel="Name" pTooltip="{{ 'dashboard.guide.channel_group' | translate }}" tooltipPosition="top">
            </p-dropdown>
        </div>

        <div class="flex align-items-center pr-3"
            *ngIf="[TITLESEARCH,PEOPLESEARCH,FULLSEARCH,CATSEARCH,ANYSEARCH].indexOf(displayType) > -1">
            <span class="p-float-label">
                <p-dropdown [(ngModel)]="groupBy" [options]="groupByList" name="groupBy" (onChange)="refresh()"
                    optionLabel="Name">
                </p-dropdown>
                <label for="float-label" class="white-space-nowrap">{{ 'dashboard.guide.group_by' | translate }}</label>
            </span>
        </div>

        <div class="flex align-items-center">
            <p-calendar [(ngModel)]="m_pickerDate" [showTime]="true" [stepMinute]="30" [dateFormat]="'yy/mm/dd'"
                (onClose)="onDateChange()" (keyup.enter)="onDateChange()" (onBlur)="onDateChange()"
                [selectOtherMonths]="true" [showIcon]="true" [showOnFocus]="true" [showButtonBar]="true"
                [clearButtonStyleClass]="'hidden'" pTooltip="{{ 'dashboard.guide.calendar_tip' | translate }}"
                tooltipPosition="top">
            </p-calendar>
        </div>

        <div class="flex align-items-center p-3" *ngIf="displayType == CHANNEL">
            <b> {{ 'dashboard.guide.channel' | translate }} {{channel.ChanNum}} {{channel.CallSign}}
                {{channel.ChannelName}}</b>
        </div>
        <div class="flex align-items-center p-3" *ngIf="displayType == PEOPLESEARCH">
            <b> {{ 'dashboard.guide.people_search' | translate }} </b>
        </div>
        <div class="flex align-items-center p-3" *ngIf="displayType == TITLESEARCH">
            <b> {{ 'dashboard.guide.title_search' | translate }} </b>
        </div>
        <div class="flex align-items-center p-3" *ngIf="displayType == FULLSEARCH">
            <b> {{ 'dashboard.guide.full_search' | translate }} </b>
        </div>
        <div class="flex align-items-center p-3" *ngIf="displayType == CATSEARCH">
            <b> {{ 'dashboard.guide.cat_search' | translate }} </b>
        </div>

        <div class="flex align-items-center pl-5"
            *ngIf="[GRID,TITLESEARCH,PEOPLESEARCH,FULLSEARCH,CATSEARCH,ANYSEARCH].indexOf(displayType) > -1">
            <input type="text" pInputText id="searchValue" [(ngModel)]="searchValue" name="searchValue" class="text-xl"
                placeholder="{{ 'common.search_placeholder' | translate }}" (keydown)="keydown($event)" />
            <button pButton pRipple icon="pi pi-search" class="p-button-text w-2rem" (click)="titleSearch()"
                pTooltip="{{ 'dashboard.guide.title_search' | translate }}" tooltipPosition="top"></button>
            <button pButton pRipple icon="pi pi-user" class="p-button-text w-2rem" (click)="peopleSearch()"
                pTooltip="{{ 'dashboard.guide.people_search' | translate }}" tooltipPosition="top"></button>
            <button pButton pRipple icon="pi pi-search-plus" class="p-button-text w-2rem" (click)="fullSearch()"
                pTooltip="{{ 'dashboard.guide.full_search' | translate }}" tooltipPosition="top"></button>
            <button pButton pRipple icon="pi pi-bell" class="p-button-text w-2rem" (click)="catSearch()"
                pTooltip="{{ 'dashboard.guide.cat_search' | translate }}" tooltipPosition="top"></button>
            <button pButton pRipple icon="pi pi-sun" class="p-button-text w-2rem" (click)="newSearch()"
                *ngIf="displayType == GRID" pTooltip="{{ 'dashboard.guide.new_search' | translate }}"
                tooltipPosition="top"></button>
            <button pButton pRipple icon="pi pi-video" class="p-button-text w-2rem" (click)="movieSearch()"
                *ngIf="displayType == GRID" pTooltip="{{ 'dashboard.guide.movies' | translate }}"
                tooltipPosition="top"></button>
            <p-checkbox inputId="OnlyNew" [(ngModel)]="onlyNew" name="OnlyNew" #OnlyNew="ngModel" class="mx-1"
                *ngIf="displayType != GRID" [binary]="true" label="{{ 'dashboard.guide.new' | translate }}"
                checkboxIcon="pi pi-check" (onChange)="newSearch()"
                pTooltip="{{ 'dashboard.guide.new_search' | translate }}" tooltipPosition="top">
            </p-checkbox>
            <p-checkbox inputId="Movies" [(ngModel)]="onlyMovies" name="OnlyMovies" #OnlyMovies="ngModel" class="mx-1"
                *ngIf="displayType != GRID" [binary]="true" label="{{ 'dashboard.guide.movies' | translate }}"
                checkboxIcon="pi pi-check" (onChange)="newSearch()"
                pTooltip="{{ 'dashboard.guide.movies' | translate }}" tooltipPosition="top">
            </p-checkbox>
        </div>

        <div class="flex align-items-center"
            *ngIf="[CHANNEL,TITLESEARCH,PEOPLESEARCH,FULLSEARCH,CATSEARCH,ANYSEARCH].indexOf(displayType) > -1">
            <button pButton pRipple icon="pi pi-table" class="p-button-text"
                pTooltip="{{ 'dashboard.guide.retgrid' | translate }}" (click)="onGrid()"
                tooltipPosition="top"></button>
        </div>
        <div class="flex align-items-center">
            <div *ngIf="refreshing else refreshBn"><p-progressSpinner
                    [style]="{width: '30px', height: '30px'}"></p-progressSpinner></div>
            <ng-template #refreshBn>
                <div *ngIf="[CHANNEL,GRID].indexOf(displayType) > -1 ">
                    <button pButton pRipple icon="pi pi-refresh" class="p-button-text"
                        (click)="refreshing=true;refresh()" pTooltip="{{ 'common.refresh' | translate }}"
                        tooltipPosition="top"></button>
                </div>
            </ng-template>
        </div>
        <div class="flex align-items-center">
            <button type="text" pButton label="{{ 'dashboard.guide.colors' | translate }}"
                (click)="showLegend = true"></button>
        </div>
        <div class="flex align-items-center">
            <a href="https://wiki.mythtv.org/wiki/Web_Application:Program_Guide" target="mythtv_wiki">
                <button pButton pRipple icon="pi pi-question-circle" class="p-button-text"
                    pTooltip="{{ 'common.help' | translate }}" tooltipPosition="top"></button>
            </a>
        </div>
    </div>
    <div *ngIf="displayType == GRID">
        <div style="width:100%; height: 90vh; overflow-y: auto;">
            <p-dataView [value]="m_programGuide.ProgramGuide.Channels"
                [totalRecords]="m_programGuide.ProgramGuide.TotalAvailable">
                <ng-template pTemplate="header" styleClass="timeHeader">
                </ng-template>
                <ng-template let-channelrow let-i="rowIndex" pTemplate="listItem">
                    <div class="grid col-12 p-3">
                        <ng-container *ngIf="( i % 5 ) == 0">
                            <div class="col-12">
                                <app-guide-timebar [guide]="this"></app-guide-timebar>
                            </div>
                        </ng-container>
                        <div class="grid flex-grow-1">
                            <div class="col-1">
                                <app-guide-channelicon [channel]=channelrow
                                    [guideComponent]="this"></app-guide-channelicon>
                            </div>
                            <div class="col">
                                <ng-container *ngFor="let program of channelrow.Programs">
                                    <ng-container
                                        *ngIf="!timeChange && inDisplayWindow(program.StartTime, program.EndTime)">
                                        <app-guide-programentry [program]="program"
                                            [guideStartTime]="m_programGuide.ProgramGuide.StartTime"
                                            [guideEndTime]="m_programGuide.ProgramGuide.EndTime" [guideComponent]="this"
                                            [channel]="channelrow" [runningTime]="runningTime">
                                        </app-guide-programentry>
                                    </ng-container>
                                </ng-container>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </p-dataView>
        </div>
    </div>

    <div *ngIf="[CHANNEL,TITLESEARCH,PEOPLESEARCH,FULLSEARCH,CATSEARCH,ANYSEARCH].indexOf(displayType) > -1 ">
        <app-programs [inter]="inter" [programs]="listPrograms"></app-programs>
    </div>

</div>

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

<ng-template #loading>
    <p-progressSpinner></p-progressSpinner>
</ng-template>

<p-dialog header="{{ 'dashboard.guide.colors' | translate }}" [(visible)]="showLegend" [style]="{width: '80vw'}"
    [modal]="true">
    <ng-template pTemplate>
        <app-legend [programGuide]="displayType == GRID ? m_programGuide : null"
            [listPrograms]="displayType == GRID ? null : listPrograms"></app-legend>
    </ng-template>
</p-dialog>