<app-breadcrumb [breadcrumb]="breadcrumb" />

@if((faq$ | async )?.data?.length){
<section class="faq-box-contain section-b-space">
  <div class="container">
    @if(pageService && pageService.skeletonLoader){
    <app-skeleton-page />
    }@else {
    <div class="row">
      <div class="col-xl-5">
        <div class="faq-contain">
          <h2>{{ 'frequently_asked_questions' | translate }}</h2>
          <p>{{ 'you_can_find_out_more_searching' | translate }}</p>
        </div>
      </div>
      <div class="col-xl-7">
        <div class="faq-accordion">
          <div class="accordion" ngbAccordion [closeOthers]="true">
            @for(faq of (faq$ | async )?.data; track faq; let i = $index){
            <div ngbAccordionItem class="accordion-item" [collapsed]="i !== 0">
              <h2 class="accordion-header" ngbAccordionHeader>
                <button class="accordion-button" type="button" ngbAccordionButton>
                  {{ faq.title }}
                  <i class="ri-arrow-down-s-line"></i>
                </button>
              </h2>
              <div ngbAccordionCollapse class="accordion-collapse collapse">
                <div ngbAccordionBody>
                  <ng-template>
                    <div class="accordion-body">
                      <p>{{ faq.description }}</p>
                    </div>
                  </ng-template>
                </div>
              </div>
            </div>
            }
          </div>
        </div>
      </div>
    </div>
    }
  </div>
</section>
}

<!-- No Data -->
@if((faq$ | async )?.data?.length && pageService.skeletonLoader){
<app-no-data
  [class]="'no-data-added collection-no-data'"
  [image]="'assets/svg/no-product.svg'"
  [text]="'no_faq_found'"
  [description]="'inform_you_that_the_faq__currently_unavailable'"
/>
}
