<div class="full-rating">
  <ui-stars [rating]="rating" [size]="18"></ui-stars>
  <span class="label">{{ rating }} Sterne</span>
</div>

<div class="reviews">
  <hr />
  @for (review of reviews; track review) {
    <div class="review">
      <div class="row">
        <ui-stars [rating]="review.rating"></ui-stars>
        <span class="title">{{ review.title }}</span>
      </div>
      <div class="row">
        <span class="author">{{ review.author }} | {{ review.created | date: 'dd.MM.yy' }}</span>
      </div>
      <div class="row">
        <span>
          @if (expandIds.indexOf(review.id) === -1) {
            <span class="text">{{ review.text | substr: 150 }}</span>
          }
          @if (expandIds.indexOf(review.id) > -1) {
            <span class="text">{{ review.text }}</span>
          }
        </span>
      </div>
      <div class="row right">
        @if (expandIds.indexOf(review.id) === -1) {
          <button class="btn-expand" (click)="expand(review.id)">
            Mehr
            <ui-icon icon="arrow"></ui-icon>
          </button>
        }
        @if (expandIds.indexOf(review.id) > -1) {
          <button class="btn-collapse" (click)="expand(review.id)">
            <ui-icon icon="arrow" rotate="180deg"></ui-icon>
            Weniger
          </button>
        }
      </div>
    </div>
    <hr />
  }
</div>
