<clr-modal
  [clrModalOpen]="open"
  (clrModalOpenChange)="onOpenChange($event)"
  [clrModalSize]="'xl'"
  [clrModalClosable]="true"
>
  <h3 class="modal-title center text-center color-darker-gray">Dataset Meta</h3>
  <div class="modal-body">
    @if (dsmetaTabs.length < 1) {
      <p class="text-center">No dataset meta to show.</p>
    }

    <clr-tabs clrLayout="vertical">
      @for (tab of tabs; track tab; let index = $index) {
        <clr-tab>
          <button clrTabLink id="link1">{{ tab.name }}</button>
          <clr-tab-content
            id="content1"
            *clrIfActive="index === 0"
            class="d-flex clr-justify-content-center w-100"
          >
            <clr-datagrid>
              @for (col of tab.colsToDisplay; track col) {
                <clr-dg-column>{{ col.colName || col.colKey }}</clr-dg-column>
              }
              @for (info of tab.meta; track info) {
                <clr-dg-row
                  (click)="tab.onRowClick ? tab.onRowClick(info) : ''"
                  class="clickable-row"
                >
                  @for (col of tab.colsToDisplay; track col) {
                    <clr-dg-cell>{{ info[col.colKey] }}</clr-dg-cell>
                  }
                </clr-dg-row>
              }
            </clr-datagrid>
          </clr-tab-content>
        </clr-tab>
      }
    </clr-tabs>
  </div>
  <div class="modal-footer">
    <button
      type="button"
      class="btn btn-sm btn-info-outline"
      (click)="onCloseClick()"
    >
      Close
    </button>
  </div>
</clr-modal>
