<p-table
    [value]="checkers"
    [loading]="loading"
    responsiveLayout="scroll"
    ngClass="{{ minimal ? 'picker--minimal' : '' }}"
>
    <ng-template pTemplate="caption">
        <div class="p-d-flex p-mt-1 p-ai-center">
            Checkers list
            <app-help-tip subject="Checkers list">
                <p>
                    The table lists available review checkers. Each of them is responsible for analyzing the daemon
                    configuration to detect some particular issue. The table contains the checker states,
                    <span *ngIf="minimal"> and names.</span>
                    <span *ngIf="!minimal">names, descriptions, selectors, and triggers.</span>
                </p>
                <p>
                    The state indicates if the checker is enabled or disabled.
                    <span *ngIf="allowInheritState">
                        The state may also be inherited from the global settings. In this case, the actual state is
                        presented in the brackets.
                    </span>
                    The state changes must be confirmed by clicking the submit button.
                </p>
                <p *ngIf="!minimal">
                    The selectors define the daemon groups for which the specific configuration checker runs.
                </p>
                <p *ngIf="!minimal">
                    The triggers designate the condition that fires the checker (e.g., when configuration or host
                    reservation change has been detected, manually etc.).
                </p>
            </app-help-tip>
        </div>
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
            <th>State</th>
            <th>Name</th>
            <th class="picker__description-column">Description</th>
            <th class="picker__selector-column">Selectors</th>
            <th class="picker__trigger-column">Triggers</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-checker>
        <tr>
            <td
                class="picker__state-cell"
                [ngClass]="
                    getActualState(checker) === 'enabled'
                        ? 'picker__state-cell--enabled'
                        : getActualState(checker) === 'disabled'
                          ? 'picker__state-cell--disabled'
                          : checker.globallyEnabled
                            ? 'picker__state-cell--inherit-enabled'
                            : 'picker__state-cell--inherit-disabled'
                "
            >
                <ng-container
                    [ngTemplateOutlet]="stateSelector"
                    [ngTemplateOutletContext]="{ checker: checker, state: getActualState(checker) }"
                >
                </ng-container>
            </td>
            <td>{{ checker.name }}</td>
            <td class="picker__description-column">
                <p>
                    {{ getCheckerDescription(checker.name) }}
                </p>
            </td>
            <td class="picker__chip-cell picker__selector-column">
                <div class="chips">
                    <p-chip
                        label="{{ selector }}"
                        icon="{{ getSelectorIcon(selector) }}"
                        *ngFor="let selector of checker.selectors"
                    ></p-chip>
                </div>
            </td>
            <td class="picker__chip-cell picker__trigger-column">
                <div class="chips">
                    <p-chip
                        label="{{ trigger }}"
                        icon="{{ getTriggerIcon(trigger) }}"
                        *ngFor="let trigger of checker.triggers"
                    ></p-chip>
                </div>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
        <tr class="picker__empty">
            <td colspan="100%">There are no checkers.</td>
        </tr>
    </ng-template>
    <ng-template pTemplate="summary">
        <div class="picker__buttons">
            <button pButton label="Submit" [disabled]="!hasChanges" (click)="onSubmit()"></button>
            <button
                pButton
                label="Reset"
                [disabled]="!hasChanges"
                class="p-button-secondary"
                (click)="onReset()"
            ></button>
        </div>
    </ng-template>
</p-table>

<!-- State selector - tri-state checkbox -->
<ng-template #stateSelector let-checker="checker" let-state="state">
    <div class="form-check">
        <p-triStateCheckbox
            [ngModel]="state === 'enabled' ? true : state === 'disabled' ? false : null"
            (onChange)="onCheckerStateChanged(checker)"
            name="select-{{ checker.name }}"
            inputId="select-{{ checker.name }}"
            class="mr-2"
        >
        </p-triStateCheckbox>
        <label class="form-check-label p-capitalize-first" for="select-{{ checker.name }}">
            <span *ngIf="state !== 'inherit'">
                <p-tag
                    *ngIf="state === 'enabled' || state === 'disabled'"
                    [value]="state"
                    [severity]="state === 'enabled' ? 'success' : state === 'disabled' ? 'danger' : 'warning'"
                />
            </span>
            <span class="picker__state-inherit-status" *ngIf="state === 'inherit'">
                globally {{ checker.globallyEnabled ? 'enabled' : 'disabled' }}
            </span>
        </label>
    </div>
</ng-template>
