@if (!loading && providers.length !== 0) {
  <hr/>
  <div>
    <p class="mat-body-2 secondary">{{ message }}</p>

    <div class="provider-container">
      @for (provider of providers; track $index) {
        <a class="provider-item" (click)="provider.disabled ? confirmDelete(provider) : openOAuth(provider)"
           [class.disabled]="!canUnlink && provider.disabled || provider.active"
           [class.provider-unlink]="canUnlink && provider.disabled">
          <img [alt]="provider.providerName" [src]="provider.icon"
               class="provider-icon" draggable="false"/>
          @if (provider.active) {
            <app-data-spinner class="provider-spinner"/>
          }
        </a>
      }
    </div>
  </div>
} @else if (loading) {
  <hr/>
  <app-data-spinner style="display: flex; justify-content: center;"/>
}