<templates>
  <t t-name="o-spreadsheet-PerfProfilePanel">
    <div class="o-perf-profile-panel">
      <t t-if="!this.perfProfile">
        <Section>
          <div class="d-flex justify-content-center mt-3">
            <button class="o-button primary" t-on-click="this.startProfiling">
              Analyze performance
            </button>
          </div>
          <small class="text-muted d-flex justify-content-center mt-2">
            This may take a while.
          </small>
        </Section>
      </t>
      <t t-else="">
        <Section>
          <div class="d-flex flex-column gap-1">
            <div class="d-flex justify-content-center mb-3">
              <button class="o-button" t-on-click="this.startProfiling">
                <div class="d-flex justify-content-center align-content-center">
                  <i class="oi me-1" data-icon="refresh"/>
                  Re-analyze
                </div>
              </button>
            </div>
            <div class="d-flex justify-content-between">
              <span class="text-muted">Total time</span>
              <span class="fw-bold" t-out="this.formatTime(this.perfProfile.totalTime)"/>
            </div>
            <div class="d-flex justify-content-between">
              <span class="text-muted">Cells</span>
              <span
                t-out="this.humanize(this.perfProfile.totalCells)"
                t-att-title="this.perfProfile.totalCells"
              />
            </div>
            <div class="d-flex justify-content-between">
              <span class="text-muted">Function calls</span>
              <span
                t-out="this.humanize(this.perfProfile.totalFunctionCalls)"
                t-att-title="this.perfProfile.totalFunctionCalls"
              />
            </div>
          </div>
        </Section>
        <Section>
          <div class="d-flex flex-column gap-1">
            <t t-foreach="this.perfProfile.entries.slice(0, 500)" t-as="entry" t-key="entry_index">
              <t t-if="entry.time > 0">
                <div
                  class="o-perf-range-entry position-relative overflow-hidden rounded"
                  t-att-class="{ 'o-perf-entry-selected': this.isSelected(entry_index) }"
                  t-on-click="() => this.selectEntry(entry_index)">
                  <div
                    class="o-perf-bar position-absolute top-0 start-0 bottom-0"
                    t-attf-style="width: {{ this.barWidth(entry) }}%"
                  />
                  <div
                    class="position-relative d-flex justify-content-between py-1 px-2 text-nowrap">
                    <span class="text-truncate me-2">
                      <t t-out="entry.functionName"/>
                      <small class="text-muted ms-1" t-out="this.stringifyRange(entry)"/>
                    </span>
                    <small class="flex-shrink-0 text-muted">
                      <t t-out="this.formatTime(entry.time)"/>
                      (
                      <t t-out="this.formatPercent(entry.time)"/>
                      )
                    </small>
                  </div>
                </div>
              </t>
            </t>
          </div>
        </Section>
      </t>
    </div>
  </t>
</templates>
