<div class="fit-min-h d-flex d-col">
  <ul class="c8y-list__group bg-level-0 flex-grow">
    <li class="c8y-list__item" ng-show="vm.currentGroups.length === 0">
      <div class="c8y-empty-state c8y-empty-state--horizontal">
        <i class="c8y-icon c8y-icon-group-open c8y-icon-duocolor"></i>
        <div>
          <p class="text-medium" translate>Device not assigned.</p>
          <p translate>Assign the device to a group below.</p>
        </div>
      </div>
    </li>
    <li class="c8y-list__item" ng-repeat="group in vm.currentGroups | orderBy:'name'">
      <div class="c8y-list__item__block">
        <div class="c8y-list__item__icon">
          <i c8y-icon="{{ group.icon.name }}" ng-if="group.c8y_IsAsset"></i>
          <i c8y-icon="c8y-group" ng-if="!group.c8y_IsAsset"></i>
        </div>
        <div class="c8y-list__item__body">
          <div class="d-flex a-i-center">
            <a
              title="{{ group.name }}"
              ng-href="#/group/{{ group.id }}"
              class="text-truncate btn-clean d-flex a-i-center"
            >
              <span class="m-l-8 text-truncate">{{ group.name }}</span>
            </a>
            <button
              class="m-l-auto btn btn-dot showOnHover"
              type="button"
              aria-label="{{ 'Unassign device' | translate }}"
              uib-tooltip="{{ 'Unassign device' | translate }}"
              tooltip-trigger="'mouseenter'"
              tootip-popover-delay="500"
              tooltip-append-to-body="true"
              ng-click="vm.removeFromGroup(group)"
            >
              <i c8y-icon="chain-broken"></i>
            </button>
          </div>
        </div>
      </div>
    </li>
  </ul>

  <div class="card-block p-8 bg-level-1 sticky-bottom separator-top">
    <div class="input-group">
      <div
        c8y-device-group-selector
        group="vm.group.selected"
        lazy-load="true"
        allow-non-existing-group="vm.isCreateNewGroupAllowed"
      ></div>
      <div class="input-group-btn">
        <button
          class="btn btn-primary"
          type="button"
          title="{{ 'Assign' | translate }}"
          ng-click="vm.addToGroup(vm.group.selected)"
          ng-disabled="!vm.group.selected"
        >
          {{ 'Assign' | translate }}
        </button>
      </div>
    </div>
  </div>
</div>
