<c8y-action-bar-item [placement]="'right'">
  <div
    class="dropdown"
    dropdown
    [insideClick]="true"
  >
    <button
      class="dropdown-toggle c8y-dropdown d-flex a-i-center"
      title="{{ 'CRL check' | translate }}"
      aria-haspopup="true"
      type="button"
      dropdownToggle
    >
      <i
        class="m-r-4"
        [c8yIcon]="'check-document'"
      ></i>
      <span
        class="text-truncate"
        translate
      >
        CRL check
      </span>
      <i
        class="m-l-4 text-primary"
        [c8yIcon]="'caret-down'"
      ></i>
    </button>
    <ul
      class="dropdown-menu dropdown-menu-right hidden-xs"
      data-cy="register-device--dropdown"
      *dropdownMenu
    >
      <ng-container *ngTemplateOutlet="dropdown"></ng-container>
    </ul>

    <ul class="dropdown-menu dropdown-menu-right visible-xs">
      <ng-container *ngTemplateOutlet="dropdown"></ng-container>
    </ul>

    <ng-template #dropdown>
      <li>
        <label
          class="c8y-checkbox d-flex a-i-center"
          title="{{ 'Online`type of checking`' | translate }}"
        >
          <input
            type="checkbox"
            [(ngModel)]="crlCheck.online"
            (ngModelChange)="
              updateTenantOption({
                category: 'configuration',
                key: 'crl.online.check.enabled',
                value: $event
              })
            "
          />
          <span class="m-r-4"></span>
          {{ 'Online`type of checking`' | translate }}
        </label>
      </li>
      <li>
        <label
          class="c8y-checkbox d-flex a-i-center"
          title="{{ 'Offline`type of checking`' | translate }}"
        >
          <input
            type="checkbox"
            [(ngModel)]="crlCheck.offline"
            (ngModelChange)="
              updateTenantOption({
                category: 'configuration',
                key: 'crl.offline.check.enabled',
                value: $event
              })
            "
          />
          <span class="m-r-4"></span>
          {{ 'Offline`type of checking`' | translate }}
        </label>
      </li>
    </ng-template>
  </div>
</c8y-action-bar-item>