<c8y-title *ngIf="!isLoading">
  {{ formGroup.value?.label }}
  <small *ngIf="formGroup.value?.fragment && formGroup.value?.series"
    >{{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}</small
  >
</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'c8y-data-points'"
    [label]="'Data point library' | translate"
    [path]="path"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<form
  (ngSubmit)="formGroup.valid && save(formGroup.value)"
  (change)="formChange()"
  [formGroup]="formGroup"
  class="card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto"
  novalidate
>
  <div class="card-header large-padding separator grid__col--fullspan">
    <h4 class="card-title">
      {{ formGroup.value?.label }}
    </h4>
  </div>
  <div *ngIf="!isLoading" class="d-contents">
    <div class="inner-scroll bg-white flex-grow">
      <div class="card-block large-padding">
        <div class="d-flex">
          <c8y-form-group>
            <label translate>Color</label>
            <div class="data-point-color form-control">
              <div class="c8y-colorpicker">
                <input type="color" name="color" formControlName="color" />
                <span [style.background-color]="formGroup.value?.color"></span>
              </div>
            </div>
          </c8y-form-group>
          <c8y-form-group class="flex-grow p-l-8">
            <label translate>Label</label>
            <input
              class="form-control"
              formControlName="label"
              name="label"
              [placeholder]="'e.g. Temperature' | translate"
              type="text"
            />
            <c8y-messages [show]="formGroup.controls?.label?.touched && formGroup.controls?.label?.errors">
            </c8y-messages>
          </c8y-form-group>
        </div>
        <!-- TODO: add description to data point library templates -->
        <c8y-form-group>
          <label translate>Description</label>
          <textarea
            class="form-control"
            formControlName="description"
            name="description"
            [placeholder]="'e.g. Ambient Temperature in Celsius' | translate"
            rows="3"
          ></textarea>
        </c8y-form-group>

        <div class="row">
          <div class="col-sm-6">
            <c8y-form-group>
              <label translate>Fragment</label>
              <input
                class="form-control"
                name="fragment"
                formControlName="fragment"
                [placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }"
                type="text"
              />
              <c8y-messages [show]="formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors">
              </c8y-messages>
            </c8y-form-group>
          </div>

          <div class="col-sm-6">
            <c8y-form-group>
              <label translate>Series</label>
              <input
                class="form-control"
                formControlName="series"
                name="series"
                [placeholder]="'e.g. {{ example }}' | translate: { example: 'T' }"
                type="text"
              />
              <c8y-messages [show]="formGroup.controls?.series?.touched && formGroup.controls?.series?.errors">
              </c8y-messages>
            </c8y-form-group>
          </div>
        </div>
      </div>
    </div>
    <div class="inner-scroll bg-gray-white">
      <div class="card-block large-padding">
        <fieldset class="c8y-fieldset">
          <legend translate>Preview</legend>
          <c8y-range-display [config]="rangeConfig" class="m-b-16 d-block"></c8y-range-display>
        </fieldset>
        <fieldset class="c8y-fieldset">
          <legend translate>Range</legend>
          <div class="row" formGroupName="range">
            <div class="col-md-6">
              <c8y-form-group
                [ngClass]="{ 'has-error': range?.touched && range?.controls?.min?.errors }"
              >
                <label translate>Min</label>
                <input
                  type="number"
                  class="form-control"
                  name="min"
                  formControlName="min"
                  [placeholder]="'e.g. {{ example }}' | translate: { example: 0 }"
                />
                <c8y-messages [show]="range?.touched && range.controls?.min?.errors">
                </c8y-messages>
              </c8y-form-group>
            </div>
            <div class="col-md-6">
              <c8y-form-group
                [ngClass]="{ 'has-error': range?.touched && range?.controls?.max?.errors }"
              >
                <label translate>Max</label>
                <input
                  type="number"
                  class="form-control"
                  name="max"
                  formControlName="max"
                  [placeholder]="'e.g. {{ example }}' | translate: { example: 100 }"
                />
                <c8y-messages [show]="range?.touched && range.controls?.max?.errors">
                </c8y-messages>
              </c8y-form-group>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <c8y-form-group>
                <label translate>Unit</label>
                <input
                  class="form-control"
                  name="unit"
                  formControlName="unit"
                  [placeholder]="'e.g. {{ example }}' | translate: { example: 'ºC' }"
                />
                <c8y-messages [show]="formGroup.controls?.unit?.touched && formGroup.controls?.unit?.errors">
                </c8y-messages>
              </c8y-form-group>
            </div>

            <div class="col-md-6">
              <c8y-form-group
                [ngClass]="{
                  'has-error':
                    (range?.touched || formGroup.controls?.target?.touched) &&
                    formGroup.controls?.target?.errors
                }"
              >
                <label translate>Target</label>
                <input
                  type="number"
                  class="form-control"
                  name="target"
                  formControlName="target"
                  [placeholder]="'e.g. {{ example }}' | translate: { example: 25 }"
                />
                <c8y-messages [show]="(range?.touched || formGroup.controls?.target?.touched) && formGroup.controls?.target?.errors">
                </c8y-messages>
              </c8y-form-group>
            </div>
          </div>
        </fieldset>

        <fieldset class="c8y-fieldset" formGroupName="yellowRange">
          <legend translate>Yellow range</legend>
          <div class="row">
            <div class="col-md-6">
              <c8y-form-group
                [ngClass]="{
                  'has-error':
                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors
                }"
              >
                <label translate>Min</label>
                <input
                  type="number"
                  class="form-control"
                  name="min"
                  formControlName="min"
                  [placeholder]="'e.g. {{ example }}' | translate: { example: 50 }"
                />
                <c8y-messages [show]="(range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors">
                </c8y-messages>
              </c8y-form-group>
            </div>

            <div class="col-md-6">
              <c8y-form-group
                [ngClass]="{
                  'has-error':
                    (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors
                }"
              >
                <label translate>Max</label>
                <input
                  type="number"
                  class="form-control"
                  name="max"
                  formControlName="max"
                  [placeholder]="'e.g. {{ example }}' | translate: { example: 75 }"
                />
                <c8y-messages [show]="(range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors">
                </c8y-messages>
              </c8y-form-group>
            </div>
          </div>
        </fieldset>

        <fieldset class="c8y-fieldset" formGroupName="redRange">
          <legend translate>Red range</legend>
          <div class="row">
            <div class="col-md-6">
              <c8y-form-group
                [ngClass]="{
                  'has-error':
                    (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors
                }"
              >
                <label translate>Min</label>
                <input
                  type="number"
                  class="form-control"
                  name="min"
                  formControlName="min"
                  [placeholder]="'e.g. {{ example }}' | translate: { example: 75 }"
                />
                <c8y-messages [show]="(range?.touched || redRange?.touched) && redRange.controls?.min?.errors">
                </c8y-messages>
              </c8y-form-group>
            </div>

            <div class="col-md-6">
              <c8y-form-group
                [ngClass]="{
                  'has-error':
                    (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors
                }"
              >
                <label translate>Max</label>
                <input
                  type="number"
                  class="form-control"
                  name="max"
                  formControlName="max"
                  [placeholder]="'e.g. {{ example }}' | translate: { example: 100 }"
                />
                <c8y-messages [show]="(range?.touched || redRange?.touched) && redRange.controls?.max?.errors">
                </c8y-messages>
              </c8y-form-group>
            </div>
          </div>
        </fieldset>
      </div>
    </div>
  </div>
  <div class="card-footer separator grid__col--fullspan">
    <button (click)="cancel()" class="btn btn-default" [title]="'Cancel' | translate" type="button">
      {{ 'Cancel' | translate }}
    </button>
    <button
      *c8yIfAllowed="['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true"
      [disabled]="formGroup.invalid || formGroup.pristine"
      class="btn btn-primary btn-form"
      [title]="'Save' | translate"
      type="submit"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>