<section class="question-list section">
  @if (allowSubmission) {
    <button type="button" class="ask-btn" [attr.aria-expanded]="askFormVisible()" (click)="askFormVisible.set(!askFormVisible())">
      @if (askFormVisible()) { {{ 'productDetails.hideQuestionForm' | translate }} } @else { {{ 'productDetails.askQuestion' | translate }} }
    </button>
  } @else {
    <p class="submission-disabled">{{ 'productDetails.questionsSubmissionFuture' | translate }}</p>
  }

  @if (allowSubmission && askFormVisible()) {
    <app-question-form [submitting]="submitting" (submitQuestion)="onSubmit($event)" />
  }

  @if (loading) {
    <div class="skeleton-list">
      <div class="skeleton-card"></div>
      <div class="skeleton-card"></div>
    </div>
  } @else if (result?.items?.length) {
    <div class="question-items">
      @for (question of result!.items; track question.id) {
        <app-question-card [question]="question" />
      }
    </div>
  } @else {
    <app-empty-state class="empty" [title]="'productDetails.questionsEmpty' | translate" />
  }

  @if (result && totalPages > 1) {
    <div class="pager">
      <button type="button" (click)="previousPage()" [disabled]="result.page <= 1">{{ 'productDetails.previous' | translate }}</button>
      <span>{{ 'productDetails.pageOf' | translate:{ page: result.page, total: totalPages } }}</span>
      <button type="button" (click)="nextPage()" [disabled]="result.page >= totalPages">{{ 'productDetails.next' | translate }}</button>
    </div>
  }
</section>
