<!--
  ~ 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.
  -->
<nb-card>
  <nb-card-header>Add Entity</nb-card-header>
  <nb-card-body>
    <label>Select an existing Entity:</label><br />

    <div
      *ngIf="entityTypes"
      class="mb-3"
    >
      <span
        *ngFor="let e of entityTypes"
        class="entity pointer"
        nbTooltip="Select &quot;{{ e.qualifiedName(state.user) }}&quot;"
        [style.background-color]="e === entityType ? '' : e.qualifiedEntityColor(state.user)"
        [style.color]="e === entityType ? '' : getContrastYIQ(e.qualifiedEntityColor(state.user))"
        (click)="onSelect(e)"
      >
        {{ e.qualifiedName(state.user) }}
      </span>
    </div>

    <div class="d-flex align-items-center mb-1">
      <span
        class="text-nowrap mr-3"
        style="width: 5em"
        >Or create:</span
      >
      <input
        nbInput
        placeholder="Entity Type"
        [(ngModel)]="type"
        (keyup)="onTypeKeyUp()"
      />
    </div>

    <div class="d-flex align-items-center">
      <span
        class="text-nowrap mr-3"
        style="width: 5em"
        >With role:</span
      >
      <input
        nbInput
        placeholder="Role"
        [(ngModel)]="role"
        (keyup)="onRoleKeyUp()"
      />
    </div>

    <div
      *ngIf="error"
      class="text-danger my-3"
    >
      {{ error }}
    </div>
  </nb-card-body>

  <nb-card-footer class="card-footer-actions">
    <button
      nbButton
      (click)="close()"
    >
      Cancel
    </button>
    <button
      nbButton
      class="submit-button"
      status="primary"
      (click)="save()"
    >
      Add
    </button>
  </nb-card-footer>
</nb-card>
