<ng-container *transloco="let t; prefix:'review-card-modal'">
  <div>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">
        {{t('user-review', {username:review().username})}}
        @if(review().isExternal) {
          <img class="me-1" [ngSrc]="review().provider | providerImage" width="20" height="20" alt="">
        }
      </h4>
      <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()"></button>
    </div>
    <div class="modal-body scrollable-modal">
      @if (review().tagline) {
        <p [innerHTML]="review().tagline ?? '' | safeHtml"></p>
      }
      <p #container class="img-max-width" [innerHTML]="review().body | safeHtml"></p>
    </div>
    <div class="modal-footer">
      @if (review().siteUrl) {
        <a class="btn btn-icon" [href]="review().siteUrl ?? '' | safeHtml" target="_blank" rel="noopener noreferrer" [title]="review().siteUrl">
          {{t('go-to-review')}}
        </a>
      }
      <button type="submit" class="btn btn-primary" (click)="close()">{{t('close')}}</button>
    </div>
  </div>
</ng-container>

