@if (editable) {
  <div class="ngm-responsive__header"></div>
}

@for (item of flexLayout.children; track trackById($index, item)) {
  @if (item.type === FLEX_ITEM_TYPE.FlexLayout) {
    <ngm-flex-layout class="ngm-responsive__item"
      [flexLayout]="item" [editable]="editable">
    </ngm-flex-layout>
  }
  @if (item.type===FLEX_ITEM_TYPE.Widget) {
    <div class="ngm-responsive__item widget"
      [ngClass]="activeId===item.key ? 'active' : ''"
      [ngStyle]="item.styles"
      (click)="onChildClick($event, item)"
      >
      <ng-container [ngTemplateOutlet]="item.template"
            [ngTemplateOutletContext]="{
                $implicit: item.templateContext,
                laneKey: item.key,
                editable: editable,
                selected: activeId === item.key
            }">
      </ng-container>
    </div>
  }
}

@if (active && editable) {
  <div class="ngm-responsive__fab-menu" [ngClass]="{rightSide: rightSide}"
    fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="0.25rem">
    <button z-button zType="default" zSize="icon-sm" zShape="circle" z-menu [zMenuTriggerFor]="menu" (click)="$event.stopPropagation()">
      <z-icon zType="menu"></z-icon>
    </button>
  </div>
}

<ng-template #menu>
  <div z-menu-content class="ngm-density__compact">
    <button type="button" z-menu-item z-menu [zMenuTriggerFor]="laneMenu">
      <z-icon zType="add"></z-icon> Add lane
    </button>

    <button type="button" z-menu-item z-menu [zMenuTriggerFor]="swapMenu">
      <z-icon [zType]="parentDirection === 'row' ? 'swap_horiz' : 'swap_vert'"></z-icon>Swap
    </button>

    <button type="button" z-menu-item class="ngm-button--warn" (click)="removeMyself()">
      <z-icon color="warn" zType="delete_forever"></z-icon>
      <span>Delete</span>
    </button>
  </div>
</ng-template>

<ng-template #laneMenu>
  <div z-menu-content class="ngm-density__compact">
    <button type="button" z-menu-item (click)="addLaneLeft()">
      Add lane to left
    </button>
    <button type="button" z-menu-item (click)="addLaneRight()">
      Add lane to right
    </button>
    <button type="button" z-menu-item (click)="addLaneAbove()">
      Add lane to above
    </button>
    <button type="button" z-menu-item (click)="addLaneBelow()">
      Add lane to below
    </button>
  </div>
</ng-template>

<ng-template #swapMenu>
  <div z-menu-content class="ngm-density__compact">
    <button type="button" z-menu-item (click)="swapWithPrev()">
      <z-icon [zType]="parentDirection === 'row' ? 'arrow_back' : 'arrow_upward'"></z-icon>
      With Prev
    </button>
    <button type="button" z-menu-item (click)="swapWithNext()">
      <z-icon [zType]="parentDirection === 'row' ? 'arrow_forward' : 'arrow_downward'"></z-icon>
      With Next
    </button>
  </div>
</ng-template>