<templates>
  <t t-name="o-spreadsheet-BorderEditorWidget">
    <div
      class="d-flex position-relative"
      t-att-class="{'o-disabled': this.env.model.getters.isCurrentSheetLocked()}"
      title="Borders">
      <span
        t-ref="this.borderEditorButtonRef"
        t-on-click.stop="this.toggleBorderEditor"
        t-att-class="this.props.class ? this.props.class : ''"
        t-att-disabled="this.props.disabled">
        <span t-att-style="this.iconStyle">
          <t t-call="o-spreadsheet-Icon.BORDERS"/>
        </span>
      </span>
      <BorderEditor
        t-if="this.isActive"
        onBorderColorPicked.bind="this.onBorderColorPicked"
        onBorderStylePicked.bind="this.onBorderStylePicked"
        onBorderPositionPicked.bind="this.onBorderPositionPicked"
        currentBorderColor="this.state.currentColor"
        currentBorderStyle="this.state.currentStyle"
        currentBorderPosition="this.state.currentPosition"
        maxHeight="this.dropdownMaxHeight"
        anchorRect="this.borderEditorAnchorRect"
      />
    </div>
  </t>
</templates>
