{% if sections.vif is defined %}
<section>
    <h2>📈 Variance Inflation Factor (VIF) Analysis</h2>
    <p class="section-desc">
        The VIF table presents the variance inflation factors for each variable, helping to identify multicollinearity in your dataset.
    </p>

    {% set vif_data = sections.vif.data %}
    {% if vif_data and vif_data|length > 0 %}
        <div style="display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: 32px; align-items: stretch;">
            <!-- Table -->
            <div style="flex: 1 1 350px; min-width: 350px; max-width: 600px; display: flex; flex-direction: column; max-height: 700px;">
                <div style="width: 100%; margin-bottom: 16px;">
                    <h3 style="margin: 0 0 8px 0;">VIF Values Table</h3>
                    <p style="margin: 0 0 8px 0; color: #666; font-size: 0.95rem;">
                        The table below lists each feature variable and its corresponding VIF value.
                    </p>
                </div>
                <div style="flex: 1 1 auto; overflow-y: auto;">
                    <table class="vif-table" style="font-size: 0.95rem; width: 100%; min-width: 350px; border-collapse: collapse;">
                        <thead>
                            <tr>
                                <th style="border-left: 2px solid #ccc; border-right: 2px solid #ccc;">Feature Variable</th>
                                <th style="border-right: 2px solid #ccc;">VIF Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for idx in range(vif_data.feature | length) %}
                            <tr>
                                <td style="border-left: 2px solid #ccc; border-right: 2px solid #ccc;">
                                    {{ vif_data.feature[idx] }}
                                </td>
                                <td style="border-right: 2px solid #ccc;">
                                    {{ "%.3f"|format(vif_data.vif[idx]) if vif_data.vif[idx] is number else vif_data.vif[idx] }}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- Chart -->
            {% if sections.vif.chart and sections.vif.chart.image %}
            <div style="flex: 1 1 590px; min-width: 350px; max-width: 700px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; max-height: 700px;">
                <div style="width: 100%; margin-bottom: 16px;">
                    <h3 style="margin: 0 0 8px 0;">VIF Distribution Chart</h3>
                    <p style="margin: 0 0 8px 0; color: #666; font-size: 0.95rem;">
                        This chart visualizes the VIF values for each feature, making it easy to spot variables with high multicollinearity.
                    </p>
                </div>
                <img src="{{ sections.vif.chart.image }}" alt="Chart for VIF"
                    style="width: 100%; max-height: 500px; object-fit: contain; border-radius: 10px; border: 1px solid #e0e8f5; box-shadow: 2px 2px 8px #eee; display: block;">
            </div>
            {% endif %}
        </div>
    {% endif %}
</section>
{% endif %}