<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">
    <p *ngIf="dsmetaTabs.length < 1" class="text-center">
      No dataset meta to show.
    </p>

    <clr-tabs clrLayout="vertical">
      <clr-tab *ngFor="let tab of tabs; let index = index">
        <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>
            <ng-container *ngFor="let col of tab.colsToDisplay">
              <clr-dg-column>{{ col.colName || col.colKey }}</clr-dg-column>
            </ng-container>

            <clr-dg-row
              (click)="tab.onRowClick ? tab.onRowClick(info) : ''"
              class="clickable-row"
              *ngFor="let info of tab.meta"
            >
              <ng-container *ngFor="let col of tab.colsToDisplay">
                <clr-dg-cell>{{ info[col.colKey] }}</clr-dg-cell>
              </ng-container>
            </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>
