
<div class="task-list-container">
    <form nz-form>
        <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="taskUserId">User ID</nz-form-label>
            <nz-form-control [nzSpan]="14">
                <nz-input-group [nzSuffix]="suffixButton">
                    <input 
                        nz-input
                        id="taskUserId"
                        [ngModel]="userId$ | async"
                        (ngModelChange)="userId$.next($event)"
                        name="userId"
                        placeholder="Enter User ID"
                    />
                </nz-input-group>
                <ng-template #suffixButton>
                    <button 
                        nz-button 
                        nzType="primary"
                        (click)="handleUpdate()"
                    >
                        Update
                    </button>
                </ng-template>
            </nz-form-control>
        </nz-form-item>
    </form>

    <nz-empty 
        *ngIf="(tasks$ | async)?.length === 0"
        nzNotFoundContent="There are no tasks."
    ></nz-empty>

    <nz-table
        *ngIf="(tasks$ | async)?.length !== 0"
        [nzData]="tasks$ | async"
        [nzPageSize]="10"
    >
        <thead>
            <tr>
                <th *ngFor="let col of columns">{{ col.title }}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let task of tasks$ | async">
                <td>{{ task.dateTime | date:'medium' }}</td>
                <td>{{ task.title }}</td>
                <td>{{ task.description }}</td>
            </tr>
        </tbody>
    </nz-table>
</div>