<templates>
  <t t-name="o-spreadsheet-BottomBarSheet">
    <Ripple>
      <div
        class="o-sheet d-flex align-items-center user-select-none text-nowrap border-start border-end"
        tabindex="-1"
        composerFocusableElement="true"
        t-on-pointerdown="(ev) => this.onMouseDown(ev)"
        t-on-click="this.onClick"
        t-on-contextmenu="(ev) => this.onContextMenu(ev)"
        t-ref="this.sheetDivRef"
        t-key="this.sheetName"
        t-att-style="this.props.style"
        t-att-title="this.sheetName"
        t-att-data-id="this.props.sheetId"
        t-att-class="{active: this.isSheetActive}">
        <span t-if="this.isSheetLocked" class="me-1 lock-icon">
          <t t-call="o-spreadsheet-Icon.LOCK"/>
        </span>
        <span
          class="o-sheet-name"
          t-att-class="{'o-sheet-name-editable': this.state.isEditing }"
          t-ref="this.sheetNameRef"
          t-out="this.sheetName"
          t-on-pointerdown="(ev) => this.onMouseEventSheetName(ev)"
          t-on-click="(ev) => this.onMouseEventSheetName(ev)"
          t-on-dblclick="() => this.onDblClick()"
          t-on-focusout="() => this.onFocusOut()"
          t-on-keydown="(ev) => this.onKeyDown(ev)"
          t-att-contenteditable="this.state.isEditing ? 'plaintext-only': 'false'"
        />
        <span
          class="o-sheet-icon ms-1 rounded"
          tabindex="-1"
          t-ref="this.iconRef"
          t-on-click.stop="(ev) => this.onIconClick(ev)">
          <t t-call="o-spreadsheet-Icon.CARET_DOWN"/>
        </span>
        <div
          t-if="this.sheetColorStyle"
          class="o-sheet-color position-absolute"
          t-att-style="this.sheetColorStyle"
        />
      </div>
    </Ripple>
    <ColorPicker
      t-if="this.state.openedPicker"
      anchorRect="this.colorPickerAnchorRect"
      onColorPicked.bind="this.onColorPicked"
      currentColor="this.state.currentPickerColor"
    />
  </t>
</templates>
