<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
<link rel="stylesheet" href="{{ base_path | safe }}css/style.css">
</head>
<body>
<div class="page-wrapper">
{% include "_sidebar.html" %}
<main class="main-content">
{# Add Hamburger Button (visible on mobile) #}
<button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle sidebar">
<span></span>
<span></span>
<span></span>
</button>
<div class="container">
<button class="theme-toggle" aria-label="Toggle theme" title="Toggle theme">
<svg class="dark-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/>
</svg>
<svg class="light-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0 .996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
</svg>
</button>
<div class="header">
<div class="title-section">
<h1 class="chart-title">{{ title }}</h1>
{% if description %}
<div class="metric-description">
<p>{{ description }}</p>
</div>
{% endif %}
<div class="chart-subtitle">
<div class="metadata-line">
<ul class="metadata-list">
{% if config.runtime %}<li><span class="key">runtime:</span><span class="value">{{ config.runtime }}</span></li>{% endif %}
{% if config.architecture %}<li><span class="key">architecture:</span><span class="value">{{ config.architecture }}</span></li>{% endif %}
<li><span class="key">memory:</span><span class="value">{{ config.memory_size | default(value=128) }} MB</span></li>
<li><span class="key">concurrency:</span><span class="value">{{ config.concurrent_invocations }}</span></li>
<li><span class="key">runs:</span><span class="value">{{ config.number }}</span></li>
<li><span class="key">timestamp:</span><span class="value">{{ config.timestamp | truncate(length=19, end="") }}</span></li>
</ul>
</div>
{% if config.environment and config.environment | length > 0 %}
<div class="env-section">
<span class="env-title">environment:</span>
<ul class="env-list">{% for env in config.environment %}
<li><span class="env-key">{{ env.key }}:</span><span class="env-value">{{ env.value }}</span></li>{% endfor %}
</ul>
</div>{% endif %}
</div>
</div>
{% if current_subgroup != "all" %}
<nav class="nav">
<div class="nav-group">
<div class="nav-group-label">Cold Start</div>
<div class="nav-group-links">
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/cold-start-init/{{link_suffix}}" class="nav-link {% if page_type == 'cold_init' %}active{% endif %}" >Init Duration</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/cold-start-server/{{link_suffix}}" class="nav-link {% if page_type == 'cold_server' %}active{% endif %}" >Server Duration</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/cold-start-extension-overhead/{{link_suffix}}" class="nav-link {% if page_type == 'cold_extension_overhead' %}active{% endif %}" >Extension Overhead</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/cold-start-response-latency/{{link_suffix}}" class="nav-link {% if page_type == 'cold_start_response_latency' %}active{% endif %}" >Response Latency</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/cold-start-response-duration/{{link_suffix}}" class="nav-link {% if page_type == 'cold_start_response_duration' %}active{% endif %}" >Response Duration</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/cold-start-runtime-overhead/{{link_suffix}}" class="nav-link {% if page_type == 'cold_start_runtime_overhead' %}active{% endif %}" >Runtime Overhead</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/cold-start-runtime-done-duration/{{link_suffix}}" class="nav-link {% if page_type == 'cold_start_runtime_done_duration' %}active{% endif %}" >Runtime Done Duration</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/cold-start-memory-usage/{{link_suffix}}" class="nav-link {% if page_type == 'cold_start_memory' %}active{% endif %}" >Memory Usage</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/cold-start-produced-bytes/{{link_suffix}}" class="nav-link {% if page_type == 'cold_start_produced_bytes' %}active{% endif %}" >Produced Bytes</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/cold-start-total-duration/{{link_suffix}}" class="nav-link {% if page_type == 'cold_total_duration' %}active{% endif %}" >Total Cold Start Duration</a>
</div>
</div>
<div class="nav-group">
<div class="nav-group-label">Warm Start</div>
<div class="nav-group-links">
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/warm-start-client-duration/{{link_suffix}}" class="nav-link {% if page_type == 'warm_start_client_duration' %}active{% endif %}" >Client Duration</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/warm-start-server-duration/{{link_suffix}}" class="nav-link {% if page_type == 'warm_start_server_duration' %}active{% endif %}" >Server Duration</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/warm-start-extension-overhead/{{link_suffix}}" class="nav-link {% if page_type == 'warm_start_extension_overhead' %}active{% endif %}" >Extension Overhead</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/warm-start-response-latency/{{link_suffix}}" class="nav-link {% if page_type == 'warm_start_response_latency' %}active{% endif %}" >Response Latency</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/warm-start-response-duration/{{link_suffix}}" class="nav-link {% if page_type == 'warm_start_response_duration' %}active{% endif %}" >Response Duration</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/warm-start-runtime-overhead/{{link_suffix}}" class="nav-link {% if page_type == 'warm_start_runtime_overhead' %}active{% endif %}" >Runtime Overhead</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/warm-start-runtime-done-duration/{{link_suffix}}" class="nav-link {% if page_type == 'warm_start_runtime_done_duration' %}active{% endif %}" >Runtime Done Duration</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/warm-start-memory-usage/{{link_suffix}}" class="nav-link {% if page_type == 'warm_start_memory' %}active{% endif %}" >Memory Usage</a>
<a href="{{ base_path | safe }}{{ current_group }}/{{ current_subgroup }}/warm-start-produced-bytes/{{link_suffix}}" class="nav-link {% if page_type == 'warm_start_produced_bytes' %}active{% endif %}" >Produced Bytes</a>
</div>
</div>
</nav>
{% endif %}
</div>
<div class="chart-container" id="chart_bar"></div>
<div class="chart-container" id="chart_time"></div>
</div>
</main>
</div>
<!-- Set navigation globals for JS -->
<script>
window.basePath = "{{ base_path | safe }}";
window.currentChartType = "{{ kebab_name }}";
window.linkSuffix = "{{ link_suffix }}";
</script>
<!-- Load chart data for this page -->
<script src="chart_data.js"></script>
<!-- Load consolidated JavaScript library (contains all chart logic) -->
<script src="{{ base_path | safe }}js/lib.js"></script>
</body>
</html>