<div class="container m-0">
  <div [hidden]="submitted">
    <h1 class="fw-bold ms-2 mt-2 fs-2">New Game Form</h1>
    <form #gameForm="ngForm" (ngSubmit)="onSubmit()" class="ms-3">
      <div class="form-group">
        <label for="gameDateTime">Game Date</label>
        <input #gameDateTime="ngModel" [(ngModel)]="model.gameDateTime" class="form-control"
               id="gameDateTime"
               name="gameDateTime" required
               type="text">
        <div [hidden]="gameDateTime.valid || gameDateTime.pristine"
             class="alert alert-danger">
          Name is required
        </div>
      </div>

      <div class="form-group">
        <label for="homeTeam">Home Team</label>
        <select #homeTeam="ngModel" [(ngModel)]="model.homeTeam"
                class="form-control"
                id="homeTeam" name="homeTeam"
                required>
          <option *ngFor="let team of teams" [ngValue]="team">{{team.name}}</option>
        </select>
        <div [hidden]="homeTeam.valid || homeTeam.pristine" class="alert alert-danger">
          Home Team is required
        </div>
      </div>

      <div class="form-group">
        <label for="awayTeam">Away Team</label>
        <select #awayTeam="ngModel" [(ngModel)]="model.awayTeam"
                class="form-control"
                id="awayTeam" name="awayTeam"
                required>
          <option *ngFor="let team of teams" [ngValue]="team">{{team.name}}</option>
        </select>
        <div [hidden]="awayTeam.valid || awayTeam.pristine" class="alert alert-danger">
          Away Team is required
        </div>
      </div>

      <button [disabled]="!gameForm.form.valid" class="btn mt-2 btn-success" type="submit">Create</button>
      <button (click)="resetForm(); gameForm.reset()" class="btn mt-2 ms-2 btn-danger" type="button">Reset</button>
    </form>
  </div>
</div>