@if (mfaQuery$ | async; as mfaQuery) {
  <cnsl-card title="{{ 'USER.MFA.TITLE' | translate }}" description="{{ 'USER.MFA.DESCRIPTION' | translate }}">
    <button
      card-actions
      mat-icon-button
      (click)="refresh$.next(true)"
      class="icon-button"
      matTooltip="{{ 'ACTIONS.REFRESH' | translate }}"
    >
      <mat-icon class="icon">refresh</mat-icon>
    </button>
    <cnsl-refresh-table [hideRefresh]="true" [loading]="mfaQuery.state === 'loading'" (refreshed)="refresh$.next(true)">
      <table class="table" mat-table [dataSource]="mfaQuery.value">
        <ng-container matColumnDef="type">
          <th mat-header-cell *matHeaderCellDef>{{ 'USER.MFA.TABLETYPE' | translate }}</th>
          <td mat-cell *matCellDef="let mfa">
            @if (mfa.type.case === 'otp') {
              <span>TOTP</span>
            }
            @if (mfa.type.case === 'u2f') {
              <span>U2F (Universal 2nd Factor)</span>
            }
            @if (mfa.type.case === 'otpSms') {
              <span>OTP SMS</span>
            }
            @if (mfa.type.case === 'otpEmail') {
              <span>OTP Email</span>
            }
          </td>
        </ng-container>
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>{{ 'USER.MFA.NAME' | translate }}</th>
          <td mat-cell *matCellDef="let mfa">
            @if (mfa.type.case === 'u2f') {
              <span class="centered">
                {{ mfa.type.value.name }}
              </span>
            }
          </td>
        </ng-container>
        <ng-container matColumnDef="state">
          <th mat-header-cell *matHeaderCellDef>{{ 'USER.MFA.TABLESTATE' | translate }}</th>
          <td mat-cell *matCellDef="let mfa">
            <span
              class="state"
              [ngClass]="{
                active: mfa.state === AuthFactorState.READY,
                inactive: mfa.state === AuthFactorState.NOT_READY,
              }"
            >
              {{ 'USER.MFA.STATE.' + mfa.state | translate }}
            </span>
          </td>
        </ng-container>
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let mfa">
            <cnsl-table-actions>
              <button
                actions
                matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
                color="warn"
                mat-icon-button
                (click)="deleteMFA(mfaQuery.user, mfa)"
              >
                <i class="las la-trash"></i>
              </button>
            </cnsl-table-actions>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
      @if (mfaQuery.state === 'success' && !mfaQuery.value.data.length) {
        <div class="no-content-row">
          <i class="las la-exclamation"></i>
          <span>{{ 'USER.MFA.EMPTY' | translate }}</span>
        </div>
      }
    </cnsl-refresh-table>
    <div class="table-wrapper">
      @if (mfaQuery.state === 'loading') {
        <div class="spinner-container">
          <mat-spinner diameter="50"></mat-spinner>
        </div>
      }
    </div>
  </cnsl-card>
}