<article class="question-card card">
  <header>
    <strong>{{ question.author }}</strong>
    <time>{{ question.createdAt | date:'mediumDate' }}</time>
  </header>

  <p class="question-text">{{ question.text }}</p>

  @if (question.answers.length > 0) {
    <div class="answers">
      @for (answer of question.answers; track answer.id) {
        <div class="answer">
          <div class="answer-meta">
            <strong>{{ answer.author }}</strong>
            <span class="seller-pill" [class.visible]="answer.isOfficialSeller">{{ 'productDetails.officialSeller' | translate }}</span>
            @if (answer.isAccepted) {
              <span class="accepted-pill">{{ 'productDetails.acceptedAnswer' | translate }}</span>
            }
          </div>
          <p>{{ answer.text }}</p>
        </div>
      }
    </div>
  }

  <footer>
    <button type="button" disabled>{{ 'productDetails.like' | translate }} ({{ question.likes }})</button>
    <button type="button" disabled>{{ 'productDetails.dislike' | translate }} ({{ question.dislikes }})</button>
  </footer>
</article>
