<div class="product-section-box mt-0">
  <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-tabs custom-nav">
    <li ngbNavItem="description">
      <a ngbNavLink>{{ 'description' | translate }}</a>
      <ng-template ngbNavContent>
        <div class="product-description more-less-box" [class.more]="showMore">
          @if(product?.description){
          <div
            class="nav-desh ckeditor-content"
            id="description"
            #description
            [innerHTML]="getTrustedHtml(product?.description)"
          ></div>
          } @if(height > 500 || width < 768){
          <button class="btn more-lest-btn" (click)="seeMore()">
            {{ (!showMore ? 'show_more' : 'show_less') | translate }}
            <i class="ri-arrow-down-s-line"></i>
          </button>
          }
        </div>
      </ng-template>
    </li>

    @if(!product?.is_external){
    <li ngbNavItem="review">
      <a ngbNavLink>{{ 'review' | translate }}</a>
      <ng-template ngbNavContent>
        <app-product-review [product]="product" [reviews]="(review$ | async)?.data || []" />
      </ng-template>
    </li>
    }
    <li ngbNavItem="questions_answers">
      <a ngbNavLink>{{ 'q_a' | translate }}</a>
      <ng-template ngbNavContent>
        <app-questions-answers
          [product]="product!"
          [questionAnswers]="(question$ | async)?.data || []"
        />
      </ng-template>
    </li>
  </ul>
  <div [ngbNavOutlet]="nav" class="custom-tab"></div>
</div>
