<aside class="context-panel" aria-label="Gebietsinformationen">
  @if (worldStore.currentLocation(); as location) {
    <span class="context-panel__eyebrow">GEBIETSINFO</span>
    <h2>{{ location.name }}</h2>

    @if (worldStore.selectedConnection(); as selected) {
      <p class="context-panel__selection">Ausgewähltes Ziel: {{ selected.targetLocation.name }}</p>
    }

    <img
      class="context-panel__artwork"
      [src]="location.artworkPath"
      [alt]="'Ortsansicht: ' + location.name"
    />
    <p class="context-panel__description">{{ location.description }}</p>

    <dl class="context-panel__facts">
      <div>
        <dt>Empfohlene Stufe</dt>
        <dd>{{ location.minRecommendedLevel }}–{{ location.maxRecommendedLevel }}</dd>
      </div>
      <div>
        <dt>Sicherheit</dt>
        <dd [class.context-panel__safe]="location.isSafe">
          {{ location.isSafe ? 'Sicherer Ort' : 'Gefährliches Gebiet' }}
        </dd>
      </div>
      <div>
        <dt>Jagd</dt>
        <dd>{{ location.huntingEnabled ? 'Jagd möglich' : 'Keine Jagd' }}</dd>
      </div>
    </dl>
  } @else {
    <span class="context-panel__eyebrow">GEBIETSINFO</span>
    <p class="context-panel__hint">Informationen erscheinen mit der Weltansicht.</p>
  }
</aside>
