<section class="travel-panel" aria-live="polite">
  @if (travellingTravel; as travel) {
    <span class="travel-panel__eyebrow">REISE LÄUFT</span>
    <h2>Reiseziel: {{ travel.targetLocation.name }}</h2>
    <dl class="travel-panel__details">
      <div>
        <dt>Ankunft in</dt>
        <dd>{{ formatDuration(remainingSeconds ?? 0) }}</dd>
      </div>
      <div>
        <dt>Ziel</dt>
        <dd>{{ travel.targetLocation.name }}</dd>
      </div>
    </dl>
    <button type="button" data-travel-start disabled>Reise läuft</button>
  } @else if (selectedConnection; as connection) {
    <span class="travel-panel__eyebrow">REISEN</span>
    <h2>Zur {{ connection.targetLocation.name }} reisen?</h2>
    <dl class="travel-panel__details">
      <div>
        <dt>Ziel</dt>
        <dd>{{ connection.targetLocation.name }}</dd>
      </div>
      <div>
        <dt>Reisezeit</dt>
        <dd>{{ formatDuration(connection.travelDurationSeconds) }}</dd>
      </div>
      <div>
        <dt>Gefahr</dt>
        <dd [class.travel-panel__danger--low]="connection.danger === 'LOW'">
          {{ dangerLabel(connection.danger) }}
        </dd>
      </div>
    </dl>
    <button type="button" data-travel-start [disabled]="busy" (click)="travelStart.emit()">
      Reise beginnen
    </button>
  } @else {
    <span class="travel-panel__eyebrow">REISEN</span>
    <p class="travel-panel__instruction">Wähle einen erreichbaren Ort auf der Karte.</p>
  }
</section>
