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

