<div class="container">
    <app-slider></app-slider>
    <div class="row">
      <div class="col-md-12">
        <div class="welcome">
          <img src="assets/images/mockingbird.png" class="wow fadeInDownBig" data-wow-duration="3s" data-wow-delay="1s">
        <app-welcome-component></app-welcome-component>
        </div>
        <div class="wow fadeIn">
          <h1><strong>TVA</strong> Explorer</h1>
        </div>
        <form class="form-group level-select" [formGroup]="levelsForm">

          <label  *ngFor = "let level of levels"><input type="radio" formControlName="name" name="name" value="{{level.name[0].value}}"  jcf> &nbsp;&nbsp;{{level.name[0].value}}</label>


          <div class="button wow fadeIn">
            <button  type="submit"  name="validate" formControlName="validate"  (click)="onSubmit()" class="btn btn-lg btn-start" value="1">Choose Your Level</button>
          </div>

        </form>
        <p>Form value: {{ levelsForm.value | json }}</p>




      </div>
    </div>
    <ng-template #empty>
    <h1>{{levelsForm.value}}</h1>
    </ng-template>

<usernav-component></usernav-component>
  <img src="assets/images/compass.png" class="compass animated slideInUp">