<div class="container">
  <div [hidden]="submitted">
    <h1>New Game Form</h1>
    <form #gameForm="ngForm" (ngSubmit)="onSubmit()">
      <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 btn-success" type="submit">Submit</button>
      <button (click)="resetForm(); gameForm.reset()" class="btn btn-default" type="button">Reset Form</button>
    </form>
  </div>

  <div [hidden]="!submitted">
    <h2>You submitted the following:</h2>
    <div class="row">
      <div class="col-xs-3">Game Date</div>
      <div *ngIf="model.homeTeam" class="col-xs-9">{{ model.gameDateTime }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Home Team</div>
      <div *ngIf="model.homeTeam" class="col-xs-9">{{ model.homeTeam.name }}</div>
      <div *ngIf="!model.homeTeam" class="col-xs-9">{{ model.homeTeam }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Away Team</div>
      <div *ngIf="model.awayTeam" class="col-xs-9">{{model.awayTeam.name}}</div>
      <div *ngIf="!model.awayTeam" class="col-xs-9">Empty {{ model.awayTeam }}</div>
    </div>
    <br>
    <div [hidden]="confirmed">
      <button (click)="confirmSubmission()" class="btn btn-primary">Confirm</button>
      <button (click)="submitted=false" class="btn btn-primary">Edit</button>
    </div>
  </div>
</div>