<templates>
  <t t-name="o-spreadsheet-TopBar">
    <div
      class="o-spreadsheet-topbar d-flex flex-column user-select-none bg-white"
      t-on-click="this.props.onClick">
      <div
        t-if="!this.env.isSmall"
        class="o-topbar-top d-flex justify-content-between border-bottom">
        <!-- Menus -->
        <div class="o-topbar-topleft d-flex" t-ref="this.topBarTopRef">
          <t t-foreach="this.menus" t-as="menu" t-key="menu_index">
            <div
              t-if="menu.children.length !== 0"
              class="o-topbar-menu o-hoverable-button text-nowrap rounded"
              t-att-class="{'active': this.state.menuState.parentMenu and this.state.menuState.parentMenu.id === menu.id}"
              t-on-click="(ev) => this.toggleContextMenu(menu, ev)"
              t-on-mouseover="(ev) => this.onMenuMouseOver(menu, ev)"
              t-att-data-id="menu.id">
              <t t-out="this.getMenuName(menu)"/>
            </div>
          </t>
        </div>
        <div class="o-topbar-topright d-flex justify-content-end align-items-center">
          <div t-foreach="this.topbarComponents" t-as="comp" t-key="comp.id" class="px-1">
            <t t-component="comp.component"/>
          </div>
        </div>
      </div>
      <!-- Toolbar and Cell Content -->
      <div
        class="d-flex o-topbar-responsive"
        t-att-class="{'o-topbar-responsive': !this.env.model.getters.isReadonly()}"
        t-ref="this.toolBarContainerRef">
        <div
          class="o-topbar-toolbar d-flex flex-grow-1"
          t-att-class="{'flex-shrink-0': this.env.model.getters.isReadonly()}">
          <!-- Toolbar -->
          <div
            t-if="this.env.model.getters.isReadonly()"
            class="o-readonly-toolbar d-flex flex-grow-1 align-items-center text-muted">
            <span>
              <i class="oi" data-icon="visibility"/>
              Readonly Access
            </span>
          </div>
          <div
            t-else=""
            class="o-toolbar-tools d-flex flex-grow-1 align-items-center"
            t-ref="this.toolbarRef">
            <div
              class="d-flex h-100 o-named-range-selector-container align-items-center ms-2 me-1"
              t-ref="this.namedRangesRef"
              t-on-click.stop="">
              <NamedRangeSelector/>
              <div class="o-topbar-divider border-end"/>
            </div>
            <div
              class="d-flex tool-container h-100"
              t-foreach="this.toolsCategories"
              t-as="category"
              t-key="category"
              t-att-id="category">
              <t
                t-foreach="this.toolbarMenuRegistry.getEntries(category)"
                t-as="toolbarAction"
                t-key="toolbarAction_index">
                <t t-component="toolbarAction.component" t-props="toolbarAction.props"/>
              </t>
              <div t-if="this.showDivider(category_index)" class="o-topbar-divider border-end"/>
            </div>
            <div
              t-ref="this.moreToolsContainerRef"
              class="d-flex align-items-center flex-grow-1 me-auto more-tools-container">
              <span
                class="o-toolbar-button o-menu-item-button o-hoverable-button  me-2 px-1 py-2 more-tools"
                t-ref="this.moreToolsButtonRef"
                t-on-click.stop="this.toggleMoreTools">
                <t t-call="o-spreadsheet-Icon.SHORT_THIN_DRAG_HANDLE"/>
              </span>
            </div>
          </div>
        </div>
        <TopBarComposer t-if="!this.env.isSmall"/>
      </div>
      <div
        t-if="this.fingerprints.isEnabled"
        class="topbar-banner irregularity-map d-flex align-items-stretch justify-content-between border-top">
        <div
          t-on-click="() => this.fingerprints.disable()"
          role="button"
          title="This tool analyzes spreadsheet formulas for patterns and highlights inconsistencies. Irregularities may indicate potential errors in formula structures, references, or arguments. (Click to turn off)"
          class="d-flex align-items-center text-info px-3 text-nowrap">
          <span class="pe-2">
            <t t-call="o-spreadsheet-Icon.IRREGULARITY_MAP"/>
          </span>
          Irregularity map
        </div>
        <div
          class="ps-3 flex-fill d-flex justify-content-between align-items-center rounded-0 alert alert-info ps-0 py-1 my-0">
          <span class="d-flex align-items-center">
            This tool analyzes formulas for patterns and highlights inconsistencies. Irregularities
            may indicate potential errors in formula structures, references or arguments.
          </span>
          <div
            class="ps-3 btn o-button-link flex-shrink-0 py-0"
            t-on-click="() => this.fingerprints.disable()">
            Turn off
          </div>
        </div>
      </div>
      <div
        t-if="!this.env.model.getters.isAutomaticEvaluationEnabled()"
        class="topbar-banner manual-evaluation d-flex align-items-stretch justify-content-between border-top">
        <div class="d-flex align-items-center text-warning px-3 text-nowrap">
          <i class="oi me-2" data-icon="pause_circle"/>
          Manual calculation
        </div>
        <div
          class="ps-3 flex-fill d-flex justify-content-between align-items-center rounded-0 alert alert-warning ps-0 py-1 my-0">
          <span>
            Automatic evaluation is disabled. Press
            <div
              class="o-button-link d-inline"
              style="white-space-collapse: preserve;"
              t-on-click="() => this.env.model.dispatch('EVALUATE_CELLS')">
              here
            </div>
            or F9 to recalculate.
          </span>
          <div
            class="ps-3 btn o-button-link flex-shrink-0 py-0"
            t-on-click="() => this.env.model.dispatch('SET_AUTOMATIC_EVALUATION', { enabled: true })">
            Re-enable
          </div>
        </div>
      </div>
    </div>
    <MenuPopover
      t-if="this.state.menuState.isOpen"
      t-key="this.state.menuState.parentMenu.id"
      anchorRect="this.state.menuState.anchorRect"
      menuItems="this.state.menuState.menuItems"
      onClose="() => this.closeMenus()"
      onMenuClicked="() => this.props.onClick()"
      popoverPositioning="'bottom-left'"
      menuId="this.state.menuState.parentMenu.id"
      autoSelectFirstItem="this.state.menuState.autoSelectFirstItem"
      onKeyboardNavigation.bind="this.onKeyboardNavigation"
    />
    <Popover t-if="this.state.toolsPopoverState.isOpen" t-props="this.toolsPopoverProps">
      <div class="d-flex px-2 py-1 flex-wrap align-items-center">
        <t
          t-foreach="this.state.invisibleToolsCategories"
          t-as="category"
          t-key="category"
          t-att-id="category">
          <t
            t-foreach="this.toolbarMenuRegistry.getEntries(category)"
            t-as="toolbarAction"
            t-key="toolbarAction_index">
            <t t-component="toolbarAction.component" t-props="toolbarAction.props"/>
          </t>
          <div
            t-if="category_index &lt; this.state.invisibleToolsCategories.length-1"
            class="o-topbar-divider border-end"
          />
        </t>
      </div>
    </Popover>
  </t>
</templates>
