{% load i18n static %}
<div class="slide-canvas slide-chart-metrics" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
    <div class="slide-chart-metrics__chart">
        <h2 class="slide-chart-metrics__chart-title">{{ slide.title }}</h2>
        <div class="slide-chart-metrics__chart-container">
            <div id="chart-metrics-{{ slide.id }}" style="width:100%;height:100%;"></div>
        </div>
    </div>

    <div class="slide-chart-metrics__sidebar">
        {% for metric in slide.content.sidebar_metrics %}
        <div class="slide-chart-metrics__metric" {% if metric.accent_color %}style="border-left-color:{{ metric.accent_color }}"{% endif %}>
            <div class="slide-chart-metrics__metric-label">{{ metric.label }}</div>
            <div class="slide-chart-metrics__metric-value">{{ metric.value }}</div>
            {% if metric.description %}
            <div class="slide-chart-metrics__metric-desc">{{ metric.description }}</div>
            {% endif %}
        </div>
        {% endfor %}

        {% if slide.content.key_insight %}
        <div style="margin-top:auto;padding:24px;background:var(--px-light);border-radius:var(--px-radius);">
            <div style="font:var(--px-label);text-transform:uppercase;color:var(--px-navy);margin-bottom:8px;">{% trans "Key Insight" %}</div>
            <div style="font:var(--px-body-sm);color:var(--px-body);">{{ slide.content.key_insight }}</div>
        </div>
        {% endif %}
    </div>

    <img src="{% static 'img/HH_R_H_Logo.png' %}" alt="" class="slide-logo--footer">

    {% if slide.content.chart_config %}
    <script>
        (function() {
            var cfg = {{ slide.content.chart_config|safe }};
            cfg.chart = cfg.chart || {};
            cfg.chart.fontFamily = 'Inter, sans-serif';
            cfg.chart.animations = { enabled: true };
            cfg.colors = cfg.colors || ['#005696', '#0EA5E9', '#14B8A6', '#F59E0B', '#FB7185', '#8B5CF6'];
            cfg.theme = { mode: 'light' };
            var el = document.getElementById('chart-metrics-{{ slide.id }}');
            if (el && typeof ApexCharts !== 'undefined') {
                new ApexCharts(el, cfg).render();
            }
        })();
    </script>
    {% endif %}
</div>