source: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/route-instances/start-route-instnace/start-route-instance.component.html

<div class="w-full h-full flex justify-center items-center">

  <div class="flex flex-col">

    @if (isDriverFree) {
      <form class="flex flex-col">

        <mat-form-field [appearance]="'outline'">
          <mat-label>Select bus</mat-label>
          <mat-select (selectionChange)="onBusPick($event)">
            @for (bus of buses; track bus.id) {
              <mat-option [value]="bus.id">{{ bus.registracija }}</mat-option>
            }
          </mat-select>
        </mat-form-field>


        @if (bus) {
          <mat-form-field [appearance]="'outline'">
            <mat-label>Select line</mat-label>
            <mat-select (selectionChange)="onLinePick($event)">
              @for (line of lines; track line.id) {
                <mat-option [value]="line.id">{{ line.ime }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        }

        @if (line) {
          <mat-form-field [appearance]="'outline'">
            <mat-label>Select direction</mat-label>
            <mat-select (selectionChange)="onDirectionPick($event)">
              @for (direction of directions; track direction.id) {
                <mat-option [value]="direction.id">{{ direction.pravec }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        }

        <button (click)="onSubmit()" type="button" mat-flat-button>
          Start
        </button>
      </form>
    } @else {
      <div>
        Currently logged in driver is busy!
      </div>

    }
  </div>

</div>