<c8y-ui-title-set title="vm.title"></c8y-ui-title-set>

<c8y-device-protocol-breadcrumb></c8y-device-protocol-breadcrumb>

<div class="row">
  <div class="col-lg-12 col-lg-max">
    <form ng-if="vm.deviceType" class="card card--fullpage" name="vm.deviceTypeForm" novalidate>
      <div class="card-block bg-level-1 flex-no-shrink p-t-24 p-b-24">
        <div class="content-flex-70">
          <div class="text-center">
            <i
              class="c8y-icon-duocolor icon-48 c8y-icon c8y-icon-device-protocols"
            ></i>
            <p ng-if="!vm.isNew()">
             <small class="label label-info">{{ vm.features.label }}</small>
            </p>
          </div>
          <div class="flex-grow col-10">
            <div class="content-flex-80">
              <div class="col-9">
                <c8y-device-type-basic-info
                  device-type-form="vm.deviceTypeForm"
                  form-value="vm.formValue"
                  device-type="vm.deviceType"
                  device-types-features="vm.deviceTypesFeatures"
                >
                </c8y-device-type-basic-info>
              </div>
              <div class="flex-grow">
                <ul class="list-unstyled small">
                  <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
                    <label class="small m-b-0 m-r-8" translate>ID</label>
                    <span class="m-l-auto">{{ vm.deviceType.id }}</span>
                  </li>
                  <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
                    <label class="small m-b-0 m-r-8" translate>Date created</label>
                    <span class="m-l-auto">{{ vm.deviceType.creationTime | absoluteDate }}</span>
                  </li>
                  <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
                    <label class="small m-b-0 m-r-8" translate>Last update</label>
                    <span class="m-l-auto">{{ vm.deviceType.lastUpdated | absoluteDate }}</span>
                  </li>
                  <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
                    <label class="small m-b-0 m-r-8" translate>Fieldbus version</label>
                    <span class="m-l-auto">{{ vm.deviceType.fieldbusVersion }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="inner-scroll">
        <c8y-device-type-message-id-configuration
          ng-if="vm.features.configuration.messageIdConfiguration.length"
          feature-label="vm.features.label"
          feature-configuration="vm.features.configuration"
          device-type-form="vm.deviceTypeForm"
          device-type="vm.deviceType"
          message-id-sources="vm.messageIdSources"
        >
        </c8y-device-type-message-id-configuration>

        <c8y-device-type-discrete-outputs
          ng-if="vm.features.discreteOutputs"
          discrete-outputs-categorized="vm.discreteOutputsCategorized"
          is-empty="vm.isEmpty"
          add-discrete-output="vm.addDiscreteOutput"
          edit-discrete-output="vm.editDiscreteOutput"
          remove-discrete-output="vm.removeDiscreteOutput"
        >
        </c8y-device-type-discrete-outputs>

        <c8y-device-type-discrete-inputs
          ng-if="vm.features.discreteInputs"
          discrete-inputs-categorized="vm.discreteInputsCategorized"
          is-empty="vm.isEmpty"
          add-discrete-input="vm.addDiscreteInput"
          edit-discrete-input="vm.editDiscreteInput"
          remove-discrete-input="vm.removeDiscreteInput"
        >
        </c8y-device-type-discrete-inputs>

        <c8y-device-type-holding-registers
          ng-if="vm.features.holdingRegisters"
          features="vm.features"
          holding-registers-categorized="vm.holdingRegistersCategorized"
          is-empty="vm.isEmpty"
          add-holding-register="vm.addHoldingRegister"
          edit-holding-register="vm.editHoldingRegister"
          remove-holding-register="vm.removeHoldingRegister"
        >
        </c8y-device-type-holding-registers>

        <c8y-device-type-input-registers
          ng-if="vm.features.inputRegisters"
          input-registers-categorized="vm.inputRegistersCategorized"
          is-empty="vm.isEmpty"
          add-input-register="vm.addInputRegister"
          edit-input-register="vm.editInputRegister"
          remove-input-register="vm.removeInputRegister"
        >
        </c8y-device-type-input-registers>

        <c8y-device-type-options
          ng-if="vm.features.options"
          options="vm.features.options"
          device-type="vm.deviceType"
        >
        </c8y-device-type-options>

        
        <c8y-if-allowed admin-mos="[vm.deviceType.id]">
          <div class="card-footer sticky-bottom separator bg-component" style="z-index:101">
            <button
              title="{{ 'Save' | translate }}"
              class="btn btn-primary"
              ng-click="vm.save(vm.deviceType)"
              data-cy="sigfox-settings--Save-button"
              ng-disabled="vm.saveDisabled()"
              translate
            >
              Save
            </button>
          </div>
        </c8y-if-allowed>
      </div>
    </form>
  </div>
</div>
