<templates>
  <t t-name="o-spreadsheet-FunctionDescriptionProvider">
    <div
      class="o-formula-assistant-container shadow"
      tabindex="-1"
      t-on-pointerdown=""
      t-on-pointerup.stop=""
      t-on-keydown.stop=""
      t-on-click.stop="">
      <t t-set="context" t-value="this.getContext()"/>
      <div class="o-formula-assistant bg-white" t-if="context.functionDescription.name">
        <div class="o-formula-assistant-head d-flex flex-row justify-content-between">
          <div>
            <t t-foreach="this.formulaHeaderContent" t-as="part" t-key="part_index">
              <span
                t-out="part.content"
                t-att-class="part.focused ? 'o-formula-assistant-focus' : ''"
              />
            </t>
          </div>
          <div
            class="collapsor px-2 d-flex align-items-center rounded"
            t-att-class="this.state.isCollapsed ? 'collapsed' : ''"
            t-on-pointerdown.prevent=""
            t-on-click="() => this.toggle()">
            <span class="collapsor-arrow d-inline-block">
              <t t-call="o-spreadsheet-Icon.ANGLE_DOWN"/>
            </span>
          </div>
        </div>

        <Collapse isCollapsed="this.state.isCollapsed">
          <div class="o-formula-assistant-core pb-3 m-3 border-bottom">
            <div class="o-formula-assistant-gray">ABOUT</div>
            <div t-out="context.functionDescription.description"/>
          </div>

          <t
            t-set="firstRepeatableGroupOptional"
            t-value="context.functionDescription.args.some(arg => arg.repeating and arg.optional)"
          />

          <t t-foreach="context.functionDescription.args" t-as="arg" t-key="arg.name">
            <div
              class="o-formula-assistant-arg p-3 pt-0 display-flex flex-column"
              t-att-class="{'o-formula-assistant-gray': context.argsToFocus.length > 0}">
              <div
                t-att-class="{'o-formula-assistant-focus': context.argsToFocus.includes(arg_index)}">
                <span t-if="arg.repeating">
                  <span t-out="arg.name + (context.repeatingArgGroupIndex + 1)"/>
                </span>
                <span t-else="">
                  <span t-out="arg.name"/>
                </span>
                <span
                  t-if="arg.optional || arg.default || (arg.repeating and (firstRepeatableGroupOptional or context.repeatingArgGroupIndex > 0))">&#xA0;- [optional]&#xA0;</span>
                <span t-if="arg.default">
                  <span>default:&#xA0;</span>
                  <t t-out="arg.defaultValue"/>
                </span>
              </div>
              <div class="o-formula-assistant-arg-description" t-out="arg.description"/>
            </div>
          </t>
        </Collapse>
      </div>
    </div>
  </t>
</templates>
