
<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>
        <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>