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

    <clr-tabs clrLayout="vertical">
      <clr-tab *ngFor="let dsmeta of dsmetaGroupped; let index = index">
        <button clrTabLink id="link1">{{ dsmeta.group }}</button>
        <clr-tab-content
          id="content1"
          *clrIfActive="index === 0"
          class="d-flex clr-justify-content-center w-100"
        >
          <clr-datagrid>
            <clr-dg-column>Name</clr-dg-column>
            <clr-dg-column>Value</clr-dg-column>

            <clr-dg-row *ngFor="let info of dsmeta.dsmeta">
              <clr-dg-cell>{{ info.NAME }}</clr-dg-cell>
              <clr-dg-cell>{{ info.VALUE }}</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>
