<div class="scroll-container">
    <table nxTable>
        <thead>
            <tr nxTableRow>
                <th nxHeaderCell aria-label="Row selection"></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 tableElements; track item) {
            <tr
                nxTableRow
                [selected]="selection.isSelected(item)"
                (select)="selection.select(item)"
                selectable
            >
                <td nxTableCell class="nx-table-cell--checkbox">
                    <nx-radio
                        (valueChange)="selection.select(item)"
                        [ariaLabel]="'Select ' + item.product + ' row'"
                        [checked]="selection.isSelected(item)"
                    ></nx-radio>
                </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>

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

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