<div class="d-contents">
  <div class="card-header bg-component separator-top-bottom sticky-top">
    <div class="h4" ng-if="vm.features.holdingRegisters.sectionTitle">
      {{ vm.features.holdingRegisters.sectionTitle | translate }}
    </div>
    <div class="h4" ng-if="!vm.features.holdingRegisters.sectionTitle">
      {{ 'Holding registers' | translate }}
    </div>
  </div>
  <div class="p-l-16 p-r-16 p-t-16" ng-if="vm.isEmpty(vm.holdingRegistersCategorized)">
    <div class="c8y-empty-state text-left">
      <h1 title="Sliders" c8y-icon="sliders"></h1>
      <p class="text-medium" ng-if="vm.features.holdingRegisters.noRegistersDefinedMessage">
        {{ vm.features.holdingRegisters.noRegistersDefinedMessage | translate }}
      </p>
      <p class="text-medium" ng-if="!vm.features.holdingRegisters.noRegistersDefinedMessage">
        {{ 'No holding registers defined.' | translate }}
      </p>
    </div>
  </div>

  <div ng-if="!vm.isEmpty(vm.holdingRegistersCategorized)" class="p-l-16 p-r-16">
    <div ng-repeat-start="(category, holdingRegisters) in vm.holdingRegistersCategorized">
      <div class="legend" ng-if="category" title="{{ category }}">{{ category }}</div>
      <div class="legend" ng-if="!category" title="{{ 'Uncategorized' | translate }}">
        {{ 'Uncategorized' | translate }}
      </div>
    </div>
    <div class="c8y-list__group separator-top" ng-repeat-end>
      <div
        class="c8y-list__item"
        ng-repeat="holdingRegister in holdingRegisters | orderBy:['number', 'startBit', 'browsePath']"
      >
        <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>{{ holdingRegister.name }}</span>
              </div>
              <div class="col-6">
                <span ng-if="vm.features.holdingRegisters.number" class="m-r-8 d-inline-block">
                  <span class="text-label-small">
                    {{
                      (vm.features.holdingRegisters.number.label | translate) ||
                        ('Number' | translate)
                    }}
                  </span>
                  <span>&nbsp;{{ holdingRegister.number }}</span>
                </span>

                <span
                  class="m-r-8 d-inline-block"
                  ng-if="vm.features.holdingRegisters.messageTypeId"
                >
                  <span class="text-label-small">
                    {{
                      (vm.features.holdingRegisters.messageTypeId.label | translate) ||
                        ('Message ID' | translate)
                    }}
                  </span>
                  <span>&nbsp;{{ holdingRegister.messageTypeId }}</span>
                </span>

                <span class="m-r-8 d-inline-block" ng-if="vm.features.holdingRegisters.startBit">
                  <span class="text-label-small" translate>Start bit</span>
                  <span>&nbsp;{{ holdingRegister.startBit }}</span>
                </span>
                <span class="m-r-8 d-inline-block" ng-if="vm.features.holdingRegisters.noBits">
                  <span class="text-label-small" translate>Number of bits</span>
                  <span>&nbsp;{{ holdingRegister.noBits }}</span>
                </span>
                <span class="m-r-8 d-inline-block" ng-if="vm.features.holdingRegisters.browsePath">
                  <span class="text-label-small" translate>Browse path</span>
                  <span>&nbsp;{{ holdingRegister.browsePath }}</span>
                </span>
                <span class="m-r-8 d-inline-block" ng-if="vm.features.holdingRegisters.nodeType">
                  <span class="text-label-small" translate>Node type</span>
                  <span>&nbsp;{{ holdingRegister.nodeType }}</span>
                </span>
                <span
                  class="m-r-8 d-inline-block"
                  ng-if="vm.features.holdingRegisters.attributeType"
                >
                  <span class="text-label-small" translate>Attribute type</span>
                  <span>&nbsp;{{ holdingRegister.attributeType }}</span>
                </span>
                <span class="m-r-8 d-inline-block" ng-if="vm.features.holdingRegisters.dataType">
                  <span class="text-label-small" translate>Data type</span>
                  <span>&nbsp;{{ vm.getDataTypeLabel(holdingRegister) }}</span>
                </span>
                <span class="m-r-8 d-inline-block" ng-if="vm.features.holdingRegisters.accessType">
                  <span class="text-label-small" translate>Access type</span>
                  <span>{{ vm.getAccessTypeLabel(holdingRegister) }}</span>
                </span>
                <span class="m-r-8 d-inline-block" ng-if="vm.features.holdingRegisters.index">
                  <span class="text-label-small" translate>Index</span>
                  <span>&nbsp;{{ holdingRegister.index | hex }}</span>
                </span>
                <span
                  class="m-r-8 d-inline-block"
                  ng-if="vm.features.holdingRegisters.subIndex && holdingRegister.subIndex >= 0"
                >
                  <span class="text-label-small" translate>Sub-index</span>
                  <span>&nbsp;{{ holdingRegister.subIndex | hex }}</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.removeHoldingRegister(holdingRegister)"
                >
                  <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"
                aria-haspopup="true"
                uib-dropdown-toggle
                title="{{ 'Actions' | translate }}"
              >
                <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.editHoldingRegister(holdingRegister)"
                  >
                    <i c8y-icon="pencil"></i>
                    {{ 'Edit' | translate }}
                  </button>
                </li>
                <li>
                  <button
                    type="button"
                    title="{{ 'Remove' | translate }}"
                    ng-click="vm.removeHoldingRegister(holdingRegister)"
                  >
                    <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" ng-click="vm.addHoldingRegister()" data-cy="holding-registers--add-holding-register-button">
      <i c8y-icon="plus-circle"></i>
      <span
        title="{{ vm.features.holdingRegisters.addRegisterButtonLabel | translate }}"
        ng-if="vm.features.holdingRegisters.addRegisterButtonLabel"
      >
        {{ vm.features.holdingRegisters.addRegisterButtonLabel | translate }}
      </span>
      <span
        title="{{ 'Add holding register' | translate }}"
        ng-if="!vm.features.holdingRegisters.addRegisterButtonLabel"
      >
        {{ 'Add holding register' | translate }}
      </span>
    </button>
  </div>
</div>
