<div
  class="card m-b-4 split-row-2 animated fast pointer-all"
  [ngClass]="{ fadeInRightBig: showDetails, fadeOutRightBig: !showDetails }"
>
  <div class="card-header separator">
    <h4>{{ 'Attributes' | translate }}</h4>
    <button
      class="close m-l-auto visible-sm visible-xs"
      title="{{ 'Close' | translate }}"
      (click)="toggleDetail(nodeDataAttr)"
    >
      &times;
    </button>
  </div>
  <div
    class="card-inner-scroll"
    tabindex="0"
  >
    <div
      class="card-block"
      tabindex="-1"
    >
      <table class="table table-striped table-condensed">
        <colgroup>
          <col width="50%" />
          <col width="50%" />
        </colgroup>
        <thead>
          <tr>
            <th>{{ 'Attribute' | translate }}</th>
            <th>{{ 'Value' | translate }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of nodeDataAttr | keyvalue">
            <td>{{ item.key }}</td>
            <td
              class="text-break-word"
              *ngIf="item.key === 'absolutePaths'"
            >
              {{ item.value | json }}
            </td>
            <td
              class="text-break-word"
              *ngIf="item.key === 'ancestorNodeIds'"
            >
              <a
                *ngFor="let value of item.value"
                (click)="navigateTo(value)"
              >
                {{ value | json }}
              </a>
            </td>
            <td *ngIf="item.key !== 'absolutePaths' && item.key !== 'ancestorNodeIds'">
              {{ item.value }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div
  class="card split-row-2 animated fast pointer-all"
  style="height: calc(50% - 4px)"
  [ngClass]="{ fadeInRightBig: showDetails, fadeOutRightBig: !showDetails }"
>
  <div class="card-header separator">
    <h4>{{ 'References' | translate }}</h4>
  </div>
  <div
    class="card-inner-scroll"
    tabindex="0"
  >
    <div
      class="card-block"
      tabindex="-1"
    >
      <table class="table table-striped table-condensed">
        <colgroup>
          <col width="50%" />
          <col width="50%" />
        </colgroup>
        <thead>
          <tr>
            <th>{{ 'Attribute' | translate }}</th>
            <th>{{ 'Value' | translate }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of nodeDataRef">
            <td>{{ item.referenceLabel }}</td>
            <td class="text-break-word">{{ item.targetLabel }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>