<h1 class="mat-heading" tabindex="0">
  Operator Decision Tree
</h1>
<ng-container *ngIf="!(hasError$ | async); else hasErrorTemplate">
  <h2 class="mat-subheading-2" tabindex="0">
    {{currentSentence$ | async}}
  </h2>
  <ng-container *ngIf="isBeyondInitialQuestion$ | async">
    <section>
      <button 
        (click)="back()"
        mat-button
        class="back"
      >Back</button>
      <button 
        (click)="startOver()"
        mat-button
        color="warn"
        class="start-over"
      >Start Over</button>
    </section>
  </ng-container>
  <div>
    <ng-container *ngFor="let option of options$ | async">
      <ng-container *ngIf="option.options; else operatorTempalte">
        <button 
          class="option mat-body-1"
          (click)="selectOption(option.id, $event)"
          [@flyIn]
        >
          <mat-card matRipple>
            {{option.label}}
          </mat-card>
        </button>
      </ng-container>
      <ng-template #operatorTempalte>
        <p *ngIf="option.method" class="mat-body-1">
          You want the {{option.method}} of the {{option.docType}} 
          <a href="{{option.path}}#{{option.method}}">{{option.label}}</a>.
        </p>
        <p *ngIf="!option.method" class="mat-body-1">
          You want the {{option.docType}} 
          <a href="{{option.path}}">{{option.label}}</a>.
        </p>
      </ng-template>
    </ng-container>
  </div>
</ng-container>

<ng-template #hasErrorTemplate>
  <div class="mat-body-1 error">
    <p>Oops! There was an issue loading the decision tree.. we're real sorry about that. Please try reloading the page.</p>
    <p>You can also try <a href="https://github.com/ReactiveX/rxjs/issues/new?template=documentation.md" target="_blank">submitting an issue on Github</a>.</p>
  </div>
</ng-template>