<!--
  ~ 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
  status="info"
  class="container"
>
  <nb-card-header>
    <span *ngIf="create">Create New {{ dialogType }}</span>
    <span *ngIf="!create">Update {{ dialogType }} {{ name ? name : label }}</span>
  </nb-card-header>
  <nb-card-body>
    <form
      #intentForm="ngForm"
      id="intentForm"
    >
      <div class="form-group">
        <input
          nbInput
          fullWidth
          name="label"
          placeholder="Label"
          [(ngModel)]="label"
          (keyup)="copyToName()"
          (keyup.enter)="save()"
          nbTooltip="Displayed label"
          #labelElement
          autocomplete="off"
        />
      </div>
      <div class="form-group">
        <input
          nbInput
          fullWidth
          [disabled]="!create"
          name="name"
          placeholder="Name*"
          [(ngModel)]="name"
          (keyup)="format()"
          (keyup.enter)="save()"
          nbTooltip="Technical id"
          required
        />
      </div>

      <div class="form-group">
        <input
          nbInput
          fullWidth
          name="category"
          placeholder="Category"
          [(ngModel)]="category"
          nbTooltip="Category"
          (keyup)="categoryChange()"
          (focus)="categoryChange()"
          [nbAutocomplete]="auto"
          autocomplete="off"
        />
        <nb-autocomplete #auto>
          <nb-option
            *ngFor="let c of categories"
            [value]="c"
          >
            {{ c }}
          </nb-option>
        </nb-autocomplete>
      </div>

      <div class="form-group">
        <textarea
          nbInput
          fullWidth
          rows="5"
          name="description"
          placeholder="Description"
          [(ngModel)]="description"
        ></textarea>
      </div>
    </form>
  </nb-card-body>
  <nb-card-footer class="footer">
    <button
      nbButton
      (click)="cancel()"
    >
      Cancel
    </button>
    <button
      type="submit"
      nbButton
      status="success"
      (click)="save()"
      [disabled]="!intentForm.form.valid"
      class="submit-button"
    >
      {{ create ? 'Create' : 'Update' }}
    </button>
  </nb-card-footer>
</nb-card>
