<mat-form-field appearance="outline" class="sz-medium sh-squircle">
  <mat-label>First Name</mat-label>
  <mat-icon matPrefix class="material-symbols-outlined">person</mat-icon>
  <input matInput [disabled]="false" [(ngModel)]="inputValue">
  @if (inputValue()) {
    <button matSuffix matIconButton aria-label="Clear" (click)="inputValue.set('')">
      <mat-icon class="material-symbols-outlined">close</mat-icon>
    </button>
  }
  <mat-hint>Enter your first name</mat-hint>
</mat-form-field>

<mat-form-field appearance="outline" class="sz-medium sh-squircle">
  <mat-label>Password</mat-label>
  <mat-icon matPrefix class="material-symbols-outlined">lock</mat-icon>
  <input matInput [type]="passwordHide() ? 'password' : 'text'" [disabled]="false" [(ngModel)]="passwordValue">
  <button matSuffix matIconButton (click)="passwordHide.set(!passwordHide())" [attr.aria-label]="passwordHide() ? 'Show password' : 'Hide password'">
    <mat-icon class="material-symbols-outlined">{{passwordHide() ? 'visibility_off' : 'visibility'}}</mat-icon>
  </button>
</mat-form-field>

<mat-form-field appearance="outline" class="sz-medium sh-squircle">
  <mat-label>Favorite Food</mat-label>
  <mat-icon matPrefix class="material-symbols-outlined">restaurant</mat-icon>
  <mat-select [(ngModel)]="selectValue" [disabled]="false">
    @for (food of foods; track food.value) {
      <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
    }
  </mat-select>
</mat-form-field>

<mat-form-field appearance="outline" class="sz-medium sh-squircle">
  <mat-label>Feedback</mat-label>
  <textarea matInput rows="3" [disabled]="false" [(ngModel)]="textareaValue"></textarea>
</mat-form-field>

<mat-radio-group [(ngModel)]="radioValue" [disabled]="false" aria-label="Favorite Season">
  @for (season of seasons; track season) {
    <mat-radio-button class="sz-medium" [value]="season">{{season}}</mat-radio-button>
  }
</mat-radio-group>