<div class="card-div">
  <mat-card class="particle-card">
    <mat-card-header>
      <mat-card-title>Particle input style</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <div class="particle-properties">
        <div class="property-row">
          <mat-form-field appearance="outline">
            <mat-label>Current color: {{ selectedColor }}</mat-label>
            <input type="color" class="color-input" matInput [(ngModel)]="selectedColor" [disabled]="supportsColor">
          </mat-form-field>
          <mat-form-field appearance="outline" class="type-field">
            <mat-label>Select Particle Type</mat-label>
            <input type="text"
                   placeholder="Search for a particle type"
                   matInput
                   [formControl]="particleTypeControl"
                   [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
              @for (type of filteredParticleTypes | async; track type) {
                <mat-option [value]="type">
                  {{ type }}
                </mat-option>
              }
            </mat-autocomplete>
          </mat-form-field>
        </div>

        @if (supportsColor) {
          <div class="size-slider">
            <mat-slider min="0.5" max="4" step="0.1" class="full-width">
              <input matSliderThumb [(ngModel)]="selectedSize">
            </mat-slider>
            <span>Size: {{ selectedSize }}</span>
          </div>
        } @else {
          <div class="size-slider">
            <mat-slider min="0" max="4" step="0.1" class="full-width">
              <input matSliderThumb [(ngModel)]="selectedVelocity">
            </mat-slider>
            <span>Velocity: {{ selectedVelocity }}</span>
          </div>
        }
      </div>
    </mat-card-content>
  </mat-card>
</div>
