<h6>
  <button type="button" class="btn btn-outline-secondary btn-sm me-2"
    (click)="expand = !expand">
    @if (!expand) {
      <i-bs width="1.2em" height="1.2em" name="caret-down"></i-bs>
    }
    @if (expand) {
      <i-bs width="1.2em" height="1.2em" name="caret-up"></i-bs>
    }
  </button>
  {{title}}
</h6>

<div #collapse="ngbCollapse" [ngbCollapse]="!expand" (ngbCollapseChange)="expand = $event">
  <table class="table table-borderless">
    <tbody>
      @for (m of metadata; track m) {
        <tr>
          <td>{{m.prefix}}:{{m.key}}</td>
          <td class="metadata-column">{{m.value}}</td>
        </tr>
      }
    </tbody>
  </table>
</div>
