<ng-container *transloco="let t; prefix:'scrobbling-providers'">
  @let providerName = provider() | scrobbleProviderName;
  <div class="col-auto">
    <img class="me-2" width="32" height="32" ngSrc="assets/images/ExternalServices/{{providerName}}.png" alt="{{providerName}}" [ngbTooltip]="providerName">
    @if(token() && token().length > 0) {
      {{t('token-set')}}
    } @else {
      {{t('no-token-set')}}
    }
    <span class="ms-4">
      @if(hasExpired()) {
        <i class="error fa-solid fa-exclamation-circle error" aria-hidden="true" [ngbTooltip]="t('token-expired')"></i>
        <span class="visually-hidden">{{t('token-expired')}}</span>
      } @else {
        <i class="fa-solid fa-circle-check ms-1 confirm-icon success" aria-hidden="true" [ngbTooltip]="t('token-valid')"></i>
        <span class="visually-hidden" aria-describedby="">{{providerName}}: {{t('token-valid')}}</span>
      }
    </span>
  </div>
  @if (isEditMode()) {
    <div class="row col-auto mt-3">
      <ng-container [ngTemplateOutlet]="editRef()" />
    </div>
  }

</ng-container>
