<ng-template #reviewModal let-modal>
  <div class="modal-header">
    <h3 class="fw-semibold">{{ 'write_a_review' | translate }}</h3>
    <app-button
      [class]="'btn btn-close'"
      [spinner]="false"
      [id]="'profile_modal_close_btn'"
      (click)="modal.dismiss('Cross click')"
    >
      <i class="ri-close-line"></i>
    </app-button>
  </div>

  <div class="modal-body">
    @if(form){
    <form class="product-review-form" [formGroup]="form">
      <div class="product-wrapper">
        <div class="product-image">
          <img
            [src]="product.product_thumbnail ?
                   product.product_thumbnail.original_url :
                   'assets/images/product.png'"
            class="img-fluid"
            [alt]="product.name"
          />
        </div>
        <div class="product-content">
          <h5 class="name">{{ product.name }}</h5>
          <div class="product-review-rating">
            <label>{{ 'rating' | translate }}</label>
            <div class="product-rating">
              <ngb-rating [rate]="product.rating_count" />
              @if(product.rating_count){
              <h6 class="rating-number">( {{ product.rating_count.toFixed(2) || 0 }})</h6>
              }
            </div>
          </div>
        </div>
      </div>
      <div class="review-box">
        <div class="product-review-rating">
          <label>{{ 'rating' | translate }}</label>
          <div class="product-rating">
            <ngb-rating [(rate)]="currentRate" formControlName="rating" [readonly]="false" />
          </div>

          @if(form.controls['rating'].touched && form.controls['rating'].errors?.['required']){
          <div class="invalid-feedback">{{ 'rating_is_required' | translate }}</div>
          }
        </div>
      </div>

      <div class="review-box">
        <label class="form-label" for="content">{{ 'review_content' | translate }}</label>
        <textarea
          placeholder="{{ 'write_something' | translate }}"
          class="form-control"
          formControlName="description"
          rows="3"
        ></textarea>
      </div>
    </form>
    }

    <div class="modal-footer">
      <app-button
        [class]="'btn btn-theme-outline btn-md fw-bold'"
        [type]="'button'"
        [spinner]="false"
        [id]="'cancel_profile_btn'"
        (click)="modal.dismiss('Cancel')"
        >{{ 'cancel' | translate }}</app-button
      >
      <app-button
        [class]="'btn theme-bg-color btn-md fw-bold text-light'"
        [id]="'submit_profile_btn'"
        (click)="submit()"
      >
        {{ 'submit' | translate }}
      </app-button>
    </div>
  </div>
</ng-template>
