<nx-formfield label="Type in here to filter">
    <input
        nxInput
        [ngModel]="filterValue"
        (ngModelChange)="onFilterValueChange($event)"
    />
</nx-formfield>

<form novalidate class="nx-margin-bottom-s">
    <p nxCopytext class="nx-margin-bottom-2xs">
        Selection highlights row at the same time:
    </p>

    <nx-radio-toggle name="activateRowSelect" [(ngModel)]="activateSelected">
        <nx-radio-toggle-button [value]="true">Yes</nx-radio-toggle-button>
        <nx-radio-toggle-button [value]="false">No</nx-radio-toggle-button>
    </nx-radio-toggle>
</form>

<div class="scroll-container">
    @if (selection.selected.length) {
    <div>
        No. of selected product:
        <strong>{{ selection.selected.length }}</strong>
        @if (!isAllSelected()) {
        <nx-link (click)="selectAll()" class="nx-margin-left-s"
            >Select all {{ tableElements.length }} products.</nx-link
        >
        } @if (isAllSelected()) {
        <nx-link (click)="selection.clear()" class="nx-margin-left-s">
            Clear selection</nx-link
        >
        }
    </div>
    }
    <table nxTable>
        <thead>
            <tr nxTableRow>
                <th
                    nxHeaderCell
                    class="nx-table-cell--checkbox"
                    aria-label="Row selection"
                >
                    <nx-checkbox
                        (checkedChange)="toggleAllPage()"
                        ariaLabel="Toggle selection of all rows"
                        [checked]="isAllPageSelected()"
                        [indeterminate]="somePageSelected()"
                    >
                    </nx-checkbox>
                </th>
                <th nxHeaderCell>Product</th>
                <th nxHeaderCell>Contract Number</th>
                <th nxHeaderCell>Website</th>
                <th nxHeaderCell>Ending At</th>
                <th nxHeaderCell>Status</th>
            </tr>
        </thead>
        <tbody>
            @for (item of currentlyShownPageElements; track item) {
            <tr
                nxTableRow
                [selected]="activateSelected ? selection.isSelected(item) : item === activeRow"
                selectable
                (select)="activateSelected ? selection.toggle(item) : activateRow(item)"
            >
                <td nxTableCell class="nx-table-cell--checkbox">
                    <nx-checkbox
                        (checkedChange)="selection.toggle(item)"
                        [ariaLabel]="'Toggle row ' + item.product + ' selection'"
                        [checked]="selection.isSelected(item)"
                    ></nx-checkbox>
                </td>
                <td nxTableCell>{{item.product}}</td>
                <td nxTableCell>{{item.contractNumber}}</td>
                <td nxTableCell>
                    <nx-link><a routerLink="#">{{item.website}}</a></nx-link>
                </td>
                <td nxTableCell>{{item.endingAt | date: 'dd/MM/yyyy'}}</td>
                <td nxTableCell>
                    <nx-badge [type]="item.status"
                        >{{item.statusText}}</nx-badge
                    >
                </td>
            </tr>
            }
        </tbody>
    </table>
</div>

<nx-pagination
    class="pagination"
    [count]="currentlyAvailableElements.length"
    [page]="page"
    type="advanced"
    [perPage]="elementsPerPage"
    (goPrev)="prevPage()"
    (goNext)="nextPage()"
    (goPage)="goToPage($event)"
>
</nx-pagination>

<div class="nx-margin-top-m">
    <nx-switcher [(checked)]="showSelected">Debug selected value</nx-switcher>

    @if (showSelected) {
    <p>Selected value:</p>
    <code>{{ selection.selected | json }}</code>
    }
</div>
