@if (currentPost$ | async; as post) {
  <div class="trail-page trail-page--narrow">
    <div class="trail-card">
      <div class="trail-progress">
        {{ 'QUESTION.PROGRESS' | translate: { n: currentIndex() + 1 } }}
      </div>

      <h1 class="trail-heading">
        @if (language.activeLang() === 'de') {
          {{ post.questionDE }}
        } @else {
          {{ post.questionEN }}
        }
      </h1>

      <div class="trail-actions">
        @for (answer of answers(post); track $index) {
          <button type="button" class="trail-btn" (click)="selectAnswer($index)">
            {{ answer }}
          </button>
        }
      </div>

      @if (toast) {
        <div
          class="trail-toast"
          [class.error]="toast.type === 'error'"
          [class.success]="toast.type === 'success'"
        >
          {{ toast.messageKey | translate }}
        </div>
      }
    </div>
  </div>
}