<div class="wrapper">
    <nx-formfield label="Type in here to filter (e.g. 2019, Auto)">
        <input
            nxInput
            [ngModel]="filterValue"
            (ngModelChange)="onFilterValueChange($event)"
        />
    </nx-formfield>

    <p nxCopytext class="nx-margin-bottom-2xs">
        Matching items: {{currentlyAvailableElements.length}}
    </p>
    <div class="scroll-container">
        <table nxTable nxSort (sortChange)="sortTable($event)">
            <thead>
                <tr nxTableRow>
                    <th nxHeaderCell nxSortHeaderCell="product">Product</th>
                    <th nxHeaderCell nxSortHeaderCell="contractNumber">
                        Contract Number
                    </th>
                    <th nxHeaderCell>Description</th>
                    <th nxHeaderCell>Website</th>
                    <th nxHeaderCell nxSortHeaderCell="endingAt">Ending At</th>
                    <th nxHeaderCell nxSortHeaderCell="statusText">Status</th>
                </tr>
            </thead>
            <tbody>
                @for (item of currentlyShownPageElements; track item) {
                <tr nxTableRow>
                    <td nxTableCell>{{item.product}}</td>
                    <td nxTableCell>{{item.contractNumber}}</td>
                    <td nxTableCell>{{item.desc}}</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>
