<button
  nbButton
  size="tiny"
  class="float-right ml-2"
  nbTooltip="Expand recursively"
  *ngIf="isRoot && !isPrimitive(data)"
  (click)="expandAll()"
>
  <nb-icon icon="arrows-expand"></nb-icon>
</button>

<div *ngIf="isRoot && isPrimitive(data)">
  {{ data }}
</div>

<div
  *ngIf="parentKey"
  (click)="switchDeployed()"
  class="parent-title"
  [ngClass]="{ isPrimitive: isPrimitive(data), ellipsis: !isPrimitive(data), pointer: !isPrimitive(data) }"
>
  <nb-icon
    icon="caret-right-fill"
    class="align-middle"
    *ngIf="!isDeployed && !isPrimitive(data)"
  ></nb-icon>
  <nb-icon
    icon="caret-down-fill"
    class="align-middle"
    *ngIf="isDeployed && !isPrimitive(data)"
  ></nb-icon>
  <strong> {{ parentKey }} : </strong>

  <pre
    class="pre-format text-primary pl-2"
    *ngIf="isPrimitive(data)"
  >
"{{ data }}"</pre
  >
  <span
    class="text-muted pl-2"
    *ngIf="!isPrimitive(data)"
    >{{ data | json }}</span
  >
</div>

<div
  *ngIf="!isPrimitive(data) && (isRoot || isDeployed)"
  class="entry-block"
  [class.isRoot]="isRoot"
>
  <ng-container *ngFor="let list of data | keyvalue">
    <tock-json-iterator
      [data]="list.value"
      [parentKey]="list.key"
      [isRoot]="false"
    ></tock-json-iterator>
  </ng-container>
</div>
