<div class="container">
  <form [formGroup]="pizzaCreateForm" (ngSubmit)="create()" class="form">
    <h1>Create Pizza</h1>
    <mat-form-field class="form-element">
      <mat-label>
        Name
      </mat-label>
      <input matInput type="text" formControlName="pizzaName" />
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Toppings</mat-label>
      <mat-select
        name="selectedToppings"
        [formControl]="pizzaToppings"
        multiple
      >
        <mat-select-trigger>
          {{ pizzaToppings.value ? pizzaToppings.value[0]?.name : "" }}
          <span
            *ngIf="pizzaToppings.value?.length > 1"
            class="example-additional-selection"
          >
            (+{{ pizzaToppings.value?.length - 1 }}
            {{ pizzaToppings.value?.length === 2 ? "other" : "others" }})
          </span>
        </mat-select-trigger>
        <mat-option *ngFor="let topping of toppings" [value]="topping">{{
          topping.name
        }}</mat-option>
      </mat-select>
    </mat-form-field>
    <br>
    <button mat-button type="submit">Submit</button>
  </form>
</div>
