<templates>
  <t t-name="o-spreadsheet-ColumnStatsPanel">
    <div class="o-column-stats-panel">
      <t t-if="this.store.hasSingleColumn">
        <Section>
          <div class="d-flex justify-content-between align-items-center o-panel-header mb-1">
            <span class="o-fw-bold w-100 o-column-stats-title" t-out="this.columnLabel"/>
            <span
              class="p-1 o-row-switcher"
              data-test-id="previous-column-button"
              title="Switch to previous column"
              t-on-click="this.store.selectPreviousColumn">
              <t t-call="o-spreadsheet-Icon.ANGLE_LEFT"/>
            </span>
            <span
              class="p-1 o-row-switcher"
              title="Switch to next column"
              data-test-id="next-column-button"
              t-on-click="this.store.selectNextColumn">
              <t t-call="o-spreadsheet-Icon.ANGLE_RIGHT"/>
            </span>
          </div>
          <div class="mt-3">
            <div class="o-sidePanel-label mb-1">Rows to ignore</div>
            <NumberInput
              value="this.store.ignoredRows"
              class="'o-ignored-rows-input'"
              min="0"
              onChange.bind="this.updateIgnoredRows"
            />
          </div>
        </Section>
        <SidePanelCollapsible title.translate="Data visualization" isInitiallyCollapsed="false">
          <t t-set-slot="content">
            <Section class="'pt-0'">
              <BadgeSelection
                choices="this.charts"
                onChange.bind="this.switchChart"
                selectedValue="this.state.currentChart"
              />
              <t t-if="this.shouldShowChart">
                <div class="o-column-stats-chart mx-2 mt-2">
                  <canvas class="w-100 h-100" t-ref="this.chartCanvasRef"/>
                </div>
              </t>
              <t t-else="">
                <div class="o-column-stats-no-data text-muted mt-4" t-out="this.chartErrorMessage"/>
              </t>
            </Section>
          </t>
        </SidePanelCollapsible>
        <SidePanelCollapsible title.translate="General statistics" isInitiallyCollapsed="false">
          <t t-set-slot="content">
            <Section class="'o-column-global-stats d-flex flex-column gap-2 pt-0'">
              <t t-foreach="this.store.statItems" t-as="stat" t-key="stat.name">
                <div class="o-column-stats-row d-flex justify-content-between">
                  <span class="text-muted" t-out="stat.name"/>
                  <span class="o-fw-bold" t-att-data-test-id="stat.name" t-out="stat.value"/>
                </div>
              </t>
            </Section>
          </t>
        </SidePanelCollapsible>
        <SidePanelCollapsible title.translate="Frequency" isInitiallyCollapsed="true">
          <t t-set-slot="content">
            <div class="mx-4 mb-2">
              <BadgeSelection
                choices="this.frequencyOrders"
                onChange.bind="this.switchFrequencyOrder"
                selectedValue="this.state.currentFrequencyOrder"
              />
            </div>
            <div class="o-column-global-stats d-flex flex-column mx-4 mb-2">
              <t t-foreach="this.valueFrequencies" t-as="value" t-key="value.value">
                <div
                  class="o-column-stats-row o-column-frequencies-row d-flex justify-content-between"
                  t-on-mouseenter="() => this.highlightFrequencyPositions(value.positions)"
                  t-on-mouseleave="() => this.clearHighlights()">
                  <span class="frequency-label text-muted" t-out="value.value"/>
                  <span class="frequency-value o-fw-bold" t-out="value.count"/>
                </div>
              </t>
            </div>
          </t>
        </SidePanelCollapsible>
      </t>
      <t t-else="">
        <div class="o-column-stats-empty text-muted p-4">
          Select a single column to view statistics.
        </div>
      </t>
    </div>
  </t>
</templates>
