@if (info) {
<div class="rating">
  @if (info.rating !== undefined) {
    <table>
      <tr>
        <th>{{ i18n.texts.pages.trail.sections.comments.rate.global }}</th>
        <td>
          <app-rate [rate]="info.rating"></app-rate>
          @if (info.nbRates) {<span>{{ 'pages.trail.sections.comments.rate.global_on_nb' | i18nString:info.nbRates }}</span>}
        </td>
      </tr>
      @if (myRate !== undefined && myRate !== null) {
        <tr>
          <th>{{ i18n.texts.pages.trail.sections.comments.rate.yours }}</th>
          <td><app-rate [rate]="myRate"></app-rate></td>
        </tr>
      }
    </table>
    @if (info.nbRate0 || info.nbRate1 || info.nbRate2 || info.nbRate3 || info.nbRate4 || info.nbRates) {
      <div class="count-by-rate">
        @let total = info.nbRates ?? 1;
        <div (click)="setFilterRate(5)">
          <app-rate [rate]="5" [showValue]="false"></app-rate>
          @let nb5 = info.nbRate5 ?? 0;
          <app-progress-bar [done]="nb5" [total]="total" [text]="'' + nb5 + ' / ' + total" [height]="14"></app-progress-bar>
        </div>
        <div (click)="setFilterRate(4)">
          <app-rate [rate]="4" [showValue]="false"></app-rate>
          @let nb4 = info.nbRate4 ?? 0;
          <app-progress-bar [done]="nb4" [total]="total" [text]="'' + nb4 + ' / ' + total" [height]="14"></app-progress-bar>
        </div>
        <div (click)="setFilterRate(3)">
          <app-rate [rate]="3" [showValue]="false"></app-rate>
          @let nb3 = info.nbRate3 ?? 0;
          <app-progress-bar [done]="nb3" [total]="total" [text]="'' + nb3 + ' / ' + total" [height]="14"></app-progress-bar>
        </div>
        <div (click)="setFilterRate(2)">
          <app-rate [rate]="2" [showValue]="false"></app-rate>
          @let nb2 = info.nbRate2 ?? 0;
          <app-progress-bar [done]="nb2" [total]="total" [text]="'' + nb2 + ' / ' + total" [height]="14"></app-progress-bar>
        </div>
        <div (click)="setFilterRate(1)">
          <app-rate [rate]="1" [showValue]="false"></app-rate>
          @let nb1 = info.nbRate1 ?? 0;
          <app-progress-bar [done]="nb1" [total]="total" [text]="'' + nb1 + ' / ' + total" [height]="14"></app-progress-bar>
        </div>
        <div (click)="setFilterRate(0)">
          <app-rate [rate]="0" [showValue]="false"></app-rate>
          @let nb0 = info.nbRate0 ?? 0;
          <app-progress-bar [done]="nb0" [total]="total" [text]="'' + nb0 + ' / ' + total" [height]="14"></app-progress-bar>
        </div>
      </div>
    }
  } @else {
    <div class="no-rate">{{ i18n.texts.pages.trail.sections.comments.rate.no_rate }}</div>
  }
</div>
}
<div class="rate-and-comment-button-container">
@if (trail && !info?.itsMine && authenticated && connected && myRate !== undefined) {
  <ion-button (click)="openCommentModal()" size="small">
    @if (myRate === null) {
      {{ i18n.texts.pages.trail.sections.comments.rate.write_a_review }}
    } @else {
      {{ i18n.texts.pages.trail.sections.comments.rate.change_rate_or_review }}
    }
  </ion-button>
}
</div>
@if (!authenticated) {
  <div class="disconnected-message">{{ i18n.texts.pages.trail.sections.comments.not_authenticated }}</div>
} @else if (!connected && feedbacks === undefined) {
  <div class="disconnected-message">{{ i18n.texts.pages.trail.sections.comments.not_connected }}</div>
}
@if (feedbacks !== undefined && trail) {
  <div class="comments">
    @if (filterRate !== undefined) {
      <div class="filter">
        <span>{{ 'pages.trail.sections.comments.show_reviews_with_rate' | i18nString:filterRate }}</span>
        <ion-icon name="cross" (click)="setFilterRate(undefined)"></ion-icon>
      </div>
    } @else if (hasFollowedThisTrail) {
      <div class="filter-followed-trail">
        <ion-checkbox labelPlacement="end" [checked]="showFollowedThisTrail" (ionChange)="setFilterHasFollowedThisTrail($event.detail.checked)">
          {{i18n.texts.pages.trail.sections.comments.filter_has_done_this_trail}}
        </ion-checkbox>
      </div>
    }
    @for (fb of feedbacks; track fb.uuid) {
      @if (showFollowedThisTrail || fb.comment || fb.rate !== undefined) {
        <app-feedback [feedback]="fb" [trailUuid]="trail.uuid" (feedbackChange)="feedbackChanged(fb, $event)"></app-feedback>
      }
    }
    <div class="load-button">
      @if (!loadingComments) {
        @if (!lastPage) {
          <ion-button fill="clear" color="secondary" (click)="loadMoreComments()">
            {{ i18n.texts.pages.trail.sections.comments.load_more_comments }}
          </ion-button>
        }
      } @else {
        <ion-spinner></ion-spinner>
      }
    </div>
  </div>
}