<ng-container *transloco="let t; prefix: 'review-list-item'">

  @let item = review();

  @if (item) {
    <div class="d-flex flex-column">

    <div class="d-flex flex-row reading-list-item" role="listitem">
      <div class="d-sm-block pe-2 image-col" [ngbTooltip]="item.series.name">
        <app-image width="100%" [styles]="{'max-width':'106px','height':'auto'}" [objectFit]="'cover'" class="img-top me-2" [imageUrl]="imageUrl()" />
      </div>

      <div class="flex-grow-1 content-col d-flex flex-column">
        <div class="title-block mb-1">
          <h5 class="mb-1">
            <a class="title-link" href="/library/{{item.libraryId}}/series/{{item.seriesId}}" aria-label="Open {{title()}} details">{{title()}}</a>
          </h5>

          <div class="authors text-muted small">
            @if (item.writers.length > 0) {
              <span class="me-1">{{t('by-label')}}</span>
            }

            @for(writer of item.writers; track writer.name; let last = $last) {
              <a href="/person/{{writer.name}}" aria-label="View {{writer.name}}">{{writer.name}}</a>@if (!last) {, }
            }
          </div>
        </div>

        <div class="d-none d-sm-none d-lg-block pe-2 image-col rating-block mb-2" aria-hidden="true">
          <ngx-stars [initialStars]="item.rating" [size]="1" [maxStars]="5" [color]="starColor" [readonly]="true" />
        </div>

        <div class="d-none d-sm-none d-lg-block pe-2 image-col body-block">
          <app-read-more class="review-body" [text]="item.body || ''" [showToggle]="false" [maxLength]="500" />
        </div>
      </div>
    </div>

    <div class="d-sm-block d-md-block d-lg-none pe-2 image-col rating-block mb-2" aria-hidden="true">
      <ngx-stars [initialStars]="item.rating" [size]="1" [maxStars]="5" [color]="starColor" [readonly]="true" />
    </div>


    <div class="d-sm-block d-md-block d-lg-none pe-2 image-col body-block">
      <app-read-more class="review-body" [text]="item.body || ''" [showToggle]="false" [maxLength]="500" />
    </div>


    @if (item.createdUtc !== NULL_DATE) {
      <div class="footer d-flex justify-content-end align-items-center mt-2">
        <div class="text-muted small me-3">
          <span class="visually-hidden">{{t('created-alt')}}</span>
          <time [attr.datetime]="item.createdUtc">{{item.createdUtc | date:'longDate'}}</time>
        </div>

        <div class="actions">
          <button class="btn btn-link p-0 ms-2" aria-label="Report review">
            <i class="bi-flag" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    }

    </div>
  }

</ng-container>
