<div
  class="navbar-header"
  role="presentation"
>
  <p class="text-label-small p-l-16 p-t-8 p-b-8 visible-xs">
    <span class="text-primary">{{ 'Action bar' | translate }}</span>
  </p>
</div>

<div
  class="navbar-collapse"
  id="page-toolbar"
  role="complementary"
>
  <ul class="nav navbar-nav navbar-left gap-sm-8 p-l-sm-16 p-l-lg-0">
    @for (item of left$ | async; track item) {
      <ng-container
        *c8yOutlet="item.component || item.template; injector: item.injector"
      ></ng-container>
    }
  </ul>
  <ul class="nav navbar-nav navbar-right gap-sm-8">
    @for (item of right$ | async; track item) {
      <ng-container
        *c8yOutlet="item.component || item.template; injector: item.injector"
      ></ng-container>
    }
    @if ((more$ | async).length === 1) {
      <li>
        @for (item of more$ | async; track item) {
          <ng-container
            *c8yOutlet="item.component || item.template; injector: item.injector"
          ></ng-container>
        }
      </li>
    } @else {
      @if ((more$ | async).length > 1) {
        <li class="no-remove more-wrapper">
          <div
            class="dropdown"
            dropdown
          >
            <c8y-action-bar-item [placement]="'right'">
              <button
                class="dropdown-toggle c8y-dropdown d-flex"
                title="{{ 'More…' | translate }}"
                aria-haspopup="true"
                type="button"
                dropdownToggle
                data-cy="action-bar--button-more"
              >
                <span
                  class="text-truncate"
                  translate
                >
                  More…
                </span>
                <i [c8yIcon]="'caret-down'"></i>
              </button>
              <ul class="dropdown-menu visible-xs">
                @for (item of more$ | async; track item) {
                  <ng-container
                    *c8yOutlet="item.component || item.template; injector: item.injector"
                  ></ng-container>
                }
              </ul>
              <ul
                class="dropdown-menu dropdown-menu-right hidden-xs"
                *dropdownMenu
              >
                @for (item of more$ | async; track item) {
                  <ng-container
                    *c8yOutlet="item.component || item.template; injector: item.injector"
                  ></ng-container>
                }
              </ul>
            </c8y-action-bar-item>
          </div>
        </li>
      }
    }
  </ul>
</div>