<!--
  <section role="dialog"> rather than <aside role="dialog"> — ARIA
  disallows overriding <aside>'s implicit `complementary` role with
  `dialog`. <section> has a permissive ARIA mapping.
-->
<section
  class="chatbot-citation-panel"
  role="dialog"
  aria-modal="false"
  aria-labelledby="chatbot-citation-panel-title"
  (keydown.escape)="onClose()"
>
  <header class="chatbot-citation-panel__header">
    <h3 id="chatbot-citation-panel-title" class="chatbot-citation-panel__title">
      {{ titleLabel }}
    </h3>
    <button
      type="button"
      class="chatbot-citation-panel__close"
      [attr.aria-label]="closeLabel"
      (click)="onClose()"
    >
      <lib-icon name="x" [size]="18" />
    </button>
  </header>

  <dl class="chatbot-citation-panel__meta">
    <dt>{{ sourceLabel }}</dt>
    <dd>{{ citation().source }}</dd>
    <dt>{{ scoreLabel }}</dt>
    <dd>{{ citation().score.toFixed(2) }}</dd>
  </dl>

  <blockquote class="chatbot-citation-panel__snippet">{{ citation().snippet }}</blockquote>
</section>
