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

    <p class="post-code">{{ 'DIRECTIONS.CODE' | translate: { code: post.fallbackCodeText } }}</p>

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

    <p class="trail-hint">{{ 'DIRECTIONS.HINT' | translate }}</p>

    <div class="trail-actions">
      <button type="button" class="trail-btn trail-btn-primary" (click)="openScanner()">
        {{ 'DIRECTIONS.SCAN' | translate }}
      </button>
    </div>
  </div>
</div>
}