<div class="dropdown" dropdown>
  <button
    *ngIf="!(limit$ | async); else disable"
    title="{{ 'Register device' | translate }}"
    type="button"
    class="dropdown-toggle c8y-dropdown d-flex a-i-center"
    dropdownToggle
    aria-haspopup="true"
    data-cy="register-device--dropdown-button"
  >
    <span class="text-truncate" translate>Register device</span>
    <i [c8yIcon]="'caret-down'" class="m-l-4 text-primary"></i>
  </button>
  <ng-template #disable>
    <button
      title="{{ 'Device registration disabled' | translate }}"
      type="button"
      class="btn btn-clean d-flex p-l-8"
      disabled
    >
      <span class="text-truncate" translate>Register device</span>
      <i [c8yIcon]="'caret-down'"></i>
    </button>
  </ng-template>

  <!-- dropdown for normal screen sizes -->
  <ul class="dropdown-menu dropdown-menu-right hidden-xs" data-cy="register-device--dropdown" *dropdownMenu>
    <ng-container *ngTemplateOutlet="dropdown"></ng-container>
  </ul>

  <!-- fake dropdown for mobile screen sizes. *dropdownMenu is missing by design! -->
  <ul class="dropdown-menu dropdown-menu visible-xs">
    <ng-container *ngTemplateOutlet="dropdown"></ng-container>
  </ul>

  <ng-template #dropdown>
    <ng-container *ngIf="single$ | async as single">
      <li class="dropdown-header" *ngIf="single.length > 0" translate data-cy="single-group">Single registration</li>
      <li *ngFor="let item of single">
        <ng-container *c8yOutlet="item.template"></ng-container>
      </li>
    </ng-container>
    <ng-container *ngIf="bulk$ | async as bulk">
      <li class="dropdown-header" *ngIf="bulk.length > 0" translate data-cy="bulk-group">Bulk registration</li>
      <li *ngFor="let item of bulk">
        <ng-container *c8yOutlet="item.template"></ng-container>
      </li>
    </ng-container>
  </ng-template>
</div>