<ng-container *transloco="let t; read:'review-card'">
  <div class="card mb-3" style="max-width: 320px; max-height: 160px; height: 160px" (click)="showModal()">
    <div class="row g-0">
      <div class="col-md-2 d-none d-md-block">
        <i class="img-fluid rounded-start fa-solid fa-circle-user profile-image" aria-hidden="true"></i>
        <div *ngIf="isMyReview" class="my-review">
              <i class="fa-solid fa-star" aria-hidden="true" [title]="t('your-review')"></i>
              <span class="visually-hidden">{{t('your-review')}}</span>
        </div>
      </div>
      <div class="col-md-10">
        <div class="card-body">
          <h6 class="card-title" [title]="review.tagline">
            <ng-container *ngIf="review.tagline && review.tagline.length > 0; else noTagline">{{review.tagline.substring(0, 29)}}{{review.tagline.length > 29 ? '…' : ''}}</ng-container>
            <ng-template #noTagline>
              {{review.isExternal ? t('external-review') : t('local-review')}}
            </ng-template>
          </h6>
          <p class="card-text no-images">
            <app-read-more [text]="(review.isExternal ? review.bodyJustText : review.body) || ''" [maxLength]="100" [showToggle]="false"></app-read-more>
          </p>
        </div>
      </div>

      <div class="card-footer bg-transparent text-muted">
        <ng-container *ngIf="isMyReview; else normalReview">
          <i class="d-md-none fa-solid fa-star me-1" aria-hidden="true" [title]="t('your-review')"></i>
        </ng-container>
        <ng-template #normalReview>
          <img class="me-1" [ngSrc]="review.provider | providerImage" width="20" height="20" alt="">
        </ng-template>
        {{(isMyReview ? '' : review.username | defaultValue:'')}}
        <span style="float: right" *ngIf="review.isExternal">{{t('rating-percentage', {r: review.score})}}</span>
      </div>
    </div>
  </div>
</ng-container>
