<div class="scroll-container">
    <table nxTable nxExpandableTable #expandableTable="nxExpandableTable">
        <thead>
            <tr nxTableRow>
                <th
                    nxHeaderCell
                    class="nx-table-cell--toggle"
                    aria-label="Expand row"
                >
                    <nx-toggle-button
                        [target]="expandableTable"
                        ariaLabel="Toggle all rows"
                    ></nx-toggle-button>
                </th>
                <th nxHeaderCell>Product</th>
                <th nxHeaderCell>Contract number</th>
                <th nxHeaderCell>Ending date</th>
                <th nxHeaderCell>Status</th>
            </tr>
        </thead>
        <tbody>
            @for (item of tableElements; track item) {
            <tr nxTableRow>
                <td nxTableCell class="nx-table-cell--toggle">
                    <nx-toggle-button
                        [target]="expandableRow"
                        ariaLabel="Toggle {{item.product}} row"
                    ></nx-toggle-button>
                </td>
                <td nxTableCell>{{item.product}}</td>
                <td nxTableCell>{{item.contractNumber}}</td>
                <td nxTableCell>{{item.endingAt}}</td>
                <td nxTableCell>
                    <nx-badge [type]="item.status"
                        >{{item.statusText}}</nx-badge
                    >
                </td>
            </tr>
            <tr nxExpandableTableRow #expandableRow>
                <td nxExpandableTableCell></td>
                <td nxExpandableTableCell>
                    <nx-link><a routerLink="#">{{item.website}}</a></nx-link>
                </td>
                <td nxExpandableTableCell colspan="3">{{item.desc}}</td>
            </tr>
            }
        </tbody>
    </table>
</div>
