@if (visible()) {
  <aside class="context-help">
    <button
      type="button"
      class="context-help__toggle"
      [attr.aria-expanded]="expanded()"
      (click)="toggle()"
    >
      <span aria-hidden="true">?</span>
      <strong>{{ title() }}</strong>
      <span aria-hidden="true">{{ expanded() ? '−' : '+' }}</span>
    </button>
    @if (expanded()) {
      <div class="context-help__content">
        <ul>
          @for (hint of hints(); track hint) {
            <li>{{ hint }}</li>
          }
        </ul>
        <a [routerLink]="guideCommands()" [fragment]="sectionId()">Mehr dazu</a>
      </div>
    }
  </aside>
}
