{% from "macros/tables.njk" import kv_table with context %}
<div class="panel-title">{{ t('performance.title') }}</div>

<div class="perf-metrics-row">
  <div class="perf-metric">
    <div class="perf-metric-label">{{ t('performance.total_execution') }}</div>
    <div class="perf-metric-value">{{ panelData.total }}<span class="perf-metric-unit">ms</span></div>
  </div>
  <div class="perf-metric">
    <div class="perf-metric-label">{{ t('performance.app_time') }}</div>
    <div class="perf-metric-value">{{ panelData.appTime }}<span class="perf-metric-unit">ms</span></div>
  </div>
  <div class="perf-metric">
    <div class="perf-metric-label">{{ t('performance.peak_memory') }}</div>
    <div class="perf-metric-value">{{ panelData.memoryMiB }}<span class="perf-metric-unit"> MiB</span></div>
  </div>
</div>

<div class="panel-section">
  <div class="panel-section-title">{{ t('performance.execution_timeline') }}</div>

  <div class="tl-threshold-row">
    {{ t('performance.threshold') }}
    <input type="number" class="tl-threshold-input" id="tl-threshold" value="0" min="0" max="{{ panelData.total }}">
     ms
    <span class="tl-threshold-hint">{{ t('performance.threshold_hint') }}</span>
  </div>

  <div class="tl-legend">
    <span class="tl-legend-item"><span class="tl-legend-dot" style="background:#C87A3C;"></span> {{ t('performance.application_legend') }}</span>
    {% if panelData.hasSqlTime %}<span class="tl-legend-item"><span class="tl-legend-dot" style="background:#2D6A4A;"></span> {{ t('performance.database_legend') }}</span>{% endif %}
  </div>

  <div class="tl-chart">
    {% if panelData.hasEvents %}
      {% for e in panelData.events %}
      <div class="tl-row">
        <div class="tl-name">{{ e.label }}</div>
        <div class="tl-track">
          <div class="tl-bar" style="width:{{ e.widthPct }}%;background:{{ e.color }};">
            <span class="tl-bar-label">{{ e.durationFormatted }}</span>
          </div>
        </div>
        <div class="tl-info">{{ e.durationFormatted }}</div>
      </div>
      {% endfor %}
    {% else %}
    <div class="tl-empty">{{ t('performance.no_timing_events') }}</div>
    {% endif %}
  </div>
</div>

<div class="panel-section">
  <div class="panel-section-title">{{ t('performance.process_info') }}</div>
  <div class="table-wrap">{{ kv_table(panelData.processInfo) }}</div>
</div>