{% extends "base.html" %}

{% block chart_libs %}{% include "_chartjs.html" %}{% include "_chart_ready.html" %}{% endblock %}

{% block content %}
<div class="chart-container">
    <h2>Correlation Analysis</h2>
    {# scatter is the generic fallback template — no recipe uses it today. #}
    {# In fragment mode we don't have a server-side scatter
       implementation, so show the placeholder rather than a blank canvas. #}
    {% if render_mode == 'fragment' and not fragment_scripts_enabled %}
        <div class="chart-server-svg">{{ server_svgs.get('main', '<div class="chart-unavailable">Scatter chart unavailable in PDF</div>') | safe }}</div>
    {% else %}
        <div class="chart-wrapper"><canvas id="{{ fragment_scope_class }}-scatterChart"></canvas></div>
    {% endif %}
</div>

<div class="table-container">
    <h2>Data Table</h2>
    <table>
        <thead>
            <tr>
                {% for header in table_data.headers %}
                <th>{{ header }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in table_data.rows %}
            <tr>
                {% for cell in row.values() %}
                <td>{{ cell }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if render_mode != 'fragment' or fragment_scripts_enabled %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('{{ fragment_scope_class }}-scatterChart').getContext('2d');
    const chartData = {{ chart_data_json.main | safe }};

    fsReportNewChart(ctx, {
        type: 'scatter',
        data: chartData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: '{{ slide_title }}',
                    font: {
                        size: 16
                    }
                },
                legend: {
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Y Axis'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'X Axis'
                    }
                }
            }
        }
    });
});
</script>
{% endif %}
{% endblock %}