<div class="form m-b-16" ng-form="mappingForm">
  <div class="legend form-block" translate>Functionalities</div>

  <div class="list-group">
    <div class="list-group-item">
      <div class="d-flex a-i-center">
        <div class="list-item-switch">
          <label class="c8y-switch c8y-switch--inline">
            <input
              id="measurement"
              type="checkbox"
              ng-model="vm.hasMeasurement"
              ng-change="vm.updateMeasurementKey(vm.hasMeasurement)"
            />
            <span></span>
            <span for="measurement" class="sr-only" translate>Send measurement</span>
          </label>
        </div>
        <div class="list-item-icon">
          <i c8y-icon="line-chart"></i>
        </div>
        <div class="list-item-title" translate>Send measurement</div>
      </div>
      <div uib-collapse="!vm.hasMeasurement">
        <div class="tight-grid p-t-16" ng-if="vm.hasMeasurement">
          <div class="col-md-3 col-sm-6">
            <div class="form-group form-group-sm">
              <label translate>Type</label>
              <input
                name="measurementType"
                class="form-control"
                ng-model="vm.mapping.measurementCreation.type"
                placeholder="{{ 'e.g.' | translate }} c8y_Temperature"
                required
                ng-maxlength="100"
              />
              <c8y-error-feedback field="mappingForm.measurementType"></c8y-error-feedback>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="form-group form-group-sm">
              <label translate>Series</label>
              <input
                name="measurementSeries"
                class="form-control"
                ng-model="vm.mapping.measurementCreation.series"
                placeholder="{{ 'e.g.' | translate }} T"
                required
                ng-maxlength="100"
              />
              <c8y-error-feedback field="mappingForm.measurementSeries"></c8y-error-feedback>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="form-group form-group-sm">
              <label translate>Unit</label>
              <input
                name="measurementUnit"
                class="form-control"
                ng-model="vm.mapping.measurementCreation.unit"
                placeholder="{{ 'e.g.' | translate }} °C"
                ng-maxlength="100"
              />
              <c8y-error-feedback field="mappingForm.measurementUnit"></c8y-error-feedback>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item">
      <div class="d-flex a-i-center">
        <div class="list-item-switch">
          <label class="c8y-switch c8y-switch--inline">
            <input
              type="checkbox"
              ng-model="vm.hasAlarm"
              ng-change="vm.updateAlarmKey(vm.hasAlarm)"
            />
            <span></span>
            <span class="sr-only" translate>Create alarm</span>
          </label>
        </div>
        <div class="list-item-icon">
          <i c8y-icon="bell"></i>
        </div>
        <div class="list-item-title" translate>Create alarm</div>
      </div>
      <div uib-collapse="!vm.hasAlarm">
        <div class="tight-grid p-t-16" ng-if="vm.hasAlarm">
          <div class="col-md-3 col-sm-6">
            <div class="form-group form-group-sm">
              <label translate>Severity</label>
              <div class="c8y-select-wrapper">
                <select
                  required
                  name="alarmSeverity"
                  class="form-control"
                  ng-model="vm.mapping.alarmCreation.severity"
                  ng-options="alarmSeverity as (alarmSeverity | translate) for alarmSeverity in vm.alarmSeverities"
                ></select>
                <span></span>
              </div>
              <c8y-error-feedback field="mappingForm.alarmSeverity"></c8y-error-feedback>
            </div>
          </div>

          <div class="col-md-3 col-sm-6">
            <div class="form-group form-group-sm">
              <label for="alarmType" translate>Type</label>
              <input
                name="alarmType"
                id="alarmType"
                class="form-control"
                ng-model="vm.mapping.alarmCreation.type"
                placeholder="{{ 'e.g.' | translate }} c8y_HighTemperature"
                required
                ng-maxlength="100"
              />
              <c8y-error-feedback field="mappingForm.alarmType"></c8y-error-feedback>
            </div>
          </div>
          <div class="col-md-3 col-sm-6" ng-show="!vm.hideAlarmStatus">
            <div class="form-group form-group-sm">
              <label for="alarmStatus" translate>Status</label>
              <div class="c8y-select-wrapper">
                <select
                  required
                  name="alarmStatus"
                  id="alarmStatus"
                  class="form-control"
                  ng-model="vm.mapping.alarmCreation.status"
                  ng-options="alarmStatus as (alarmStatus | translate) for alarmStatus in vm.alarmStatus"
                ></select>
                <span></span>
              </div>
              <c8y-error-feedback field="mappingForm.alarmStatus"></c8y-error-feedback>
            </div>
          </div>

          <div class="col-md-3 col-sm-6">
            <div class="form-group form-group-sm">
              <label for="alarmText" translate>Text</label>
              <input
                id="alarmText"
                name="alarmText"
                class="form-control"
                ng-model="vm.mapping.alarmCreation.text"
                placeholder="{{ 'e.g. Temperature is high' | translate }}"
                required
                ng-maxlength="100"
              />
              <c8y-error-feedback field="mappingForm.alarmText"></c8y-error-feedback>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item">
      <div class="d-flex a-i-center">
        <div class="list-item-switch">
          <label class="c8y-switch c8y-switch--inline">
            <input
              type="checkbox"
              ng-model="vm.hasEvent"
              ng-change="vm.updateEventKey(vm.hasEvent)"
            />
            <span></span>
            <span class="sr-only" translate>Send event</span>
          </label>
        </div>
        <div class="list-item-icon">
          <i c8y-icon="online1"></i>
        </div>
        <div class="list-item-title" translate>Send event</div>
      </div>
      <div uib-collapse="!vm.hasEvent">
        <div class="tight-grid p-t-16" ng-if="vm.hasEvent">
          <div class="col-md-3 col-sm-6">
            <div class="form-group form-group-sm">
              <label translate>Type</label>
              <input
                name="eventType"
                class="form-control"
                ng-model="vm.mapping.eventCreation.type"
                placeholder="{{ 'e.g.' | translate }} c8y_DoorStatus"
                required
                ng-maxlength="100"
              />
              <c8y-error-feedback field="mappingForm.eventType"></c8y-error-feedback>
            </div>
          </div>

          <div class="col-md-3 col-sm-6">
            <div class="form-group form-group-sm">
              <label translate>Text</label>
              <input
                name="eventText"
                class="form-control"
                ng-model="vm.mapping.eventCreation.text"
                placeholder="{{ 'e.g. Door status changed' | translate }}"
                required
                ng-maxlength="100"
              />
              <c8y-error-feedback field="mappingForm.eventText"></c8y-error-feedback>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item" ng-show="vm.customActions">
      <div class="d-flex a-i-center">
        <div class="list-item-switch">
          <label class="c8y-switch c8y-switch--inline">
            <input
              type="checkbox"
              ng-model="vm.hasCustomAction"
              ng-change="vm.updateCustomActionKey(vm.hasCustomAction)"
            />
            <span></span>
            <span class="sr-only" translate>Custom action</span>
          </label>
        </div>
        <div class="list-item-icon">
          <i c8y-icon="wrench"></i>
        </div>
        <div class="list-item-title" translate>Custom action</div>
      </div>
      <div uib-collapse="!vm.hasCustomAction">
        <div class="tight-grid p-t-16" ng-if="vm.hasCustomAction">
          <div class="col-md-3 col-sm-6">
            <div class="form-group form-group-sm">
              <label translate>Action name</label>
              <div class="c8y-select-wrapper">
                <select
                  required
                  name="actionName"
                  class="form-control"
                  ng-model="vm.mapping.customAction.actionName"
                  ng-options="action as action for action in vm.customActions"
                ></select>
                <span></span>
              </div>
              <c8y-error-feedback field="mappingForm.actionName"></c8y-error-feedback>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="list-group-item" ng-show="!vm.hideAutoObserve">
      <div class="d-flex a-i-center">
        <div class="list-item-switch">
          <label class="c8y-switch c8y-switch--inline">
            <input
              type="checkbox"
              ng-model="vm.mapping.observeParameters.autoObserve"
              ng-disabled="vm.autoObserveLocked"
            />
            <span></span>
            <span class="sr-only">{{ 'Auto observe' | translate }}</span>
          </label>
        </div>
        <div class="list-item-icon">
          <i c8y-icon="eye"></i>
        </div>
        <div class="list-item-title">
          {{ 'Auto observe' | translate }}
        </div>
      </div>
      <p ng-show="vm.autoObserveLocked" class="m-t-16">
        <i c8y-icon="info-circle" class="text-info"></i>
        <em>
          <small class="text-muted" translate>
            At least one functionality must be set to enable auto observe.
          </small>
        </em>
      </p>
      <div uib-collapse="!vm.autoObserveParams">
        <div class="tight-grid p-t-16" ng-show="vm.mapping.observeParameters.autoObserve">
          <div class="col-md-2 col-sm-4">
            <div
              class="form-group form-group-sm"
              uib-tooltip="{{ vm.helpTexts.minPeriod | translate }}"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
            >
              <label translate>Minimum period</label>
              <input
                placeholder="{{ 'seconds' | translate }}"
                name="observeMinPeriod"
                type="number"
                class="form-control"
                ng-model="vm.mapping.observeParameters.minPeriod"
              />
              <c8y-error-feedback field="mappingForm.observeMinPeriod"></c8y-error-feedback>
            </div>
          </div>
          <div class="col-md-2 col-sm-4">
            <div
              class="form-group form-group-sm"
              uib-tooltip="{{ vm.helpTexts.maxPeriod | translate }}"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
            >
              <label translate>Maximum period</label>
              <input
                placeholder="{{ 'seconds' | translate }}"
                name="observeMaxPeriod"
                type="number"
                class="form-control"
                ng-model="vm.mapping.observeParameters.maxPeriod"
              />
              <c8y-error-feedback field="mappingForm.observeMaxPeriod"></c8y-error-feedback>
            </div>
          </div>

          <div class="col-md-2 col-sm-4">
            <div
              class="form-group form-group-sm"
              uib-tooltip="{{ vm.helpTexts.lessThan | translate }}"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
            >
              <label translate>Less than</label>
              <input
                name="observeLessThan"
                type="number"
                class="form-control"
                ng-model="vm.mapping.observeParameters.lessThan"
              />
              <c8y-error-feedback field="mappingForm.observeLessThan"></c8y-error-feedback>
            </div>
          </div>

          <div class="col-md-2 col-sm-4">
            <div
              class="form-group form-group-sm"
              uib-tooltip="{{ vm.helpTexts.greaterThan | translate }}"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
            >
              <label translate>Greater than</label>
              <input
                name="observeGreaterThan"
                type="number"
                class="form-control"
                ng-model="vm.mapping.observeParameters.greaterThan"
              />
              <c8y-error-feedback field="mappingForm.observeGreaterThan"></c8y-error-feedback>
            </div>
          </div>

          <div class="col-md-2 col-sm-4">
            <div class="form-group form-group-sm" uib-tooltip="{{ vm.helpTexts.step | translate }}">
              <label translate>Step</label>
              <input
                name="observeStep"
                type="number"
                class="form-control"
                ng-model="vm.mapping.observeParameters.step"
              />
              <c8y-error-feedback field="mappingForm.observeStep"></c8y-error-feedback>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
