<templates>
  <t t-name="o-spreadsheet-TableStylePreview">
    <div
      class="o-table-style-list-item position-relative"
      t-att-class="{ 'selected': this.props.selected }"
      t-att-data-id="this.props.styleId"
      t-att-title="this.styleName"
      t-on-click="this.props.onClick"
      t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)">
      <div class="o-table-preview">
        <canvas t-ref="this.canvasRef" class="w-100 h-100 os-theme-dependant"/>
      </div>
      <div
        class="o-table-style-edit-button position-absolute d-none bg-white border"
        t-if="this.isStyleEditable"
        t-on-click="this.editTableStyle"
        title="Edit custom table style">
        <t t-call="o-spreadsheet-Icon.EDIT"/>
      </div>
    </div>
    <MenuPopover
      t-if="this.menu.isOpen"
      menuItems="this.menu.menuItems"
      anchorRect="this.menu.anchorRect"
      onClose.bind="this.closeMenu"
    />
  </t>
</templates>
