<templates>
  <t t-name="o-spreadsheet-CarouselPanel">
    <div class="o-carousel-panel h-100 overflow-auto">
      <Section title.translate="Carousel Title" class="'o-carousel-title'">
        <TextInput
          value="this.title?.text ?? ''"
          onChange.bind="this.updateTitleText"
          placeholder.translate="Add a Title"
          alwaysShowBorder="true"
          selectContentOnFocus="true"
        />
        <TextStyler
          style="this.title ?? {}"
          updateStyle.bind="this.updateTitleStyle"
          defaultStyle="this.DEFAULT_CAROUSEL_TITLE_STYLE"
          hasHorizontalAlign="false"
        />
      </Section>
      <div class="o-section pb-1 pt-0">
        <div class="o-section-title">Carousel Sections</div>
      </div>
      <div class="o-carousel-preview-list overflow-auto bg-white" t-ref="this.previewListRef">
        <t t-foreach="this.carouselItems" t-as="item" t-key="this.getItemId(item)">
          <div
            class="o-carousel-preview border-bottom pe-2 position-relative w-100 d-flex flex-column"
            t-att-class="{
              'o-dragging border-top': this.dragAndDrop.draggedItemId === this.getItemId(item),
              'o-selected': this.isCarouselItemActive(item)
            }"
            t-att-style="this.getPreviewDivStyle(item)">
            <div
              class="o-drag-handle h-100 position-absolute d-flex align-items-center o-button-icon ps-1 flex-shrink-0"
              t-on-pointerdown.stop.prevent="(ev) => this.onDragHandleMouseDown(item, ev)">
              <t t-call="o-spreadsheet-Icon.THIN_DRAG_HANDLE"/>
            </div>
            <div class="d-flex o-preview-content align-items-center justify-content-center">
              <div
                class="o-carousel-preview-icon ms-3 flex-shrink-0 d-flex align-items-center justify-content-center">
                <t t-call="{{this.getItemPreview(item)}}"/>
              </div>
              <div class="o-carousel-preview-title text-truncate ms-2">
                <TextInput
                  value="this.getItemTitle(item)"
                  onChange="(newName) => this.renameCarouselItem(item, newName)"
                  selectContentOnFocus="true"
                />
              </div>
              <div class="ms-auto"/>
              <div class="flex-shrink-0 d-flex me-1">
                <CogWheelMenu items="this.getCogWheelMenuItems(item)"/>
              </div>
            </div>
            <div class="ms-4 mb-2" t-if="item.type === 'carouselDataView'">
              <SelectionInput
                ranges="[this.getItemRangeString(item)]"
                hasSingleRange="true"
                required="true"
                onSelectionChanged.bind="this.onSelectionInputChanged"
                onSelectionConfirmed.bind="this.onSelectionInputConfirmed"
              />
            </div>
          </div>
        </t>
      </div>
      <Section class="'pt-0'">
        <div>
          <div
            class="o-button-link o-carousel-add-chart float-end d-flex align-items-center my-4"
            t-on-click="this.addNewChartToCarousel"
            t-ref="this.addChartButton"
            t-att-title="this.carouselAddChartInfoMessage">
            + Add chart
          </div>
          <div
            t-if="!this.hasDataView"
            class="o-button-link o-carousel-add-data-view float-end my-4 me-4"
            t-on-click="this.addDataViewToCarousel">
            + Add data view
          </div>
        </div>
      </Section>
    </div>
    <ChartTypePickerPopover
      t-if="this.state.popoverProps"
      popoverProps="this.state.popoverProps"
      onClose.bind="this.closePopover"
      onSelectSubType.bind="this.onSelectChartType"
      parentRef="this.addChartButton"
      supportedTypes="this.supportedChartTypes"
    />
  </t>
</templates>
