<div class="block card w-full" *ngIf="loaded">
    <p-table [value]="playGroups" scrollHeight="flex" [scrollable]="true" sortField="Name"
        styleClass="p-datatable-sm p-datatable-striped" [rowHover]="true" responsiveLayout="scroll">
        <ng-template pTemplate="caption">
            <button pButton pRipple label="{{ 'dashboard.playgroup.new' | translate }}" icon="pi pi-plus"
                class="p-button-success mr-2" (click)="openNew()"></button>
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <!-- style="width:  8%" -->
                <th>{{ 'dashboard.playgroup.name_label' | translate }}</th>
                <th>{{ 'dashboard.playgroup.titlematch_label' | translate }}</th>
                <th>{{ 'dashboard.playgroup.skipahead_label' | translate }}</th>
                <th>{{ 'dashboard.playgroup.skipback_label' | translate }}</th>
                <th>{{ 'dashboard.playgroup.jump_label' | translate }}</th>
                <th>{{ 'dashboard.playgroup.timestretch_label' | translate }}</th>
                <th style="width:  7%; white-space: nowrap;">
                    <!-- These are disabled buttons to ensure the spacing of the heading
                         matches the spacing of the rows -->
                    <button pButton pRipple icon="pi pi-pencil" class="p-button-text" 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-group>
            <tr>
                <td>{{ group.Name }}</td>
                <td>{{ group.TitleMatch }}</td>
                <td>{{ group.SkipAhead }}</td>
                <td>{{ group.SkipBack }}</td>
                <td>{{ group.Jump }}</td>
                <td>{{ group.TimeStretch }}</td>
                <td class="pt-1 pb-0" style="white-space: nowrap;">
                    <button pButton pRipple icon="pi pi-pencil" class="p-button-text" (click)="editGroup(group)"
                        pTooltip="{{ 'dashboard.playgroup.edit_label' | translate }}" tooltipPosition="left"></button>
                    <button pButton pRipple icon="pi pi-trash" class="p-button-text p-button-danger"
                        (click)="deleteRequest(group)" pTooltip="{{ 'dashboard.playgroup.delete_label' | translate }}"
                        [disabled]="group.Name == 'Default'" tooltipPosition="left"></button>
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

<form class="ml-3 mr-3" name="groupform" #groupform="ngForm">

    <p-dialog header="{{ dialogHeader }}" [(visible)]="displayGroupDlg" [modal]="true"
        [style]="{height: '75vw', width: '50vw'}" [closable]="false" [closeOnEscape]="false">
        <div class="form-group field">
            <label for="GrpName" class="label block">{{ 'dashboard.playgroup.name_label' | translate }}</label>
            <input pInputText id="GrpName" [(ngModel)]="group.Name" name="Name" #Name="ngModel"
                class="mb-2 form-control w-full" [disabled]="operation == 0"/>
            <small class="block">
            </small>
        </div>

        <div class="form-group field">
            <label for="TitleMatch" class="label block">{{ 'dashboard.playgroup.titlematch_label' | translate }}</label>
            <input pInputText [(ngModel)]="group.TitleMatch" name="TitleMatch" id="TitleMatch" #Name="ngModel"
                class="mb-2 form-control w-full" />
            <small class="block">
                {{ 'dashboard.playgroup.titlematch_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="SkipAhead" class="label block">{{ 'dashboard.playgroup.skipahead_label' | translate }}</label>
            <p-inputNumber [(ngModel)]="group.SkipAhead" name="SkipAhead" id="SkipAhead" [showButtons]="true"
                [min]="0" [max]="600" [step]="1"></p-inputNumber>
            <small class="block">
                {{ 'dashboard.playgroup.skipahead_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="SkipBack" class="label block">{{ 'dashboard.playgroup.skipback_label' | translate }}</label>
            <p-inputNumber [(ngModel)]="group.SkipBack" name="SkipBack" id="SkipBack" [showButtons]="true"
                [min]="0" [max]="600" [step]="1"></p-inputNumber>
            <small class="block">
                {{ 'dashboard.playgroup.skipback_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="Jump" class="label block">{{ 'dashboard.playgroup.jump_label' | translate }}</label>
            <p-inputNumber [(ngModel)]="group.Jump" name="Jump" id="Jump" [showButtons]="true"
                [min]="0" [max]="30" [step]="1"></p-inputNumber>
            <small class="block">
                {{ 'dashboard.playgroup.jump_desc' | translate }}
            </small>
        </div>

        <div class="form-group field">
            <label for="TimeStretch" class="label block">{{ 'dashboard.playgroup.timestretch_label' | translate }}</label>
            <p-inputNumber [(ngModel)]="group.TimeStretch" name="TimeStretch" id="TimeStretch" [showButtons]="true"
                [min]="50" [max]="200" [step]="5"></p-inputNumber>
            <small class="block">
                {{ 'dashboard.playgroup.timestretch_desc' | translate }}
            </small>
        </div>

        <ng-template pTemplate="footer">
            <div class="col-12" style="text-align: left;">
                <p-message *ngIf="successCount > 0 && errorCount == 0 && !groupform.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-save" (onClick)="saveGroup();" label="{{ 'common.save' | translate }}"
                styleClass="p-button-success" [disabled]="!groupform.dirty || group.Name.trim() == '' || (operation == 1 && groupNames.includes( group.Name.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>

    <p-dialog header="{{ 'dashboard.playgroup.delete_this' | translate }}" [(visible)]="displayDelete" [modal]="true"
        [draggable]="false" [resizable]="false">
        <h2>{{ 'settings.common.ru_sure' | translate }}</h2>
        <p>{{ 'dashboard.playgroup.delete_details' |
            translate: {Name: group.Name} }}</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; groupform.form.markAsPristine();"
                label="{{ 'common.close' | translate }}" styleClass="p-button-warning">
            </p-button>
            <p-button icon="pi pi-check-circle" (onClick)="deleteGroup(group)" label="{{ 'common.delete' | translate }}"
                styleClass="p-button-danger"></p-button>
        </ng-template>
    </p-dialog>

</form>