<div class="d-contents">
  <div class="card-header bg-component separator-top-bottom sticky-top">
    <div class="h4" translate>Message types</div>
  </div>
  <div class="card-block p-t-16">
    <div class="row">
      <div class="col-lg-6">
        <div
          class="form-group"
          ng-class="{
            'has-error':
              vm.deviceTypeForm.messageIdSource.$dirty && vm.deviceTypeForm.deviceType.$invalid
          }"
        >
          <label id="source" translate>Source</label>
          <div class="c8y-select-wrapper">
            <select
              aria-labelledby="source"
              class="form-control"
              name="messageIdSource"
              ng-model="vm.displayedMessageIdSource"
              ng-change="vm.deviceType.c8y_MessageIdConfiguration.source = vm.displayedMessageIdSource"
              ng-options="source.value as (source.label | translate) for source in vm.featureConfiguration.messageIdConfiguration"
              ng-disabled="vm.isMessageIdSourceDisabled()"
              required
            ></select>
            <span></span>
          </div>
        </div>

        <div class="row" ng-if="vm.displayedMessageIdSource === vm.messageIdSources.PAYLOAD.value">
          <div
            class="form-group col-lg-6"
            ng-class="{
              'has-error':
                vm.deviceTypeForm.messageIdStartBit.$dirty && vm.deviceTypeForm.deviceType.$invalid
            }"
          >
            <label>
              <span translate>Start bit</span>
              <button
                class="btn-help btn-help--sm"
                type="button"
                aria-label="{{ 'Help' | translate }}"
                uib-popover="{{
                  'For example, if message type is indicated by the first byte of payload, then enter 0'
                    | translate
                }}"
                popover-trigger="'focus'"
                popover-placement="right"
                popover-append-to-body="true"
              ></button>
            </label>
            <input
              class="form-control"
              type="number"
              name="messageIdStartBit"
              ng-model="vm.deviceType.c8y_MessageIdConfiguration.messageIdMapping.startBit"
              ng-min="0"
              placeholder="{{ 'e.g.' | translate }} 0"
              required
            />
          </div>
          <div
            class="form-group col-lg-6"
            ng-class="{
              'has-error':
                vm.deviceTypeForm.messageIdNoBits.$dirty && vm.deviceTypeForm.deviceType.$invalid
            }"
          >
            <label>
              <span translate>Number of bits</span>
              <button
                class="btn-help btn-help--sm"
                type="button"
                aria-label="{{ 'Help' | translate }}"
                uib-popover="{{
                  'For example, if message type is indicated by the first byte of payload, then enter 8'
                    | translate
                }}"
                popover-trigger="'focus'"
                popover-placement="right"
                popover-append-to-body="true"
              ></button>
            </label>
            <input
              class="form-control"
              type="number"
              name="messageIdNoBits"
              ng-model="vm.deviceType.c8y_MessageIdConfiguration.messageIdMapping.noBits"
              ng-min="1"
              placeholder="{{ 'e.g.' | translate }} 8"
              required
            />
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <c8y-message-id-configuration-description
          feature-label="vm.featureLabel"
          message-id-configuration="vm.featureConfiguration.messageIdConfiguration"
        ></c8y-message-id-configuration-description>
      </div>
    </div>
  </div>
</div>
