<nz-card>
    <div class="card-header">
        <h3 nz-typography>Edit Search Properties</h3>
        <div class="button-container">
            <nz-space>
                <button
                    *nzSpaceItem
                    nz-button
                    nzType="primary"
                    [nzLoading]="loading$ | async"
                    (click)="handleSave()"
                >
                    Save
                </button>
                <button
                    *nzSpaceItem
                    nz-button
                    [nzLoading]="loading$ | async"
                    (click)="handleReset()"
                >
                    Reset
                </button>
            </nz-space>
        </div>
    </div>

    <nz-table
        #basicTable
        [nzData]="items$ | async"
        nzBordered
        [nzShowSizeChanger]="true"
    >
        <thead>
            <tr>
                <th>Model Set Key</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of basicTable.data">
                <td>{{ modelSetTitle(item) }}</td>
                <td>{{ item.name }}</td>
                <td>
                    <input
                        nz-input
                        [(ngModel)]="item.title"
                        placeholder="Enter title"
                    />
                </td>
            </tr>
        </tbody>
    </nz-table>

    <nz-empty *ngIf="!(items$ | async)?.length"></nz-empty>
</nz-card>
