@let providers = providers$ | async;
<app-header></app-header>

<bit-container>
  <p *ngIf="!loaded" class="tw-text-muted">
    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
  </p>
  <ng-container *ngIf="loaded && providers && providers.length">
    <bit-table>
      <ng-template body>
        <tr bitRow *ngFor="let p of providers">
          <td bitCell class="tw-w-1">
            <bit-avatar [text]="p.name" [id]="p.id" size="small"></bit-avatar>
          </td>
          <td bitCell>
            <a href="#" [routerLink]="['/providers', p.id]">{{ p.name }}</a>
            <ng-container *ngIf="!p.enabled">
              <i
                class="bwi bwi-exclamation-triangle tw-text-danger"
                title="{{ 'providerIsDisabled' | i18n }}"
                aria-hidden="true"
              ></i>
              <span class="tw-sr-only">{{ "providerIsDisabled" | i18n }}</span>
            </ng-container>
          </td>
        </tr>
      </ng-template>
    </bit-table>
  </ng-container>
</bit-container>