<div class="modal-header separator" ng-if="vm.resolve.title">
  <h3 id="modal-title" class="text-truncate" title="{{ vm.resolve.title | translate }}">
    {{ vm.resolve.title | translate }}
  </h3>
</div>
<div class="modal-inner-scroll">
  <div class="modal-body" id="modal-body">
    <form ng-if="vm.element" class="panel-body" name="vm.elementForm" novalidate>
      <fieldset>
        <div class="tight-grid">
          <div class="col-md-6">
            <div class="form-group" ng-class="{ 'has-error': vm.invalid('name') }">
              <label for="name" translate>Name</label>
              <input
                type="text"
                class="form-control"
                id="name"
                name="name"
                ng-model="vm.element.name"
                c8y-autocomplete="off"
                placeholder="{{ 'e.g. Door sensor' | translate }}"
                required
              />
            </div>
          </div>
          <div class="col-md-6">
            <div
              class="form-group category-form-group"
              ng-class="{ 'has-error': vm.invalid('category') }"
            >
              <label for="category" translate>Display category</label>
              <input
                type="text"
                class="form-control"
                id="category"
                name="category"
                ng-model="vm.element.category"
                c8y-autocomplete="off"
                uib-typeahead="category.name for category in vm.categories | filter:{name:$viewValue}"
                typeahead-template-url=":::PLUGIN_PATH:::/modals/category-typeahead.html"
              />
            </div>
          </div>
        </div>
      </fieldset>

      <fieldset>
        <div class="legend form-block">
          <span translate>Value selection</span>
          <button
            class="btn-help"
            type="button"
            aria-label="{{ 'Help' | translate }}"
            uib-tooltip="{{ 'Select from where this value should be taken.' | translate }}"
            tooltip-placement="top"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          ></button>
        </div>

        <div class="tight-grid">
          <div class="col-md-6">
            <div class="form-group" ng-class="{ 'has-error': vm.invalid('number') }">
              <label for="number" translate>Number</label>
              <input
                type="number"
                class="form-control"
                id="number"
                name="number"
                ng-model="vm.element.number"
                ng-min="1"
                ng-max="65536"
                step="1"
                placeholder="{{ 'e.g.' | translate }} 1234"
                required
              />
            </div>
          </div>
        </div>
      </fieldset>

      <fieldset>
        <div class="legend form-block">
          <span translate>Functionalities</span>
          <button
            class="btn-help"
            type="button"
            aria-label="{{ 'Help' | translate }}"
            uib-tooltip="{{ 'Select the actions to be performed with this value.' | translate }}"
            tooltip-placement="right"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          ></button>
        </div>

        <div ng-if="vm.features.functionalities.showStatus">
          <label class="c8y-checkbox input-sm">
            <input
              type="checkbox"
              ng-model="vm.element.meta.showStatus"
              ng-disabled="vm.element.meta.updateStatus"
            />
            <span></span>
            <span>{{ 'Show status (read-only access)' | translate }}</span>
            <button
              class="btn-help"
              uib-tooltip="{{
                'Enable showing current value in UI (for example, on the Fieldbus widget).'
                  | translate
              }}"
              tooltip-placement="right"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
            ></button>
          </label>
        </div>
        <div class="tight-grid">
          <div
            ng-if="vm.element.meta.showStatus"
            ng-repeat="enumValue in vm.element.meta.enumValues | limitTo:2"
            class="col-md-6"
          >
            <ng-form name="vm.nestedEnumValueValueForm">
              <div
                class="form-group"
                ng-if="enumValue.value === 0"
                ng-class="{
                  'has-error':
                    vm.nestedEnumValueValueForm.$dirty && vm.nestedEnumValueValueForm.$invalid
                }"
              >
                <label translate>Text to show if value is zero</label>
                <input
                  class="form-control"
                  ng-model="enumValue.label"
                  placeholder="{{ 'e.g. Off' | translate }}"
                  ng-required="vm.element.meta.showStatus"
                />
              </div>
              <div class="form-group" ng-if="enumValue.value === 1">
                <label translate>Text to show if value is one</label>
                <input
                  class="form-control"
                  ng-model="enumValue.label"
                  placeholder="{{ 'e.g. On' | translate }}"
                  ng-required="vm.element.meta.showStatus"
                />
              </div>
            </ng-form>
          </div>
        </div>

        <div class="form-group" ng-show="vm.features.functionalities.updateStatus">
          <label class="c8y-checkbox input-sm">
            <input
              type="checkbox"
              ng-model="vm.element.meta.updateStatus"
              ng-change="vm.onUpdateStatusCheckboxClicked()"
            />
            <span></span>
            <span>{{ 'Update status (read/write access)' | translate }}</span>
            <button
              class="btn-help"
              type="button"
              aria-label="{{ 'Help' | translate }}"
              uib-tooltip="{{
                'Enable changing current value from UI (for example, using the Fieldbus widget).'
                  | translate
              }}"
              tooltip-placement="right"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
            ></button>
          </label>
        </div>
        <div class="list-group row">
          <div class="list-group-item">
            <div class="d-flex">
              <div class="list-item-switch">
                <label class="c8y-switch c8y-switch--inline">
                  <input type="checkbox" ng-model="vm.element.meta.raiseAlarm" />
                  <span></span>
                  <span class="sr-only" translate>Raise alarm</span>
                </label>
              </div>
              <div class="list-item-icon">
                <i c8y-icon="bell"></i>
              </div>
              <div class="list-item-title">
                <span translate>Raise alarm</span>
                <button
                  class="btn-help"
                  type="button"
                  aria-label="{{ 'Create an alarm if the value is not equal to 0' | translate }}"
                  uib-tooltip="{{ 'Create an alarm if the value is not equal to 0' | translate }}"
                  tooltip-placement="right"
                  tooltip-popup-delay="500"
                  tooltip-append-to-body="true"
                ></button>
              </div>
            </div>
            <div class="collapse" uib-collapse="!vm.element.meta.raiseAlarm">
              <div class="tight-grid" ng-if="vm.element.meta.raiseAlarm">
                <div class="col-md-6">
                  <div class="form-group" ng-class="{ 'has-error': vm.invalid('alarmType') }">
                    <label for="alarmType" translate>Alarm type</label>
                    <input
                      class="form-control"
                      id="alarmType"
                      name="alarmType"
                      ng-model="vm.element.alarmMapping.type"
                      placeholder="{{ 'e.g.' | translate }} c8y_DoorStatus"
                      ng-required="vm.element.meta.raiseAlarm"
                    />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group" ng-class="{ 'has-error': vm.invalid('alarmText') }">
                    <label for="alarmText" translate>Alarm text</label>
                    <input
                      class="form-control"
                      name="alarmText"
                      id="alarmText"
                      ng-model="vm.element.alarmMapping.text"
                      placeholder="{{ 'e.g. Door opened' | translate }}"
                      ng-required="vm.element.meta.raiseAlarm"
                    />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group" ng-class="{ 'has-error': vm.invalid('alarmSeverity') }">
                    <label for="alarmSeverity" translate>Alarm severity</label>
                    <div class="c8y-select-wrapper">
                      <select
                        class="form-control"
                        id="alarmSeverity"
                        name="alarmSeverity"
                        ng-model="vm.element.alarmMapping.severity"
                        ng-options="(severity | translate) for severity in vm.alarmSeverities"
                        ng-required="vm.element.meta.raiseAlarm"
                      ></select>
                      <span></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="list-group-item">
            <div class="d-flex">
              <div class="list-item-switch">
                <label class="c8y-switch c8y-switch--inline">
                  <input type="checkbox" ng-model="vm.element.meta.sendEvent" />
                  <span></span>
                  <span class="sr-only">{{ 'Send event' | translate }}</span>
                </label>
              </div>
              <div class="list-item-icon">
                <i c8y-icon="online1"></i>
              </div>
              <div class="list-item-title">
                <span>{{ 'Send event' | translate }}</span>
                <button
                  class="btn-help"
                  type="button"
                  aria-label="{{ 'Help' | translate }}"
                  uib-tooltip="{{ 'Create an event whenever the value is changed' | translate }}"
                  tooltip-placement="right"
                  tooltip-popup-delay="500"
                  tooltip-append-to-body="true"
                ></button>
              </div>
            </div>
            <div class="collapse" uib-collapse="!vm.element.meta.sendEvent">
              <div class="tight-grid" ng-if="vm.element.meta.sendEvent">
                <div class="col-md-6">
                  <div class="form-group" ng-class="{ 'has-error': vm.invalid('eventType') }">
                    <label for="eventType" translate>Event type</label>
                    <input
                      class="form-control"
                      id="eventType"
                      name="eventType"
                      ng-model="vm.element.eventMapping.type"
                      placeholder="{{ 'e.g.' | translate }} c8y_DoorOpen"
                      ng-required="vm.element.meta.sendEvent"
                    />
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group" ng-class="{ 'has-error': vm.invalid('eventText') }">
                    <label for="eventText" translate>Event text</label>
                    <input
                      class="form-control"
                      id="eventText"
                      name="eventText"
                      ng-model="vm.element.eventMapping.text"
                      placeholder="{{ 'e.g. Door opened' | translate }}"
                      ng-required="vm.element.meta.sendEvent"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>
<div class="modal-footer">
  <button
    class="btn btn-default"
    type="button"
    title="{{ 'Cancel' | translate }}"
    ng-click="vm.dismiss()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    class="btn btn-primary"
    type="submit"
    title="{{ 'Save' | translate }}"
    ng-disabled="vm.elementForm.$invalid"
    ng-click="vm.save()"
  >
    {{ 'Save' | translate }}
  </button>
</div>
