<ng-container *transloco="let t; prefix: 'external-rating'">
  <div class="row g-0">


    @if (breakpointService.isTabletOrBelow()) {
      <div class="col-auto custom-col clickable" tabindex="0" role="button" (click)="openRatingModal()">
        <ng-container [ngTemplateOutlet]="kavitaRating" />
      </div>
    } @else {
      <div class="col-auto custom-col clickable" [ngbPopover]="popContent"
           [popoverTitle]="t('kavita-tooltip')" popoverClass="md-popover">
        <ng-container [ngTemplateOutlet]="kavitaRating" />
      </div>
    }

    @for (rating of ratings; track rating.provider + rating.averageScore) {
      <div class="col-auto custom-col clickable" [ngbPopover]="externalPopContent" [popoverContext]="{rating: rating}"
           [popoverTitle]="(rating.provider | scrobbleProviderName) + getAuthorityTitle(rating)" popoverClass="sm-popover">
        <span class="badge rounded-pill me-1">
          <img class="me-1" [ngSrc]="rating.provider | providerImage:true" width="24" height="24" alt="" aria-hidden="true">
          {{rating.averageScore}}%
        </span>
      </div>
    }

    <div class="col-auto" style="padding-top: 0.5rem">
      <app-loading [loading]="isLoading" size="spinner-border-sm" />
    </div>

    <div class="col-auto ms-2"  style="padding-top: 0.25rem">
      @for(link of webLinks; track link) {
        <a class="me-1" [href]="link | safeHtml"  target="_blank" rel="noopener noreferrer" [title]="link">
          <app-image height="24px" width="24px" aria-hidden="true" [imageUrl]="imageService.getWebLinkImage(link)"
                     [errorImage]="imageService.errorWebLinkImage" />
        </a>
      }
    </div>
  </div>

  <ng-template #kavitaRating>
    <span class="badge rounded-pill ps-0 me-1">
        <app-image classes="me-1" imageUrl="assets/images/logo-32.png" width="24px" height="24px" />
        @if (hasUserRated) {
          {{userRating * 20}}
        } @else {
          N/A
        }

        @if (overallRating > 0) {
          + {{overallRating}}
        }
        @if (hasUserRated || overallRating > 0) {
          %
        }
    </span>
  </ng-template>

  <ng-template #popContent>
    <ngx-stars [initialStars]="userRating" (ratingOutput)="updateRating($event)" [size]="2"
               [maxStars]="5" [color]="starColor" />
    {{userRating * 20}}%
  </ng-template>

  <ng-template #externalPopContent let-rating="rating">
    @if (rating.favoriteCount > 0) {
      <div>
        <i class="fa-solid fa-heart" aria-hidden="true"></i> {{rating.favoriteCount}}
      </div>
    }


    @if (rating.providerUrl) {
      <a [href]="rating.providerUrl" target="_blank" rel="noreferrer nofollow">{{t('entry-label')}}</a>
    }
  </ng-template>

</ng-container>
