<div class="container">
  <div [hidden]="submitted">
    <h1>Hero Form</h1>
    <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
               required
               [(ngModel)]="model.name" name="name"
               #name="ngModel">
        <div [hidden]="name.valid || name.pristine"
             class="alert alert-danger">
          Name is required
        </div>
      </div>

      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text" class="form-control" id="alterEgo"
               [(ngModel)]="model.alterEgo" name="alterEgo">
      </div>
      <div class="form-group">
        <label for="power">Hero Power</label>
        <select class="form-control" id="power"
                required
                [(ngModel)]="model.power" name="power"
                #power="ngModel">
          <option></option>
          <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
        </select>

        <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
          Power is required
        </div>
      </div>

      <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">
        Submit
        <span *ngIf="submitting" class="spinner-border spinner-border-sm ml-2" role="status" aria-hidden="true"></span>
      </button>
    </form>
  </div>

  <div [hidden]="!submitted">
    <h2>You submitted the following:</h2>
    <div class="row">
      <div class="col-sm-3 font-weight-bold">Name</div>
      <div class="col-sm-9" data-testid="hero-name">{{ model.name }}</div>
    </div>
    <div class="row">
      <div class="col-sm-3 font-weight-bold">Alter Ego</div>
      <div class="col-sm-9" data-testid="hero-alterego">{{ model.alterEgo }}</div>
    </div>
    <div class="row">
      <div class="col-sm-3 font-weight-bold">Power</div>
      <div class="col-sm-9" data-testid="hero-power">{{ model.power }}</div>
    </div>
    <br>
    <button class="btn btn-primary" (click)="submitted=false">Edit</button>
  </div>
</div>
