<div style="min-width: 960px;">
    <div style="white-space: 'pre-line';">
        <p-toast position="center"></p-toast>
    </div>
    <h2>{{ 'dashboard.videos.heading' | translate }}</h2>
    <div class="block card w-full" style="height: 90vh">
        <p-menu #menu [popup]="true" [model]="menuToShow"></p-menu>
        <p-table *ngIf="showTable" #table name="table" [value]="videos" scrollHeight="flex" [scrollable]="true"
            styleClass="p-datatable-striped p-datatable-sm" [virtualScroll]="true" [rows]="100" [lazy]="true"
            [totalRecords]="totalRecords" (onLazyLoad)="loadLazy($event)" [rowHover]="true" responsiveLayout="scroll"
             [sortField]="sortField" [sortOrder]="sortOrder" [scrollable]="true"  (onSort)="onSort($event)">
            <ng-template pTemplate="caption">
                <!-- Top Buttons -->
                <div class="flex align-items-center">
                    <p-button (onClick)="breadCrumb(0)" label="{{ 'dashboard.videos.heading' | translate }}" class="p-1"
                        styleClass="p-button-primary">
                    </p-button>

                    <span *ngFor="let dir of directory; index as ix">
                        <p-button (onClick)="breadCrumb(ix+1)" label="{{ dir }}" class="px-1"
                            styleClass="p-button-primary">
                        </p-button>
                    </span>
                    &nbsp;&nbsp;&nbsp;
                    <p-checkbox inputId="showAllVideos" [(ngModel)]="showAllVideos" name="showAllVideos"
                        #showAll="ngModel" [binary]="true" (onChange)="showAllChange()"
                        label="{{ 'dashboard.videos.showall' | translate }} ">
                    </p-checkbox>
                    &nbsp;&nbsp;&nbsp;
                    <span class="p-input-icon-right">
                      <i class="pi pi-times" (click)="resetSearch()" *ngIf="searchValue"></i>
                      <input type="text" pInputText id="searchValue" [(ngModel)]="searchValue" name="searchValue"
                        class="text-xl" placeholder="{{ 'common.search_placeholder' | translate }}"
                        pTooltip="{{ 'dashboard.recordings.regex' | translate }}" tooltipPosition="top"
                        (keydown)="keydown($event)" />
                    </span>

                    <button pButton pRipple icon="pi pi-search" class="p-button-text w-2rem" (click)="onFilter()"
                      pTooltip="{{ 'dashboard.guide.title_search' | translate }}" tooltipPosition="top"></button>

                    &nbsp;&nbsp;&nbsp; {{ 'dashboard.videos.category' | translate }}: &nbsp;

                 <p-dropdown [(ngModel)]="selectedCategory" [options]="catGroups" name="filter" (onChange)="onFilter()"
                 placeholder="{{ 'settings.chanedit.all' | translate }}" [showClear]="true" optionLabel="Name" optionValue="Id" class="'px-3">
                 </p-dropdown>

                    <div *ngIf="refreshing else refreshBn">
                        <p-progressSpinner [style]="{width: '30px', height: '30px'}"></p-progressSpinner>
                    </div>
                    <ng-template #refreshBn>
                        <button pButton pRipple icon="pi pi-refresh" class="p-button-text .p-button-success"
                            (click)="refreshing=true;reLoadVideos()"
                            pTooltip="{{ 'common.refresh' | translate }}"></button>
                    </ng-template>
                    &nbsp;&nbsp;&nbsp;{{ videos.length }} {{ 'common.rows' | translate }}
                </div>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <!-- Column Headings -->
                    <th style="width: 28%" class="p-1" pSortableColumn="Title">
                        {{ 'dashboard.recordings.title' | translate }}<p-sortIcon field="Title"></p-sortIcon></th>
                    <th style="width: 3%" class="p-1"></th>
                    <th style="width: 25%" class="p-1" pSortableColumn="subtitle">{{ 'dashboard.recordings.subtitle' |
                        translate }}<p-sortIcon field="subtitle"></p-sortIcon></th>
                    <th style="width: 10%" class="p-1" pSortableColumn="SeasEp">{{ 'dashboard.recordings.seas_ep' |
                        translate }}<p-sortIcon field="SeasEp"></p-sortIcon></th>
                    <th style="width: 13%" class="justify-content-end p-1" pSortableColumn="ReleaseDate">
                        {{ 'dashboard.videos.releasedate' | translate }}<p-sortIcon field="ReleaseDate"></p-sortIcon>
                    </th>
                    <th style="width: 13%" class="justify-content-end p-1" pSortableColumn="insertdate">
                        {{ 'dashboard.videos.adddate' | translate }}<p-sortIcon field="insertdate"></p-sortIcon>
                    </th>
                    <th style="width: 13%" class="justify-content-end p-1" pSortableColumn="length">
                        {{ 'dashboard.recordings.duration' | translate }}<p-sortIcon field="length"></p-sortIcon>
                    </th>
                    <th style="width: 6%; white-space: nowrap;" class="pt-1 pb-0">
                        <a target="_blank">
                            <i class="pi pi-download"></i></a>
                        <button pButton pRipple icon="pi pi-ellipsis-v" class="p-button-text p-button-primary"
                            [disabled]="true"></button>
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-video>

                <!-- Directory Row -->
                <tr #row *ngIf="video.ContentType == 'DIRECTORY'">
                    <td class="pt-1 pb-0" colspan="7">
                        <button pButton pRipple icon="pi pi-folder" class="p-button-text p-button-primary"
                            (click)="onDirectory(video.Title)" label="{{video.Title}}"></button>
                    </td>
                </tr>

                <!-- Video Row -->
                <tr *ngIf="video.ContentType != 'DIRECTORY'">
                    <td class="p-1 overflow-hidden">
                        <div class="mycell">
                            <div class="mytext">{{video.Title}}</div>
                        </div>
                    </td>
                    <td class="pt-1 pb-0">
                        <i class="pi pi-eye" *ngIf="video.Watched"></i>
                    </td>
                    <td class="p-1 overflow-hidden" pTooltip="{{video.Description}}" tooltipPosition="top">
                        <div class="mycell">
                            <div class="mytext">{{video.SubTitle}}</div>
                        </div>
                    </td>
                    <td class="p-1">
                        <div *ngIf="video.Season>0 || video.Episode>0"> {{video.Season}}x{{video.Episode}} </div>
                    </td>
                    <td class="justify-content-end p-1">
                        <div class="mycell">
                            <div class="mytext" [innerHTML]="utility.formatDate(video.ReleaseDate,true)"></div>
                        </div>
                    </td>
                    <td class="justify-content-end p-1">
                        <div class="mycell">
                            <div class="mytext" [innerHTML]="utility.formatDate(video.AddDate,true)"></div>
                        </div>
                    </td>
                    <td class="justify-content-end p-1">
                        <div *ngIf="video.Length > 0">
                            <div class="mycell">
                                <div class="mytext">{{ video.Length }} min </div>
                            </div>
                        </div>
                    </td>
                    <td class="pt-1 pb-0" style="white-space: nowrap;">
                        <div>
                            <a href="{{URLencode('./Content/GetVideo?Id=' + video.Id)
                                + authorization}}" target="_blank"
                                pTooltip="{{ 'dashboard.videos.download' | translate }}" tooltipPosition="left">
                                <i class="pi pi-download text-primary"></i></a>
                            <button pButton pRipple icon="pi pi-ellipsis-v" class="p-button-text p-button-primary"
                                (click)="showMenu(video,$event)"></button>
                        </div>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <form class="ml-3 mr-3" name="vidsform" #vidsform="ngForm">
        <p-dialog header="{{ 'dashboard.recordings.edit_metadata' | translate }}" [(visible)]="displayMetadataDlg"
            [modal]="true" [style]="{height: '75vw', width: '50vw'}" [closable]="false" [closeOnEscape]="false">

            <div class="form-group field">
                <label for="Title" class="label block">{{ 'dashboard.recordings.title' | translate }}</label>
                <input pInputText id="Title" [(ngModel)]="video.Title" name="Title" #Title="ngModel"
                    class="mb-2 form-control w-full" />
            </div>

            <div class="form-group field">
                <label for="SubTitle" class="label block">{{ 'dashboard.recordings.subtitle' | translate }}</label>
                <input pInputText id="SubTitle" [(ngModel)]="video.SubTitle" name="SubTitle" #SubTitle="ngModel"
                    class="mb-2 form-control w-full" />
            </div>

            <div class="form-group field">
                <label for="Inetref" class="label block">{{ 'dashboard.recordings.inetref' | translate }}</label>
                <input pInputText id="Inetref" [(ngModel)]="video.Inetref" name="Inetref" #Inetref="ngModel"
                    class="mb-2 form-control w-full" />
            </div>

            <div class="form-group field">
                <label for="Description" class="label block">{{ 'dashboard.recordings.description' | translate
                    }}</label>
                <textarea pInputTextarea [rows]="5" [cols]="30" id="Description" [(ngModel)]="video.Description"
                    name="Description" #Description="ngModel" class="mb-2 form-control w-full"></textarea>
            </div>

            <div class="form-group field">
                <label for="Season" class="label block">{{ 'dashboard.recordings.season' | translate
                    }}</label>
                <p-inputNumber [(ngModel)]="video.Season" name="Season" id="Season" [showButtons]="true" [min]="1"
                    [max]="99" [step]="1"></p-inputNumber>
            </div>

            <div class="form-group field">
                <label for="Episode" class="label block">{{ 'dashboard.recordings.episode' | translate
                    }}</label>
                <p-inputNumber [(ngModel)]="video.Episode" name="Episode" id="Episode" [showButtons]="true" [min]="1"
                    [max]="99" [step]="1"></p-inputNumber>
            </div>

            <div class="form-group field">
                <label for="ReleaseDate" class="label block">{{ 'dashboard.videos.releasedate' | translate
                    }}</label>
                <p-calendar [(ngModel)]="video.ReleaseDate" dateFormat="yy-mm-dd" name="ReleaseDate"
                    id="ReleaseDate"></p-calendar>
            </div>

            <div class="form-group field">
                <label for="FileName" class="label block">{{ 'dashboard.recordings.filename_label' | translate
                    }}</label>
                <pre>{{ video.FileName}}</pre>
            </div>

            <ng-template pTemplate="footer">
                <div class="col-12" style="text-align: left;">
                    <p-message *ngIf="successCount > 0 && errorCount == 0 && !vidsform.dirty" severity="success"
                        text="{{ 'common.savesuccess' | translate }}"></p-message>
                    <p-message *ngIf="errorCount > 0" severity="error"
                        text="{{ 'common.networkfail' | translate }}"></p-message>
                </div>
                <p-button icon="pi pi-times-circle" (onClick)="closeDialog()" label="{{ 'common.close' | translate }}"
                    styleClass="p-button-warning">
                </p-button>
                <p-button icon="pi pi-check-circle" (onClick)="saveVideo();" label="{{ 'common.save' | translate }}"
                    styleClass="p-button-success" [disabled]="!vidsform.dirty || video.Title.trim() == '' "></p-button>
            </ng-template>

        </p-dialog>

        <p-dialog header="{{ 'common.unsaved_heading' | translate }}" [(visible)]="displayUnsaved" [modal]="true">
            <p>{{ 'common.unsaved_message' | translate }}</p>
            <ng-template pTemplate="footer">
                <p-button icon="pi pi-times-circle" (onClick)="closeDialog()" label="{{ 'common.nosave' | translate }}"
                    styleClass="p-button-danger">
                </p-button>
                <p-button icon="pi pi-check-circle" (onClick)="displayUnsaved=false"
                    label="{{ 'common.continue' | translate }}" styleClass="p-button-success">
                </p-button>
            </ng-template>
        </p-dialog>

    </form>
</div>