@if (path()) {
  <div class="linked-nodes-panel" data-testid="linked-nodes-panel">
    @switch (state()) {
      @case ('loading') {
        <p class="linked-nodes-panel__status" data-testid="linked-nodes-loading">{{ texts.loading }}</p>
      }
      @case ('error') {
        <p class="linked-nodes-panel__status linked-nodes-panel__status--warn" data-testid="linked-nodes-error">{{ texts.error }}</p>
      }
      @case ('ready') {
        @if (incoming().length > 0) {
          <section class="linked-nodes-panel__section" data-testid="linked-nodes-incoming">
            <h4 class="linked-nodes-panel__section-title">
              <sm-icon class="linked-nodes-panel__section-icon" icon="pi-download" />
              <span class="linked-nodes-panel__section-count" data-testid="linked-nodes-incoming-count">{{ incoming().length }}</span>
              <span class="linked-nodes-panel__section-label">{{ texts.incomingHeader }}</span>
            </h4>
            <ul class="linked-nodes-panel__table">
              @for (link of incoming(); track link.source + '|' + link.target + '|' + link.kind + '|' + (link.trigger?.normalizedTrigger ?? '')) {
                <li class="linked-nodes-panel__row" [attr.data-testid]="'linked-nodes-incoming-row-' + link.source">
                  <button
                    type="button"
                    class="linked-nodes-panel__path"
                    (click)="onOpen(link.source)"
                    [attr.data-testid]="'linked-nodes-incoming-link-' + link.source"
                  >{{ link.source }}</button>
                  <span
                    class="linked-nodes-panel__chip"
                    [style.color]="confidenceColor(link.confidence)"
                    [style.borderColor]="confidenceColor(link.confidence)"
                    [pTooltip]="confidenceTooltip(link.confidence)"
                  >{{ confidenceValue(link.confidence) }}</span>
                  <span class="linked-nodes-panel__chip linked-nodes-panel__chip--kind" [attr.data-kind]="link.kind">{{ link.kind }}</span>
                </li>
              }
            </ul>
          </section>
        }
        @if (outgoing().length > 0) {
          <section class="linked-nodes-panel__section" data-testid="linked-nodes-outgoing">
            <h4 class="linked-nodes-panel__section-title">
              <sm-icon class="linked-nodes-panel__section-icon" icon="pi-upload" />
              <span class="linked-nodes-panel__section-count" data-testid="linked-nodes-outgoing-count">{{ outgoing().length }}</span>
              <span class="linked-nodes-panel__section-label">{{ texts.outgoingHeader }}</span>
            </h4>
            <ul class="linked-nodes-panel__table">
              @for (link of outgoing(); track link.source + '|' + link.target + '|' + link.kind + '|' + (link.trigger?.normalizedTrigger ?? '')) {
                <li class="linked-nodes-panel__row" [attr.data-testid]="'linked-nodes-outgoing-row-' + link.target">
                  @if (outgoingBroken(link)) {
                    <span
                      class="linked-nodes-panel__path linked-nodes-panel__path--broken"
                      [attr.data-testid]="'linked-nodes-outgoing-link-' + link.target"
                    >{{ link.target }}</span>
                  } @else {
                    <button
                      type="button"
                      class="linked-nodes-panel__path"
                      (click)="onOpen(link.resolvedTarget ?? link.target)"
                      [attr.data-testid]="'linked-nodes-outgoing-link-' + link.target"
                    >{{ link.target }}</button>
                  }
                  <span
                    class="linked-nodes-panel__chip"
                    [style.color]="confidenceColor(link.confidence)"
                    [style.borderColor]="confidenceColor(link.confidence)"
                    [pTooltip]="confidenceTooltip(link.confidence)"
                  >{{ confidenceValue(link.confidence) }}</span>
                  <span class="linked-nodes-panel__chip linked-nodes-panel__chip--kind" [attr.data-kind]="link.kind">{{ link.kind }}</span>
                  @if (issueForOutgoing(link); as issue) {
                    <span
                      class="linked-nodes-panel__chip linked-nodes-panel__chip--issue"
                      [attr.data-severity]="issue.severity"
                      [pTooltip]="issue.message"
                      [attr.data-testid]="'linked-nodes-outgoing-issue-' + link.target"
                    >{{ issue.analyzerId }}</span>
                  }
                </li>
              }
            </ul>
          </section>
        }
        @if (externalRefs().length > 0) {
          <section class="linked-nodes-panel__section" data-testid="linked-nodes-external-refs">
            <h4 class="linked-nodes-panel__section-title">
              <sm-icon class="linked-nodes-panel__section-icon" icon="pi-link" />
              <span class="linked-nodes-panel__section-count" data-testid="linked-nodes-external-count">{{ externalRefs().length }}</span>
              <span class="linked-nodes-panel__section-label">{{ texts.externalRefsHeader }}</span>
            </h4>
            <ul class="linked-nodes-panel__table linked-nodes-panel__table--external">
              @for (ref of externalRefs(); track ref.url + '|' + (ref.line ?? -1)) {
                <li class="linked-nodes-panel__row linked-nodes-panel__row--external-ref"
                    [attr.data-testid]="'linked-nodes-external-ref-' + ref.url">
                  <a class="linked-nodes-panel__external-ref-url"
                     [href]="ref.url"
                     [pTooltip]="ref.url"
                     tooltipPosition="top"
                     target="_blank"
                     rel="noopener noreferrer">{{ ref.url }}</a>
                </li>
              }
            </ul>
          </section>
        }
      }
    }
  </div>
}