<!--
  ~ 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.
  -->

<div class="d-flex gap-1 align-items-center mb-1">
  <div
    class="tag"
    [style.background-color]="entity.entityColor"
    [style.color]="getContrastYIQ(entity.entityColor)"
  >
    {{ entity.qualifiedName(state.user) }}

    <button
      *ngIf="entityType"
      nbButton
      size="tiny"
      shape="round"
      status="danger"
      class="ml-1"
      nbTooltip="Remove sub entity type"
      (click)="remove()"
    >
      <nb-icon icon="trash"></nb-icon>
    </button>
  </div>

  <div
    *ngIf="entity.isDateType()"
    class="d-flex gap-1 align-items-center"
  >
    <nb-checkbox
      [checked]="$any(entity.atStartOfDay)"
      (checkedChange)="entity.atStartOfDay = !entity.atStartOfDay; update()"
      nbTooltip="Useful for non relative time"
      >Evaluate at start of day
    </nb-checkbox>
  </div>
</div>

<div
  class="d-flex text-disabled"
  *ngFor="let e of subEntities()"
>
  <nb-icon
    icon="arrow-return-right"
    class="mt-1 mx-2"
  ></nb-icon>

  <tock-entity-details
    [entity]="e"
    [entityType]="findEntityType()"
  ></tock-entity-details>
</div>
