<templates>
  <t t-name="o-spreadsheet-TableStylePicker">
    <div class="o-table-style-picker d-flex flew-row justify-content-between ps-1 border rounded">
      <div
        class="d-flex flex-row overflow-hidden"
        t-att-class="this.props.type === 'pivot' ? 'o-pivot-previews' : 'o-table-previews ps-2'">
        <t t-foreach="this.getDisplayedTableStyles()" t-as="styleId" t-key="styleId">
          <TableStylePreview
            selected="styleId === this.props.tableConfig.styleId"
            tableConfig="this.props.tableConfig"
            tableStyle="this.props.tableStyles[styleId]"
            styleId="styleId"
            onClick="() => this.onStylePicked(styleId)"
            type="this.props.type"
          />
        </t>
      </div>
      <div
        class="o-table-style-picker-arrow d-flex align-items-center px-1 border-start"
        t-on-click.stop="this.onArrowButtonClick">
        <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
      </div>
    </div>
    <TableStylesPopover
      tableConfig="this.props.tableConfig"
      selectedStyleId="this.props.tableConfig.styleId"
      onStylePicked.bind="this.onStylePicked"
      popoverProps="this.state.popoverProps"
      closePopover.bind="this.closePopover"
      tableStyles="this.props.tableStyles"
      type="this.props.type"
    />
  </t>
</templates>
