<div layoutDirection="column">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <h2 *ngIf="sfaOptions && !sfaOptions.length" class="fl-detail" i18n>
    There are no available second factor authentication methods.
  </h2>
  <div *ngFor="let option of sfaOptions; let i = index"
       class="full-width sfa-option sfa-option-{{option.name}}"
       [class.fl-margin-top-small]="i > 0">
    <a [routerLink]="option.route">
      <span>{{option.display_name}}</span>
      <br>
      <span class="fl-tag fl-light-green-bg" *ngIf="option.related_method.enabled" i18n>enabled</span>
      <span class="fl-tag" *ngIf="!option.related_method.enabled" i18n>disabled</span>
      <span class="fl-tag" *ngIf="option.related_method.default" i18n>default</span>
    </a>
  </div>
</div>
