<!-- Section -->
<section>
  <div class="bannerimg cover-image" style="background: url(./assets/images/photos/banner1.jpg) center center;">
    <div class="header-text mb-0">
      <div class="container">
        <div class="row text-white">
          <div class="col">
            <h1 class="mb-0">{{faq?.faqcategory?.faqcategoryname}}</h1>
          </div>
          <div class="col col-sm-auto">
            <ol class="breadcrumb text-center d-flex align-items-center justify-content-center">
              <li class="breadcrumb-item">
                <a routerLink="/" class="text-white-50">{{'Home' | translate}}</a>
              </li>
              <li class="breadcrumb-item">
                <a routerLink="/faqs" class="text-white-50">{{'FAQ’s' | translate}}</a>
              </li>
              <li class="breadcrumb-item active text-wrap">
                <a href="javascript:;" class="text-white">{{faq?.faqcategory?.faqcategoryname}}</a>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Section -->

<!--Section-->
@if (faqloading) {
<section>
  <div class="cover-image mt-0 sptb">
    <div class="container">
      <div class="accordion-group d-flex justify-content-between">
        <p class="d-flex align-items-center w-auto"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10" fill="#dee5f7" />
            <path fill="#565b95"
              d="M15 10A3.0001 3.0001 0 0 0 9.40234 8.499a.99981.99981 0 0 0 1.73047 1.002A1.00022 1.00022 0 1 1 12 11a.99943.99943 0 0 0-1 1v1a1 1 0 0 0 2 0v-.18433A2.99487 2.99487 0 0 0 15 10zM12 17a.9994.9994 0 0 1-.37988-.08008 1.14718 1.14718 0 0 1-.33008-.21 1.16044 1.16044 0 0 1-.21-.33008A.83154.83154 0 0 1 11 16a1.39038 1.39038 0 0 1 .01953-.2002.65026.65026 0 0 1 .06055-.17968.74157.74157 0 0 1 .08984-.18067A1.61105 1.61105 0 0 1 11.29 15.29a1.04667 1.04667 0 0 1 1.41992 0A1.0321 1.0321 0 0 1 13 16a.9994.9994 0 0 1-.08008.37988.90087.90087 0 0 1-.54.54A.9994.9994 0 0 1 12 17z" />
          </svg>
          <span class="line-skeleton w-200"></span>
        </p>
      </div>
      <div class="accordion accordionExample">
        <div class="row mb-5">
          <div class="accordion-item h-7 mb-2">
            <h2 class="line-skeleton w-30 mt-4"></h2>
          </div>
          <div class="accordion-item h-7 mb-2">
            <h2 class="line-skeleton w-30 mt-4"></h2>
          </div>
          <div class="accordion-item h-7 mb-2">
            <h2 class="line-skeleton w-30 mt-4"></h2>
          </div>
        </div>
      </div>
      <div class="accordion-group d-flex justify-content-between mt-3">
        <p class="d-flex align-items-center w-auto"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10" fill="#dee5f7" />
            <path fill="#565b95"
              d="M15 10A3.0001 3.0001 0 0 0 9.40234 8.499a.99981.99981 0 0 0 1.73047 1.002A1.00022 1.00022 0 1 1 12 11a.99943.99943 0 0 0-1 1v1a1 1 0 0 0 2 0v-.18433A2.99487 2.99487 0 0 0 15 10zM12 17a.9994.9994 0 0 1-.37988-.08008 1.14718 1.14718 0 0 1-.33008-.21 1.16044 1.16044 0 0 1-.21-.33008A.83154.83154 0 0 1 11 16a1.39038 1.39038 0 0 1 .01953-.2002.65026.65026 0 0 1 .06055-.17968.74157.74157 0 0 1 .08984-.18067A1.61105 1.61105 0 0 1 11.29 15.29a1.04667 1.04667 0 0 1 1.41992 0A1.0321 1.0321 0 0 1 13 16a.9994.9994 0 0 1-.08008.37988.90087.90087 0 0 1-.54.54A.9994.9994 0 0 1 12 17z" />
          </svg>
          <span class="line-skeleton w-200"></span>
        </p>
      </div>
      <div class="accordion accordionExample">
        <div class="row mb-5">
          <div class="accordion-item h-7 mb-2">
            <h2 class="line-skeleton w-30 mt-4"></h2>
          </div>
          <div class="accordion-item h-7 mb-2">
            <h2 class="line-skeleton w-30 mt-4"></h2>
          </div>
          <div class="accordion-item h-7 mb-2">
            <h2 class="line-skeleton w-30 mt-4"></h2>
          </div>
        </div>
      </div>
      <div class="accordion-group d-flex justify-content-between mt-3">
        <p class="d-flex align-items-center w-auto"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10" fill="#dee5f7" />
            <path fill="#565b95"
              d="M15 10A3.0001 3.0001 0 0 0 9.40234 8.499a.99981.99981 0 0 0 1.73047 1.002A1.00022 1.00022 0 1 1 12 11a.99943.99943 0 0 0-1 1v1a1 1 0 0 0 2 0v-.18433A2.99487 2.99487 0 0 0 15 10zM12 17a.9994.9994 0 0 1-.37988-.08008 1.14718 1.14718 0 0 1-.33008-.21 1.16044 1.16044 0 0 1-.21-.33008A.83154.83154 0 0 1 11 16a1.39038 1.39038 0 0 1 .01953-.2002.65026.65026 0 0 1 .06055-.17968.74157.74157 0 0 1 .08984-.18067A1.61105 1.61105 0 0 1 11.29 15.29a1.04667 1.04667 0 0 1 1.41992 0A1.0321 1.0321 0 0 1 13 16a.9994.9994 0 0 1-.08008.37988.90087.90087 0 0 1-.54.54A.9994.9994 0 0 1 12 17z" />
          </svg>
          <span class="line-skeleton w-200"></span>
        </p>
      </div>
      <div class="accordion accordionExample">
        <div class="row mb-5">
          <div class="accordion-item h-7 mb-2">
            <h2 class="line-skeleton w-30 mt-4"></h2>
          </div>
          <div class="accordion-item h-7 mb-2">
            <h2 class="line-skeleton w-30 mt-4"></h2>
          </div>
          <div class="accordion-item h-7 mb-2">
            <h2 class="line-skeleton w-30 mt-4"></h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
} @else {
<!--Section-->
<section>
  <div class="cover-image sptb">
    <div class="container">
      <div class="row">
        <div class="col-xl-12">
          <div aria-multiselectable="true" class="accordion suuport-accordion" id="accordion" role="tablist">
            @if (faq?.faqcategory?.faqdetails?.length) {
            <div class="accordion accordionExample">
              <div class="row mb-5">
                @for (faqs of faq?.faqcategory?.faqdetails; track faqs; let i = $index) {
                <div ngbAccordion [closeOthers]="true" id="static-{{i}}" class="mb-1">
                  <div ngbAccordionItem>
                    <h2 ngbAccordionHeader>
                      <button ngbAccordionButton>{{faqs?.question}}</button>

                      @if(faq?.setting?.cust_google_translate == 'on'){
                      <span class="btn btn-white btn-sm" id="translate-btn" (click)="translateModel(translateins, faqs)"
                        [ngbTooltip]="'Translate' | translate">
                        <i class="fa fa-solid fa-language"></i>
                      </span>
                      }
                    </h2>
                    <div ngbAccordionCollapse>
                      <div ngbAccordionBody>
                        <ng-template>
                          <ng-container>
                            <div [innerHTML]="sanitizeHtml(faqs?.answer)"></div>
                          </ng-container>
                        </ng-template>
                      </div>
                    </div>
                  </div>
                </div>
                }
              </div>
            </div>
            } @else {
            <div class="card no-articles">
              <div class="card-body p-8">
                <div class="main-content text-center">
                  <div class="notification-icon-container p-4">
                    <img src="/assets/images/noarticle.png" alt="" loading="lazy" decoding="async">
                  </div>
                  <h4 class="mb-1">{{'There are no new FAQ’s' | translate}}</h4>
                  <p class="text-muted">{{'This faq section will be updated shortly.' |
                    translate}}</p>
                </div>
              </div>
            </div>
            }
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--Section-->
}


<ng-template #translateins let-modal>
  <div class="modal-header">
    <h5 class="modal-title">{{'Translate'|translate}}</h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body">
    <form #translate="ngForm" (ngSubmit)="translateFn(translate, 'translate')">
      <ng-select class="form-control custom-select form-select" [items]="languages"
        [placeholder]="'Select Language' | translate" bindLabel="name" [multiple]="false" [searchable]="true"
        dropdownPosition="auto" bindValue="id" name="languages" [ngModel]="null" [virtualScroll]="true">
        <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
          <div><span>{{item.name}}</span></div>
        </ng-template>
      </ng-select>
      <div class="btn-list mt-1">
        <button type="submit" [disabled]="translate.invalid || sendingResponse['translate']"
          class="btn btn-secondary">{{"Update" | translate}}@if (sendingResponse['translate']) {
          <i class="fa fa-spinner fa-spin mx-1"></i>
          }</button>
      </div>
    </form>
  </div>
</ng-template>