<div class="d-contents">
  <div class="card-header bg-component separator-top-bottom sticky-top">
    <div class="h4" translate>Input registers</div>
  </div>
  <div class="p-l-16 p-r-16 p-t-16" ng-if="vm.isEmpty(vm.inputRegistersCategorized)">
    <div class="c8y-empty-state text-left">
      <h1 c8y-icon="tasks"></h1>
      <p class="text-medium" translate>No input registers defined.</p>
    </div>
  </div>

  <div ng-if="!vm.isEmpty(vm.inputRegistersCategorized)" class="p-l-16 p-r-16">
    <div ng-repeat-start="(category, inputRegisters) in vm.inputRegistersCategorized">
      <div class="legend" ng-if="category" title="{{ category }}">{{ category }}</div>
      <div class="legend" ng-if="!category">{{ 'Uncategorized' | translate }}</div>
    </div>
    <div class="c8y-list__group separator-top" ng-repeat-end>
      <div
        class="c8y-list__item"
        ng-repeat="inputRegister in inputRegisters | orderBy:['number', 'startBit']"
      >
        <div class="c8y-list__item__block">
          <div class="c8y-list__item__icon">
            <i c8y-icon="tasks"></i>
          </div>
          <div class="c8y-list__item__body">
            <div class="content-flex-70">
              <div class="col-5">
                <span>{{ inputRegister.name }}</span>
              </div>
              <div class="col-6">
                <span class="m-r-8 d-inline-block">
                  <span class="text-label-small" translate>Number</span>
                  <span>&nbsp;{{ inputRegister.number }}</span>
                </span>
                <span class="m-r-8 d-inline-block">
                  <span class="text-label-small" translate>Start bit</span>
                  <span>&nbsp;{{ inputRegister.startBit }}</span>
                </span>
                <span class="m-r-8 d-inline-block">
                  <span class="text-label-small" translate>Number of bits</span>
                  <span>&nbsp;{{ inputRegister.noBits }}</span>
                </span>
              </div>
              <div class="flex-grow d-flex">
                <button
                  class="btn btn-dot text-danger showOnHover m-l-auto"
                  type="button"
                  aria-label="{{ 'Remove' | translate }}"
                  uib-tooltip="{{ 'Remove' | translate }}"
                  tooltip-popup-delay="500"
                  tooltip-append-to-body="true"
                  ng-click="vm.removeInputRegister(inputRegister)"
                >
                  <i c8y-icon="minus-circle" class="text-danger"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="c8y-list__item__actions">
            <div class="dropdown settings" is-open="false" uib-dropdown>
              <button
                class="dropdown-toggle c8y-dropdown"
                type="button"
                title="{{ 'Actions' | translate }}"
                aria-haspopup="true"
                uib-dropdown-toggle
              >
                <i c8y-icon="ellipsis-v"></i>
              </button>
              <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu="">
                <li>
                  <button
                    type="button"
                    title="{{ 'Edit' | translate }}"
                    ng-click="vm.editInputRegister(inputRegister)"
                  >
                    <i c8y-icon="pencil"></i>
                    {{ 'Edit' | translate }}
                  </button>
                </li>
                <li>
                  <button
                    type="button"
                    title="{{ 'Remove' | translate }}"
                    ng-click="vm.removeInputRegister(inputRegister)"
                  >
                    <i c8y-icon="minus-circle"></i>
                    {{ 'Remove' | translate }}
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <button
      class="btn btn-default m-t-8"
      type="button"
      title="{{ 'Add input register' | translate }}"
      ng-click="vm.addInputRegister()"
    >
      <i c8y-icon="plus-circle"></i>
      {{ 'Add input register' | translate }}
    </button>
  </div>
</div>
