<div ngbAccordion [closeOthers]="true" class="accordion-box product-section-box mt-0">
  <div ngbAccordionItem [collapsed]="false">
    <h2 ngbAccordionHeader>
      <button ngbAccordionButton>
        <span>{{ 'description' | translate }}</span>
      </button>
    </h2>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <ng-template>
          <div class="product-description">
            <div class="nav-desh ckeditor-content" [innerHTML]="product()?.description"></div>
          </div>
        </ng-template>
      </div>
    </div>
  </div>
  <div ngbAccordionItem>
    <h2 ngbAccordionHeader>
      <button ngbAccordionButton>
        <span>{{ 'review' | translate }}</span>
      </button>
    </h2>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <ng-template>
          <app-product-review [product]="product()!" [reviews]="(review$ | async)?.data!" />
        </ng-template>
      </div>
    </div>
  </div>
  <div ngbAccordionItem>
    <h2 ngbAccordionHeader>
      <button ngbAccordionButton>
        <span>{{ 'q_a' | translate }}</span>
      </button>
    </h2>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <ng-template>
          <app-questions-answers
            [product]="product()!"
            [questionAnswers]="(question$ | async)?.data!"
          />
        </ng-template>
      </div>
    </div>
  </div>
</div>
