<templates>
  <t t-name="o-spreadsheet-Menu">
    <div
      t-ref="this.menuRef"
      class="o-menu"
      t-att-style="this.menuStyle"
      t-on-scroll="this.props.onScroll"
      t-on-wheel.stop=""
      t-on-pointerdown.prevent=""
      t-on-click.stop="">
      <t t-set="shouldDisplayIcons" t-value="this.childrenHaveIcon"/>
      <t t-foreach="this.props.menuItems" t-as="menuItem" t-key="menuItem_index">
        <div t-if="menuItem === 'separator'" class="o-separator border-bottom"/>
        <t t-else="">
          <t t-set="isMenuRoot" t-value="this.isRoot(menuItem)"/>
          <t t-set="isMenuEnabled" t-value="this.isEnabled(menuItem)"/>
          <div
            tabIndex="-1"
            t-att-title="this.getName(menuItem)"
            t-att-data-name="menuItem.id"
            t-on-click="(ev) => this.onClickMenu(menuItem, ev)"
            t-on-auxclick="(ev) => this.onClickMenu(menuItem, ev)"
            t-on-mouseenter="(ev) => this.props.onMouseEnter?.(menuItem, ev)"
            t-on-mouseleave="(ev) => this.props.onMouseLeave?.(menuItem)"
            t-on-keydown="(ev) => this.props.onKeyDown?.(ev)"
            class="o-menu-item d-flex justify-content-between align-items-center"
            t-att-class="{'disabled': !isMenuEnabled, 'o-menu-item-active': menuItem.id === this.props.hoveredMenuId}"
            t-att-style="this.getColor(menuItem)">
            <div class="d-flex w-100">
              <div
                t-if="shouldDisplayIcons"
                class="o-menu-item-icon d-flex align-items-center flex-shrink-0"
                t-att-style="this.getIconColor(menuItem)">
                <t t-if="this.getIconName(menuItem)" t-call="{{this.getIconName(menuItem)}}"/>
              </div>
              <div
                class="o-menu-item-name align-middle text-truncate"
                t-out="this.getName(menuItem)"
              />
              <t
                t-set="description"
                t-value="menuItem.description(this.env) or this.getShortcut(menuItem)"
              />
              <div
                t-if="description"
                class="o-menu-item-description ms-auto text-truncate"
                t-out="description"
              />
              <div
                t-if="isMenuRoot"
                class="o-menu-item-root ms-auto align-items-center d-flex gap-1">
                <t t-if="isMenuRoot" t-call="o-spreadsheet-Icon.CARET_RIGHT"/>
              </div>
            </div>
          </div>
        </t>
      </t>
    </div>
  </t>
</templates>
