<templates>
  <t t-name="o-spreadsheet-TableStylesPopover">
    <Popover t-if="this.props.popoverProps" t-props="this.props.popoverProps">
      <div
        class="o-table-style-popover d-flex flex-column py-3"
        t-ref="this.tableStyleListRef"
        t-on-contextmenu.prevent="">
        <div class="d-flex o-notebook ps-4 mb-3">
          <div
            t-foreach="Object.keys(this.categories)"
            t-as="category"
            t-key="category"
            class="o-notebook-tab d-flex align-items-center border"
            t-att-class="{ 'selected': this.state.selectedCategory === category }"
            t-on-click="() => this.state.selectedCategory = category"
            t-att-data-id="category"
            t-out="this.categories[category_value]"
          />
        </div>
        <div
          class="d-flex flex-wrap px-4"
          t-att-class="this.props.type === 'pivot' ? 'o-pivot-previews' : 'o-table-previews'">
          <t t-foreach="this.displayedStyles" t-as="styleId" t-key="styleId">
            <TableStylePreview
              styleId="styleId"
              selected="styleId === this.props.selectedStyleId"
              tableConfig="this.props.tableConfig"
              tableStyle="this.props.tableStyles[styleId]"
              onClick="() => this.props.onStylePicked(styleId)"
              type="this.props.type"
            />
          </t>
          <div
            t-if="this.state.selectedCategory === 'custom'"
            class="o-new-table-style o-table-style-list-item o-table-style-popover-preview d-flex justify-content-center align-items-center"
            t-on-click="this.newTableStyle">
            +
          </div>
        </div>
      </div>
    </Popover>
  </t>
</templates>
