{% extends "base.html" %}

{% block title %}Robustness Report - {{ data.model_name }}{% endblock %}

{% block content %}
    <section id="overview">
        <h2>Overview</h2>

        <div id="metrics-overview">
            <div class="row">
                <div class="col-md-3">
                    <div class="metric-card">
                        <h5>Robustness Score</h5>
                        <p class="metric-value {{ 'metric-good' if data.metrics.robustness_score >= 0.7 else 'metric-bad' }}">
                            {{ data.metrics.robustness_score | format_number(3) }}
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="metric-card">
                        <h5>Base Score</h5>
                        <p class="metric-value">
                            {{ data.metrics.base_score | format_number(3) }}
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="metric-card">
                        <h5>Raw Impact</h5>
                        <p class="metric-value {{ 'metric-good' if data.metrics.avg_raw_impact <= 0.1 else 'metric-bad' }}">
                            {{ data.metrics.avg_raw_impact | format_percentage(2) }}
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="metric-card">
                        <h5>Quantile Impact</h5>
                        <p class="metric-value {{ 'metric-good' if data.metrics.avg_quantile_impact <= 0.1 else 'metric-bad' }}">
                            {{ data.metrics.avg_quantile_impact | format_percentage(2) }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-top: 20px; padding: 15px; background: #e8f4f8; border-left: 4px solid #3498db; border-radius: 4px;">
            <p style="margin: 0;">
                <strong>Interpretation:</strong>
                {% if data.metrics.robustness_score >= 0.8 %}
                    Excellent robustness! The model shows strong resistance to perturbations.
                {% elif data.metrics.robustness_score >= 0.6 %}
                    Good robustness. The model is reasonably stable under perturbations.
                {% else %}
                    Low robustness. The model is sensitive to input perturbations and may require improvement.
                {% endif %}
            </p>
        </div>
    </section>

    {% if include_charts %}
        <section id="perturbation-analysis">
            <h2>Perturbation Analysis</h2>

            <div class="chart-container" style="height: 500px;">
                <canvas id="perturbation-chart"></canvas>
            </div>

            <div style="margin-top: 20px;">
                <h3>Analysis</h3>
                <ul>
                    <li><strong>Raw Perturbations:</strong> Direct noise added to feature values</li>
                    <li><strong>Quantile Perturbations:</strong> Perturbations based on feature distributions</li>
                    <li><strong>Baseline:</strong> Original model performance without perturbations</li>
                </ul>

                {% if data.perturbation_results_raw %}
                    <p>
                        At the highest perturbation level ({{ data.perturbation_results_raw[-1].level }}),
                        the raw perturbation mean score was
                        <strong>{{ data.perturbation_results_raw[-1].mean_score | format_number(3) }}</strong>,
                        representing a
                        <strong>{{ data.perturbation_results_raw[-1].impact | format_percentage(2) }}</strong>
                        impact.
                    </p>
                {% endif %}
            </div>
        </section>

        {% if data.feature_importance and data.feature_importance | length > 0 %}
            <section id="feature-importance">
                <h2>Feature Importance</h2>

                <div class="chart-container" style="height: 500px;">
                    <canvas id="feature-importance-chart"></canvas>
                </div>

                <div style="margin-top: 20px;">
                    <h3>Top Features</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>Rank</th>
                                <th>Feature</th>
                                <th>Importance</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for feature in data.feature_importance[:10] %}
                                <tr>
                                    <td>{{ feature.rank }}</td>
                                    <td>{{ feature.feature_name }}</td>
                                    <td>{{ feature.importance | format_number(4) }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        {% endif %}
    {% endif %}

    <section id="detailed-results">
        <h2>Detailed Results</h2>

        {% if data.perturbation_results_raw %}
            <h3>Raw Perturbation Results</h3>
            <table>
                <thead>
                    <tr>
                        <th>Level</th>
                        <th>Mean Score</th>
                        <th>Worst Score</th>
                        <th>Impact</th>
                        <th>Samples</th>
                    </tr>
                </thead>
                <tbody>
                    {% for result in data.perturbation_results_raw %}
                        <tr>
                            <td>{{ result.level }}</td>
                            <td>{{ result.mean_score | format_number(4) }}</td>
                            <td>{{ result.worst_score | format_number(4) if result.worst_score else 'N/A' }}</td>
                            <td class="{{ 'metric-good' if result.impact <= 0.1 else 'metric-bad' }}">
                                {{ result.impact | format_percentage(2) }}
                            </td>
                            <td>{{ result.num_samples }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}

        {% if data.perturbation_results_quantile %}
            <h3>Quantile Perturbation Results</h3>
            <table>
                <thead>
                    <tr>
                        <th>Level</th>
                        <th>Mean Score</th>
                        <th>Worst Score</th>
                        <th>Impact</th>
                        <th>Samples</th>
                    </tr>
                </thead>
                <tbody>
                    {% for result in data.perturbation_results_quantile %}
                        <tr>
                            <td>{{ result.level }}</td>
                            <td>{{ result.mean_score | format_number(4) }}</td>
                            <td>{{ result.worst_score | format_number(4) if result.worst_score else 'N/A' }}</td>
                            <td class="{{ 'metric-good' if result.impact <= 0.1 else 'metric-bad' }}">
                                {{ result.impact | format_percentage(2) }}
                            </td>
                            <td>{{ result.num_samples }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </section>

    {% if data.test_config %}
        <section id="test-configuration">
            <h2>Test Configuration</h2>
            <table>
                <tbody>
                    {% for key, value in data.test_config.items() %}
                        <tr>
                            <th>{{ key | format_metric_name }}</th>
                            <td>{{ value }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </section>
    {% endif %}
{% endblock %}

{% block extra_js %}
    {% if include_charts %}
        <script src="/assets/js/chart-utils.js"></script>
        <script src="/assets/js/robustness-charts.js"></script>
    {% endif %}
{% endblock %}