<templates>
  <t t-name="o-spreadsheet-SmallBottomBar">
    <div class="o-spreadsheet-small-bottom-bar o-two-columns d-flex flex-column overflow-hidden">
      <t t-if="this.menuState.isOpen">
        <RibbonMenu onClose="() => this.menuState.isOpen=false"/>
      </t>
      <t t-else="">
        <div class="o-small-composer px-2 py-2 position-relative bg-white border">
          <div class="w-100" t-ref="this.composerRef">
            <Composer t-props="this.composerProps"/>
            <span
              t-if="this.showFxIcon"
              class="position-absolute top-50 translate-middle-y ps-2 pe-none">
              <t t-call="o-spreadsheet-Icon.FX_SVG"/>
            </span>
          </div>
          <span
            class="align-items-center d-flex justify-content-center o-selection-button"
            title="confirm edition"
            t-if="this.focus !== 'inactive'"
            t-on-click="() => this.composerStore.stopEdition()">
            <span class="d-flex">
              <t t-call="o-spreadsheet-Icon.CHECK"/>
            </span>
          </span>
        </div>
        <div class="d-flex flex-row mb-1" t-if="this.focus !== 'inactive'">
          <div
            t-foreach="this.symbols"
            t-as="symbol"
            t-key="symbol_index"
            class="o-spreadsheet-editor-symbol w-100 d-flex justify-content-center align-items-center mx-1"
            t-out="symbol"
            tabindex="-1"
            t-att-title="symbol"
            t-on-click="() => this.insertSymbol(symbol)"
            composerFocusableElement="true"
          />
        </div>
        <div class="d-flex flex-fill align-items-center bottom-bar-menu border-top border-bottom">
          <Ripple>
            <div class="py-1 px-1 mx-2 ribbon-toggler o-icon" t-on-click="this.toggleRibbon">
              <i class="oi oi-filled" data-icon="settings_f"/>
            </div>
          </Ripple>
          <BottomBar onClick="this.props.onClick"/>
        </div>
      </t>
    </div>
  </t>
</templates>
