<templates>
  <t t-name="o-spreadsheet-ChartMenu">
    <div class="o-chart-menu position-absolute top-0 end-0" t-on-click.stop="">
      <div class="d-flex align-items-center gap-1 p-1 rounded" t-att-style="backgroundColor">
        <t t-if="this.env.model.getters.isDashboard() and this.regionOptions.length > 1">
          <Select
            class="'o-chart-menu-item w-auto py-0 px-1 text-muted text-nowrap rounded border-0'"
            popoverClass="'w-auto'"
            values="this.regionOptions"
            selectedValue="this.selectedRegion"
            onChange.bind="this.onRegionSelected"
          />
        </t>
        <t t-foreach="this.getMenuItems()" t-as="item" t-key="item.id">
          <div
            class="o-chart-menu-item lh-1 p-1 d-flex align-items-center justify-content-center rounded"
            t-att-title="item.label"
            t-on-click="item.onClick"
            t-att-data-id="item.id">
            <t t-call="{{item.icon}}"/>
          </div>
        </t>
        <t t-if="this.isMenuAvailable()">
          <div
            class="o-chart-menu-item lh-1 p-1 d-flex align-items-center justify-content-center rounded"
            t-on-click="this.openContextMenu">
            <t t-call="o-spreadsheet-Icon.MORE_MENU"/>
          </div>
        </t>
      </div>
      <InfoPopover
        t-if="this.state.openedPopover === 'info'"
        anchorRect="this.state.anchorRect"
        onClose.bind="this.onClose"
        annotationText="this.getAnnotationText()"
        annotationLink="this.getAnnotationLink()"
      />
      <MenuPopover
        t-if="this.state.openedPopover === 'menu'"
        menuId="'menu-popover'"
        anchorRect="this.state.anchorRect"
        menuItems="this.state.menuItems"
        onClose.bind="this.onClose"
        popoverPositioning="'bottom-left'"
      />
    </div>
  </t>
</templates>
