@if (!hasAnyContent()) {
  @if (!overlay()?.present) {
    <p class="ann-panel__empty" data-testid="annotations-panel-empty-overlay">{{ texts.emptyOverlay }}</p>
  } @else {
    <p class="ann-panel__empty" data-testid="annotations-panel-empty-annotations">{{ texts.emptyAnnotations }}</p>
  }
} @else {
  @if (hasLifecycle()) {
    @let lc = lifecycle();
    <section class="ann-panel__section" data-testid="annotations-section-lifecycle">
      <h4 class="ann-panel__section-title">{{ texts.sections.lifecycle }}</h4>
      <dl class="ann-panel__kv">
        @if (lc.version !== null) {
          <dt>{{ texts.fields.version }}</dt>
          <dd data-testid="annotations-version"><code>{{ lc.version }}</code></dd>
        }
        @if (lc.stability !== null) {
          <dt>{{ texts.fields.stability }}</dt>
          <dd>
            <p-tag
              [value]="lc.stability"
              [severity]="stabilitySeverity(lc.stability)"
              [rounded]="true"
              data-testid="annotations-stability"
            />
          </dd>
        }
      </dl>
    </section>
  }

  @if (hasSupersession()) {
    @let sup = supersession();
    <section class="ann-panel__section" data-testid="annotations-section-supersession">
      <h4 class="ann-panel__section-title">{{ texts.sections.supersession }}</h4>
      @if (sup.supersededBy !== null) {
        <h5>{{ texts.fields.supersededBy }}</h5>
        <div class="ann-panel__chips">
          <p-chip
            [label]="sup.supersededBy"
            [styleClass]="isBroken(sup.supersededBy) ? 'chip--broken' : 'chip--link'"
            [pTooltip]="isBroken(sup.supersededBy) ? texts.brokenRefTooltip : ''"
            (click)="onOpenPath(sup.supersededBy)"
          />
        </div>
      }
      @if (sup.supersedes.length) {
        <h5>{{ texts.fields.supersedes }}</h5>
        <div class="ann-panel__chips">
          @for (p of sup.supersedes; track p) {
            <p-chip
              [label]="p"
              [styleClass]="isBroken(p) ? 'chip--broken' : 'chip--link'"
              [pTooltip]="isBroken(p) ? texts.brokenRefTooltip : ''"
              (click)="onOpenPath(p)"
            />
          }
        </div>
      }
    </section>
  }

  @if (hasProvenance()) {
    @let pr = provenance();
    <section class="ann-panel__section" data-testid="annotations-section-provenance">
      <h4 class="ann-panel__section-title">{{ texts.sections.provenance }}</h4>
      @if (pr.authors.length) {
        <h5>{{ texts.fields.authors }}</h5>
        <div class="ann-panel__chips">
          @for (a of pr.authors; track a) {
            <p-chip [label]="a" />
          }
        </div>
      }
      <dl class="ann-panel__kv">
        @if (pr.license !== null) {
          <dt>{{ texts.fields.license }}</dt>
          <dd>{{ pr.license }}</dd>
        }
        @if (pr.source !== null) {
          <dt>{{ texts.fields.source }}</dt>
          <dd><a [href]="pr.source" target="_blank" rel="noopener noreferrer">{{ pr.source }}</a></dd>
        }
        @if (pr.sourceVersion !== null) {
          <dt>{{ texts.fields.sourceVersion }}</dt>
          <dd><code>{{ pr.sourceVersion }}</code></dd>
        }
      </dl>
    </section>
  }

  @if (hasTaxonomy()) {
    @let tx = taxonomy();
    <section class="ann-panel__section" data-testid="annotations-section-taxonomy">
      <h4 class="ann-panel__section-title">{{ texts.sections.taxonomy }}</h4>
      <h5>{{ texts.fields.tags }}</h5>
      <div class="ann-panel__chips" data-testid="annotations-tags">
        @for (t of tx.authorTags; track 'a:' + t) {
          <p-chip
            [label]="t"
            [styleClass]="
              'ann-panel__chip ann-panel__chip--author' +
              (isActiveTag(t) ? ' ann-panel__chip--active' : '')
            "
            data-tag-source="author"
            role="button"
            tabindex="0"
            (click)="tagClick.emit(t)"
            (keydown.enter)="tagClick.emit(t)"
            (keydown.space)="tagClick.emit(t); $event.preventDefault()"
          />
        }
        @for (t of tx.userTags; track 'u:' + t) {
          <p-chip
            [label]="t"
            [styleClass]="
              'ann-panel__chip ann-panel__chip--user' +
              (isActiveTag(t) ? ' ann-panel__chip--active' : '')
            "
            data-tag-source="user"
            role="button"
            tabindex="0"
            (click)="tagClick.emit(t)"
            (keydown.enter)="tagClick.emit(t)"
            (keydown.space)="tagClick.emit(t); $event.preventDefault()"
          />
        }
      </div>
    </section>
  }

  @if (hasDocs()) {
    @let dc = docs();
    <section class="ann-panel__section" data-testid="annotations-section-docs">
      <h4 class="ann-panel__section-title">{{ texts.sections.docs }}</h4>
      <dl class="ann-panel__kv">
        @if (dc.docsUrl !== null) {
          <dt>{{ texts.fields.docsUrl }}</dt>
          <dd><a [href]="dc.docsUrl" target="_blank" rel="noopener noreferrer">{{ dc.docsUrl }}</a></dd>
        }
      </dl>
    </section>
  }
}