<div class="flex justify-between w-full">
  <div *ngFor="let element of visibleElements" class="flex justify-center">
    <ng-container *ngIf="element.visible !== false && element.routerLink">
      <a
        [routerLink]="element.routerLink"
        (click)="element.command?.()"
        class="icon-btn btn flex gap-2">
        <i *ngIf="element.icon" class="{{ element.icon }}"></i>
        <b>{{ element.label | translate }}</b>
      </a>
    </ng-container>

    <ng-container *ngIf="element.visible !== false && element.items">
      <p-button
        class="icon-btn btn"
        icon="{{ element.icon }}"
        (onClick)="overlayPanel.toggle($event)"
        label="{{ element.label | translate }}">
      </p-button>

      <p-overlayPanel [styleClass]="theme" #overlayPanel>
        <div class="flex flex-col gap-2">
          <div *ngFor="let item of element.items" class="flex gap-1">
            <a
              *ngIf="item.visible !== false"
              [routerLink]="item.routerLink"
              (click)="overlayPanel.toggle($event); item.command?.()"
              class="icon-btn btn flex gap-2">
              <i *ngIf="item.icon" class="{{ item.icon }}"></i>
              <b>{{ item.label | translate }}</b>
            </a>
          </div>
        </div>
      </p-overlayPanel>
    </ng-container>
  </div>
</div>
