<div class="row">
  @if(product?.can_review || product?.reviews_count){
  <div class="col-xl-5">
    <div class="product-rating-box">
      <div class="row">
        @if(product?.reviews_count){
        <div class="col-xl-12">
          <div class="product-main-rating">
            @if(product?.rating_count){
            <h2>{{ product?.rating_count?.toFixed(2) }} <i class="ri-star-fill"></i></h2>
            }
            <h5>{{ product?.reviews_count }} {{ 'rating' | translate }}</h5>
          </div>
        </div>
        }
        <div class="col-xl-12">
          @if(product?.reviews_count){
          <ul class="product-rating-list">
            @for(rate of product?.review_ratings?.slice()?.reverse(); track rate; let i = $index){
            <li>
              <div class="rating-product">
                <h5>
                  {{ (product?.review_ratings?.length! - 1 - i) + 1 }}<i class="ri-star-fill"></i>
                </h5>
                <div class="progress">
                  <div
                    class="progress-bar"
                    [ngStyle]="{'width': ((rate / product?.reviews_count!) * 100).toFixed(0)+'%'}"
                    aria-valuenow="100"
                    aria-valuemin="0"
                    aria-valuemax="100"
                  ></div>
                </div>
                <h5 class="total">{{ rate }}</h5>
              </div>
            </li>
            }
          </ul>
          } @if(product?.can_review){
          <div class="review-title-2">
            <h4 class="fw-bold">{{ 'review_this_product' | translate }}</h4>
            <p>{{ 'let_other_customers_know_what_you_think' | translate }}</p>
            <app-button
              [class]="'btn'"
              [id]="'reviews_modal_btn'"
              [spinner]="false"
              (click)="reviewModal.openModal(product!, product?.user_review ? 'edit' : 'create')"
            >
              {{ (product?.user_review ? 'edit_review' : 'write_a_review') | translate }}
            </app-button>
          </div>
          }
        </div>
      </div>
    </div>
  </div>
  } @if(product?.can_review || product?.reviews_count){
  <div class="col-xl-7">
    <div class="review-people">
      @if(reviews && reviews.length){
      <ul class="review-list">
        @for(review of reviews; track review){
        <li>
          <div class="people-box">
            <div>
              <div class="people-image people-text">
                @if(review?.consumer?.profile_image){
                <img
                  [src]="review?.consumer?.profile_image?.original_url"
                  class="img-fluid"
                  alt="user"
                />
                }@else {
                <div class="user-round">
                  <h4>{{ review?.consumer?.name?.charAt(0)?.toString()?.toUpperCase() || 'F' }}</h4>
                </div>
                }
              </div>
            </div>
            <div class="people-comment">
              <div class="people-name">
                <a class="name" href="javascript:void(0)">{{ review?.consumer?.name }}</a>
                <div class="date-time">
                  <h6 class="text-content">
                    {{ review?.created_at | date: 'dd MMM yyyy hh:mm:a' }}
                  </h6>
                  <div class="product-rating">
                    <ngb-rating [rate]="review?.rating || 0" />
                  </div>
                </div>
              </div>
              <div class="reply">
                <p>{{ review?.description}}</p>
              </div>
            </div>
          </div>
        </li>
        }
      </ul>
      } @if(!(reviews && reviews.length)){
      <app-no-data
        [class]="'no-data-added'"
        [text]="'No Review Yet'"
        [description]="'There are currently no ratings or reviews for this product'"
      />
      }
    </div>
  </div>
  } @if(!product?.can_review && !product?.reviews_count){
  <div class="col-xl-12">
    @if(!(reviews && reviews.length)){
    <app-no-data
      [class]="'no-data-added'"
      [text]="'No Review Yet'"
      [description]="'There are currently no ratings or reviews for this product'"
    />
    }
  </div>
  }
</div>
<app-review-modal #reviewModal />
