<!--
  ~ Copyright (C) 2017/2021 e-voyageurs technologies
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<ng-container *ngFor="let list of getSampleData() | keyvalue; let i = index">
  <ul
    [class.container]="!isPrimitive(list.value)"
    [class.primitive]="isPrimitive(list.value)"
  >
    <li>
      <div class="d-flex align-items-center justify-content-between">
        <span>
          <div
            class="array font-weight-bold"
            *ngIf="isArray(list.value)"
          >
            {{ list.key }}
          </div>
          <div
            class="array"
            *ngIf="!isArray(list.value) && !isPrimitive(list.value)"
          >
            {{ parentKey }} <span class="font-weight-bold">[{{ list.key }}]</span>
          </div>
          <span
            class="font-weight-bold"
            *ngIf="isPrimitive(list.value)"
          >
            {{ list.key }}
          </span>
        </span>

        <nb-select
          placeholder="Select a data type"
          size="small"
          *ngIf="isPrimitive(list.value)"
          (selectedChange)="selectDataType($event, $any(list).key)"
          [selected]="isSelected($any(list).key)"
          class="my-2"
        >
          <nb-option
            value="null"
            class="text-muted font-italic"
            >None</nb-option
          >
          <nb-option
            *ngFor="let dataType of dataTypesDefinition"
            [value]="dataType.type"
            >{{ dataType.label }}</nb-option
          >
        </nb-select>
      </div>

      <div
        *ngIf="isPrimitive(list.value)"
        class="pb-2"
      >
        {{ list.value }}
      </div>

      <tock-json-iterator
        *ngIf="isRoot || i <= 5"
        [associations]="associations"
        [recursiveList]="list.value"
        [parentKey]="$any(list).key"
        [parentType]="getType(recursiveList)"
        [upstreamPath]="path"
        (riseSelection)="upriseSelection($event)"
        [isRoot]="false"
      ></tock-json-iterator>
    </li>
  </ul>
</ng-container>

<div
  *ngIf="truncatedDataLengthAlert"
  class="text-muted font-italic"
>
  Plus {{ truncatedDataLengthAlert - 5 }} more entries...
</div>
