{% load i18n static %}
<div class="slide-canvas slide-chart" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
    <div class="slide-chart__header">
        <h1 class="slide-chart__title">{{ slide.title }}</h1>
        {% if slide.subtitle %}
        <p class="slide-chart__subtitle">{{ slide.subtitle }}</p>
        {% endif %}
    </div>

    <div class="slide-chart__container">
        <div id="chart-{{ slide.id }}" class="slide-chart__apex"></div>
    </div>

    {% if slide.content.footer_note %}
    <div style="position:absolute;bottom:28px;left:80px;font:var(--px-caption);color:var(--px-light-muted);">
        {{ slide.content.footer_note }}
    </div>
    {% endif %}

    <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-{{ slide.id }}');
            if (el && typeof ApexCharts !== 'undefined') {
                new ApexCharts(el, cfg).render();
            }
        })();
    </script>
    {% endif %}
</div>