<h2>{{ 'dashboard.recrules.heading' | translate }}</h2>
<div class="block card w-full" style="height: 90vh; min-width: 960px;" *ngIf="rulesLoaded else loading">
    <p-table [value]="recRules" scrollHeight="flex" [scrollable]="true" styleClass="p-datatable-striped p-datatable-sm"
        [rowHover]="true" responsiveLayout="scroll" [sortField]="sortField" [sortOrder]="sortOrder"
        (onSort)="onSort($event)"  >
        <ng-template pTemplate="caption">
            <!-- Buttons at top -->
            <button pButton pRipple label="{{ 'dashboard.recrules.new_recrule' | translate }}" icon="pi pi-plus"
                class="p-button-success mr-2" (click)="newRecRule()"></button>
            <button pButton pRipple label="{{ 'dashboard.recrules.new_teplate' | translate }}"
                class="p-button-success p-button-outlined mr-2" (click)="newTemplate()" icon="pi pi-plus"></button>
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <!-- Row Headings -->
                <th style="width: 20%" class="p-1" pSortableColumn="TitleSort">
                    {{ 'dashboard.recordings.title' | translate }} <p-sortIcon field="TitleSort"></p-sortIcon></th>
                <th style="width: 19%" class="p-1">{{ 'dashboard.recrule.type' | translate
                    }}</th>
                <th style="width: 9%" class="p-1">{{ 'common.priority' | translate
                    }}</th>
                <th style="width: 9%" class="p-1">
                    {{ 'dashboard.recordings.recgrp' | translate }}
                </th>
                <th style="width: 9%" class="p-1">
                    {{ 'dashboard.recrules.storgrp' | translate }}
                </th>
                <th style="width: 9%" class="justify-content-end pr-5" pSortableColumn="LastRecorded">
                    {{ 'dashboard.recrules.lastrec' | translate }}<p-sortIcon field="LastRecorded"></p-sortIcon>
                </th>
                <th style="width: 14%" class="justify-content-end pr-5" pSortableColumn="NextRecording">
                    {{ 'dashboard.recrules.nextrec' | translate }}<p-sortIcon field="NextRecording"></p-sortIcon>
                </th>
                <th style="width: 5%" class="p-1">{{ 'dashboard.recrule.active' | translate }}</th>
                <th style="width: 6%" class="pt-1 pb-0">
                    <button pButton pRipple icon="pi pi-pencil" class="p-button-text p-button-primary"
                        [disabled]="true"></button>
                    <button pButton pRipple icon="pi pi-trash" class="p-button-text p-button-danger"
                        [disabled]="true"></button>
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-recrule>
            <tr>
                <td  class="p-1 overflow-hidden">
                    {{recrule.Title}}</td>
                <td  class="p-1">
                    {{ utility.recTypeTrans[recrule.Type]}}</td>
                <td  class="p-1">{{recrule.RecPriority}}</td>
                <td  class="p-1">{{recrule.RecGroup}}</td>
                <td  class="p-1">{{recrule.StorageGroup}}</td>
                <td  class="justify-content-end p-1 pr-5">
                    {{utility.formatDate(recrule.LastRecorded)}}</td>
                <td  class="justify-content-end p-1 pr-5">
                    {{utility.formatDate(recrule.NextRecording)}} {{utility.formatTime(recrule.NextRecording)}}</td>
                <td  class="pt-1 pb-0">
                    <i class="pi pi-times text-pink-500" *ngIf="recrule.Inactive else checkmark"></i>
                    <ng-template #checkmark>
                        <i class="pi pi-check text-green-500"></i>
                    </ng-template>
                </td>
                <td  class="pt-1 pb-0"  style="white-space: nowrap;">
                    <button pButton pRipple icon="pi pi-pencil" class="p-button-text p-button-primary"
                        (click)="updateRecRule(recrule)" pTooltip="{{ 'dashboard.recordings.edit_rule' | translate }}"
                        tooltipPosition="left"></button>
                    <button pButton pRipple icon="pi pi-trash" class="p-button-text p-button-danger"
                        (click)="deleteRequest(recrule)" pTooltip="{{ 'dashboard.recordings.delete_rule' | translate }}"
                        tooltipPosition="left" [disabled]="recrule.Type == 'Recording Template' && recrule.Category == 'Default'"></button>

                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

<p-dialog header="{{ 'dashboard.recordings.delete_rule' | translate }}" [(visible)]="displayDelete" [modal]="true"
    [draggable]="false" [resizable]="false">
    <h2>{{ 'settings.common.ru_sure' | translate }}</h2>
    <p>{{ 'dashboard.recordings.delete_details' |
        translate }} <br><b> {{ recRule?.Title }}: {{ recRule?.Type }}</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)="displayDelete=false" label="{{ 'common.close' | translate }}"
            styleClass="p-button-warning">
        </p-button>
        <p-button icon="pi pi-check-circle" (onClick)="deleteRule(recRule!)" label="{{ 'common.delete' | translate }}"
            styleClass="p-button-danger"></p-button>
    </ng-template>
</p-dialog>

<app-schedule [inter]="inter"></app-schedule>
<ng-template #loading>
    <p-progressSpinner></p-progressSpinner>
</ng-template>