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

  <div ng-if="!vm.isEmpty(vm.discreteOutputsCategorized)" class="p-l-16 p-r-16">
    <div ng-repeat-start="(category, discreteOutputs) in vm.discreteOutputsCategorized">
      <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="discreteOutput in discreteOutputs | orderBy:'number'">
        <div class="c8y-list__item__block">
          <div class="c8y-list__item__icon">
            <i c8y-icon="sliders"></i>
          </div>
          <div class="c8y-list__item__body">
            <div class="content-flex-70">
              <div class="col-5">
                <span>{{ discreteOutput.name }}</span>
              </div>
              <div class="col-6">
                <span class="text-label-small" translate>Number</span>
                <span>&nbsp;{{ discreteOutput.number }}</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.removeDiscreteOutput(discreteOutput)"
                >
                  <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.editDiscreteOutput(discreteOutput)"
                  >
                    <i c8y-icon="pencil"></i>
                    {{ 'Edit' | translate }}
                  </button>
                </li>
                <li>
                  <button
                    type="button"
                    title="{{ 'Remove' | translate }}"
                    ng-click="vm.removeDiscreteOutput(discreteOutput)"
                  >
                    <i c8y-icon="minus-circle"></i>
                    {{ 'Remove' | translate }}
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <button
      title="{{ 'Add coil' | translate }}"
      type="button"
      class="btn btn-default m-t-8"
      ng-click="vm.addDiscreteOutput()"
    >
      <i c8y-icon="plus-circle"></i>
      {{ 'Add coil' | translate }}
    </button>
  </div>
</div>
