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

<div class="reviews">
  <hr />
  <ng-container *ngFor="let review of reviews">
    <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>
          <span class="text" *ngIf="expandIds.indexOf(review.id) === -1">{{ review.text | substr: 150 }}</span>
          <span class="text" *ngIf="expandIds.indexOf(review.id) > -1">{{ review.text }}</span>
        </span>
      </div>
      <div class="row right">
        <button *ngIf="expandIds.indexOf(review.id) === -1" class="btn-expand" (click)="expand(review.id)">
          Mehr
          <ui-icon icon="arrow"></ui-icon>
        </button>
        <button *ngIf="expandIds.indexOf(review.id) > -1" class="btn-collapse" (click)="expand(review.id)">
          <ui-icon icon="arrow" rotate="180deg"></ui-icon>
          Weniger
        </button>
      </div>
    </div>
    <hr />
  </ng-container>
</div>
