<ng-form class="widget-config-modbus" name="vm.modbusWidgetConfigForm">
  <div ng-if="vm.categoriesConfig.length === 0" class="alert alert-warning" translate>
    No categories available.
  </div>
  <div
    ng-if="vm.categoriesConfig.length > 0 && !vm.atLeastOneElementSelected"
    class="alert alert-warning"
  >
    <span translate>At least one field needs to be selected.</span>
  </div>
  <div ui-sortable="{handle: '.handle-category'}" ng-model="vm.categoriesConfig">
    <fieldset class="c8y-fieldset" ng-repeat="category in vm.categoriesConfig">
      <legend>
        <label class="editable" ng-if="category.name">
          <input
            class="form-control input-sm"
            style="width:calc({{ category.label.length || 10 }} * 1ch);"
            ng-model="category.label"
          />
          <span>{{ category.label }}</span>
        </label>
        <label class="editable text-muted" ng-if="!category.name">
          <span>{{ category.label | translate }}</span>
        </label>
      </legend>
 
      <table class="table table-vertical-middle table-condensed bg-inherit" style="table-layout: fixed;">
        <colgroup>
          <col style="width:5%;" />
          <col style="width:7%;" />
          <col style="width:34%;" />
          <col style="width:28%;" />
          <col style="width:26%;" />
        </colgroup>
        <thead>
          <th></th>
          <th>
            <span>{{ 'Show' | translate }}</span>
          </th>
          <th>
            <span>{{ 'Label' | translate }}</sp>
          </th>
          <th>
            <span>{{ 'Name' | translate }}</span>
          </th>
          <th>
            <span>{{ 'Type' | translate }}</spa>
          </th>
        </thead>
        <tbody ui-sortable="{handle: '.handle-property'}" ng-model="category.elements">
          <tr class="property" ng-repeat="element in category.elements">
            <td class="handle-property">
              <i c8y-icon="bars" style="cursor:move;"></i>
            </td>
            <td style="vertical-align:middle;">
              <label class="c8y-checkbox input-sm" style="line-height:30px;">
                <input type="checkbox" ng-model="element.show" />
                <span></span>
              </label>
            </td>
            <td>
              <label class="editable">
                <input
                  class="form-control input-sm"
                  style="max-width:calc({{ element.label.length || 10 }} * 1ch + 14px)"
                  ng-model="element.label"
                />
                <span>{{ element.label }}</span>
              </label>
            </td>
            <td>
              {{ element.name }}
            </td>
            <td>
              {{ element.typeLabel | translate }}
            </td>
          </tr>
        </tbody>
      </table>
    </fieldset>
  </div>

  <input type="hidden" name="modbusWidgetValidation" ng-model="vm.modbusWidgetValidation" />

</ng-form>
