<sky-wait [isWaiting]="links() === 'loading'" />
@if (links() === 'loading') {
  <ng-container [ngTemplateOutlet]="headingTemplateRef" />
} @else {
  @if (hasLinks()) {
    <ng-container [ngTemplateOutlet]="headingTemplateRef" />
    <ul class="sky-link-list">
      @for (link of linksArray(); track link) {
        <li>
          @if (link | linkAs: 'skyHref') {
            <a [skyHref]="link.permalink.url">
              {{ link.label }}
            </a>
          } @else if (link | linkAs: 'href') {
            <a [href]="link.permalink.url">
              {{ link.label }}
            </a>
          } @else if (link.permalink.route) {
            <a
              [skyAppLink]="link.permalink.route.commands"
              [queryParams]="link.permalink.route.extras?.queryParams"
              [queryParamsHandling]="
                link.permalink.route.extras?.queryParamsHandling
              "
              [fragment]="link.permalink.route.extras?.fragment"
              [preserveFragment]="link.permalink.route.extras?.preserveFragment"
              [skipLocationChange]="
                link.permalink.route.extras?.skipLocationChange
              "
              [replaceUrl]="link.permalink.route.extras?.replaceUrl"
              [state]="link.permalink.route.extras?.state"
            >
              {{ link.label }}
            </a>
          }
        </li>
      }
      <ng-content select="sky-link-list-item" />
    </ul>
  }
}

<ng-template #headingTemplateRef>
  <h2 class="sky-font-heading-4">{{ headingText() }}</h2>
</ng-template>
