<templates>
  <t t-name="o-spreadsheet-CarouselFigure">
    <div
      class="o-carousel w-100 h-100 position-relative"
      t-att-style="this.carouselStyle"
      t-on-dblclick="this.onCarouselDoubleClick">
      <t t-set="selectedItem" t-value="this.selectedCarouselItem"/>
      <div
        class="o-carousel-header d-flex align-items-baseline position-absolute"
        t-att-style="this.headerStyle">
        <div
          class="o-carousel-title text-truncate flex-shrink-0 pe-2"
          t-out="this.title"
          t-att-title="this.title"
          t-att-style="this.titleStyle"
        />
        <div
          class="o-carousel-tabs d-flex flex-fill justify-content-end"
          t-ref="this.carouselTabsRef">
          <t
            t-foreach="this.carousel.items"
            t-as="item"
            t-key="item_index"
            t-if="this.carousel.items.length > 1">
            <div
              class="o-carousel-tab text-truncate px-2 flex-shrink-0"
              t-att-class="{ 'selected': this.isItemSelected(item) }"
              t-att-data-type="item.type"
              t-out="this.getItemTitle(item)"
              t-on-click.stop="() => this.onCarouselTabClick(item)"
            />
          </t>
        </div>
        <div
          class="o-carousel-button o-carousel-tabs-dropdown flex-shrink-0 rounded"
          t-att-class="{'active': this.menuState.isOpen}"
          t-ref="this.carouselTabsDropdownRef"
          t-on-click="this.toggleMenu">
          <div class="o-icon">
            <i class="oi" data-icon="keyboard_arrow_down"/>
          </div>
          <MenuPopover
            t-if="this.menuState.isOpen"
            menuId="this.menuId"
            anchorRect="this.menuState.anchorRect"
            menuItems="this.menuState.menuItems"
            onClose="() => this.menuState.isOpen=false"
            popoverPositioning="'bottom-left'"
          />
        </div>
        <div
          t-if="this.env.model.getters.isDashboard()"
          t-att-title="this.fullScreenButtonTitle"
          class="o-carousel-full-screen-button oi o-carousel-button rounded p-1 ms-1"
          t-att-data-icon="this.props.isFullScreen ? 'close_fullscreen' : 'expand_content'"
          t-on-click="this.toggleFullScreen"
        />
        <div
          t-if="!this.env.model.getters.isDashboard()"
          class="o-carousel-menu-button o-carousel-button rounded ms-1"
          t-on-click="this.openContextMenu">
          <t t-call="o-spreadsheet-Icon.MORE_MENU"/>
        </div>
      </div>
      <div
        t-if="this.separatorStyle"
        class="o-carousel-separator position-absolute"
        t-att-style="this.separatorStyle"
      />
      <div
        t-if="!selectedItem"
        class="o-carousel-empty o-carousel-content position-absolute d-flex align-items-center justify-content-center"
        t-att-style="this.contentStyle">
        <t t-call="o-spreadsheet-Icon.CAROUSEL"/>
      </div>
      <div
        t-elif="selectedItem.type === 'chart'"
        class="o-carousel-content position-absolute"
        t-att-style="this.contentStyle">
        <div
          class="o-chart-container w-100 h-100"
          t-on-dblclick.stop="this.onCarouselChartDoubleClick">
          <t
            t-component="this.chartComponent"
            chartId="selectedItem.chartId"
            isFullScreen="this.props.isFullScreen"
            t-key="selectedItem.chartId"
          />
        </div>
        <ChartMenu
          chartId="selectedItem.chartId"
          hasFullScreenButton="false"
          displayEllipsisButton="this.env.model.getters.isDashboard()"
          t-key="selectedItem.chartId"
        />
      </div>
      <div
        t-elif="selectedItem.type === 'carouselDataView' and selectedItem.range"
        class="o-carousel-content position-absolute overflow-hidden"
        t-att-style="this.contentStyle">
        <StandaloneViewport
          range="this.removeEmptyHeadersFromRange(selectedItem.range)"
          columnWeights="selectedItem.columnWeights"
          canResizeColumns="this.canResizeDataViewColumns"
          onResizeColumns.bind="this.onResizeColumns"
          size="this.carouselLayout.contentRect"
        />
      </div>
    </div>
  </t>
</templates>
