gemini/sample-apps/genwealth/ui/src/app/prospects/prospects.component.html

<mat-card>
    <mat-card-title>Prospects</mat-card-title>
    <mat-form-field>
        <input [(ngModel)]="prospectSearch" (keydown.enter)="findProspects()" matInput 
            placeholder="Describe your ideal prospect">
        <mat-icon matTooltip="Sample suggestion" matSuffix fontSet="material-symbols-outlined"
                (click)="prospectSearch = 'young aggressive investor'">
            prompt_suggestion
        </mat-icon>
    </mat-form-field>
    
    <div>
        <mat-slide-toggle [checked]="useFilters" (change)="useFiltersChange($event)">Use Filters</mat-slide-toggle>
        <div *ngIf="useFilters" class="filter-container">
            <div>
                <mat-slider min="1" max="3" step="1" thumbLabel 
                        showTickMarks discrete [displayWith]="formatRiskLabel">
                    <input [(ngModel)]="riskProfile" matSliderThumb>
                </mat-slider>
                <div>Risk Profile</div>
            </div>
            <div>
                <mat-slider min="14" max="99" step="1" thumbLabel
                        showTickMarks discrete >
                    <input [(ngModel)]="minAge" matSliderStartThumb>
                    <input [(ngModel)]="maxAge" matSliderEndThumb>
                </mat-slider>
                <div>Age Range</div>
            </div>
        </div>
    </div>
    <mat-card-actions>
        <button mat-raised-button color="primary" [disabled]="prospectSearch.length === 0" 
            (click)="findProspects()">Find</button>
    </mat-card-actions>    
    <app-prospect-results *ngIf="prospects" [prospects]="prospects"></app-prospect-results>
</mat-card>