<div fxLayout="column" fxFlex="100">
  <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
    <fa-icon class="page-title-img mr-1" [icon]="faQuestion"></fa-icon>
    <span class="page-title">Help</span>
  </div>
  <div fxLayout="row" fxFlex="100" class="padding-gap-x" fxLayoutAlign="start start">
    <div fxLayout="column" fxFlex="100">
      <div *ngFor="let helpTopic of helpTopics" fxFlex="100">
        <mat-expansion-panel *ngIf="helpTopic.help.lnImplementation === 'ALL' || helpTopic.help.lnImplementation === selNode.lnImplementation" class="flat-expansion-panel help-expansion mb-2px">
          <mat-expansion-panel-header>
              <mat-panel-title>{{helpTopic.help.question}}</mat-panel-title>
            </mat-expansion-panel-header>
          <mat-panel-description fxLayout="column" fxFlex="100" fxLayoutAlign="start start">
            <span class="pre-wrap" [innerHTML]="helpTopic.help.answer"></span>
            <a class="mt-2" [routerLink]="flgLoggedIn ? helpTopic.help.link : '/login'">{{!flgLoggedIn ? 'Login to go to the page' : helpTopic.help.linkCaption}}</a>
          </mat-panel-description>
        </mat-expansion-panel>
      </div>
    </div>
  </div>
</div>
  