<div class="container">
    <div [hidden]="submitted">
      <h1>New Game Form</h1>
      <form (ngSubmit)="onSubmit()" #gameForm="ngForm">
        <div class="form-group">
          <label for="gameDateTime">Game Date</label>
          <input type="text" class="form-control" id="gameDateTime"
                 required
                 [(ngModel)]="model.gameDateTime" name="gameDateTime"
                 #gameDateTime="ngModel">
          <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 class="form-control" id="homeTeam"
                  required
                  [(ngModel)]="model.homeTeam" name="homeTeam"
                  #homeTeam="ngModel">
            <option *ngFor="let team of teams" [ngValue]="team">{{team.name}}</option>
          </select>
          <div [hidden]="homeTeam.valid || homeTeam.pristine" class="alert alert-danger">
            Power is required
          </div>
        </div>

        <div class="form-group">
            <label for="awayTeam">Away Team</label>
            <select class="form-control" id="awayTeam"
                    required
                    [(ngModel)]="model.awayTeam" name="awayTeam"
                    #awayTeam="ngModel">
              <option *ngFor="let team of teams" [ngValue]="team">{{team.name}}</option>
            </select>
            <div [hidden]="awayTeam.valid || awayTeam.pristine" class="alert alert-danger">
              Power is required
            </div>
          </div>
  
        <button type="submit" class="btn btn-success" [disabled]="!gameForm.form.valid">Submit</button>
        <button type="button" class="btn btn-default" (click)="newGame(); gameForm.reset()">New Game</button>
      </form>
    </div>
  
    <div [hidden]="!submitted">
      <h2>You submitted the following:</h2>
      <div class="row">
        <div class="col-xs-3">Game Date</div>
        <div class="col-xs-9" *ngIf="model.homeTeam">{{ model.gameDateTime }}</div>
      </div>
      <div class="row">
        <div class="col-xs-3">Home Team</div>
        <div class="col-xs-9" *ngIf="model.homeTeam">{{ model.homeTeam.name }}</div>
        <div class="col-xs-9" *ngIf="!model.homeTeam">{{ model.homeTeam }}</div>
      </div>
      <div class="row">
        <div class="col-xs-3">Away Team</div>
        <div class="col-xs-9" *ngIf="model.awayTeam">{{model.awayTeam.name}}</div>
        <div class="col-xs-9" *ngIf="!model.awayTeam">Empty {{ model.awayTeam }}</div>
      </div>
      <br>
      <div [hidden]="confirmed">
        <button class="btn btn-primary" (click)="confirmSubmission()">Confirm</button>
        <button class="btn btn-primary" (click)="submitted=false">Edit</button>
      </div>
    </div>
  </div>