{% for group, issues in issues_by_group.items() %}
<div id="{{ group | replace(' ', '_') }}" role="tabpanel" class="m-4 mb-4{% if loop.index > 1 %} hidden{% endif %}">
    <div class="p-3 bg-amber-100/40 rounded-sm w-full flex align-middle">
        <div class="text-amber-100 mt-1.5">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
            </svg>
        </div>
        <div class="ml-2 text-amber-100 text-sm">
            {% if issues[0].__class__.__name__ == "PerformanceIssue" %}
            <p>
                We found some data slices in your dataset on which your model performance is lower than average.
                Performance bias may happen for different reasons:
            <ul class="list-disc ml-4 my-1">
                <li>Not enough examples in the low-performing data slice in the training set</li>
                <li>Wrong labels in the training set in the low-performing data slice</li>
                <li>Drift between your training set and test set</li>
            </ul>
            </p>
            {% elif issues[0].__class__.__name__ == "RobustnessIssue" %}
            <p>
                Your model seems to be sensitive to small perturbations in the input data. These perturbations can
                include adding typos, changing word order, or turning text into uppercase or lowercase. This happens
                when:
            <ul class="list-disc ml-4 my-1">
                <li>There is not enough diversity in the training data</li>
                <li>Overreliance on spurious correlations like the presence of specific word</li>
                <li>Use of complex models with large number of parameters that tend to overfit the training data</li>
            </ul>
            </p>
            {% elif issues[0].__class__.__name__ == "OverconfidenceIssue" %}
            <p>
                We found some data slices in your dataset containing significant number of overconfident predictions.
                Overconfident predictions are rows that are incorrect but are predicted with high probabilities or
                confidence scores. This happens when:
            <ul class="list-disc ml-4 my-1">
                <li>There are not enough examples in the overconfident data slice in the training set</li>
                <li>Wrongly labeled examples in the training set in the overconfident data slice</li>
                <li>For imbalanced datasets, the model may assign high probabilities to predictions of the majority
                    class</li>
            </ul>
            </p>
            {% elif issues[0].__class__.__name__ == "UnderconfidenceIssue" %}
            <p>
                We found some data slices in your dataset containing significant number of underconfident predictions.
                Underconfident predictions refer to situations where the predicted label has a probability that is
                very close to the probability of the next highest probability label. This happens when:
            <ul class="list-disc ml-4 my-1">
                <li>There are not enough examples in the training set for the underconfident data slice</li>
                <li>The model is too simple and struggles to capture the complexity of the underlying data</li>
                <li>The underconfident data slice contains inherent noise or overlapping feature distributions</li>
            </ul>
            </p>
            {% elif issues[0].__class__.__name__ == "EthicalIssue" %}
            <p>
                Your model seems to be sensitive to gender, ethnic, or religion based perturbations in the input data.
                These perturbations can include switching some words from feminine to masculine, countries or
                nationalities.
                This happens when:
            <ul class="list-disc ml-4 my-1">
                <li>Underrepresentation of certain demographic groups in the training data</li>
                <li>Data is reflecting some structural biases and societal prejudices</li>
                <li>Use of complex models with large number of parameters that tend to overfit the training data</li>
            </ul>
            </p>
            {% elif issues[0].__class__.__name__ == "DataLeakageIssue" %}
            <p>
                Your model seems to present some data leakage. The model provides different results depending on whether
                it is computing on a single data point or the entire dataset. This happens when:
            <ul class="list-disc ml-4 my-1">
                <li>Preprocessing steps, such as scaling, missing value imputation, or outlier handling, are fitted
                    inside the prediction pipeline</li>
                <li>Train-test splitting is done after preprocessing or feature selection</li>
            </ul>
            </p>
            {% elif issues[0].__class__.__name__ == "StochasticityIssue" %}
            <p>
                Your model seems to present some stochastic behaviour. The model provides different results at each
                execution. This may happen when some stochastic training process is included in the prediction pipeline.
            </p>
            {% elif issues[0].__class__.__name__ == "LLMToxicityIssue" %}
            <p>
                Your model seems to exhibit offensive behaviour when we use adversarial “Do Anything Now” (DAN)
                prompts.
            </p>
            {% else %}
            <p>Found issues for {{ issues[0].group }}</p>
            {% endif %}
        </div>
    </div>

    <div class="flex items-center space-x-1">
        <h2 class="uppercase my-4 mr-2 font-medium">Issues</h2>
        {% if num_major_issues[group] > 0 %}
        <span class="text-xs border rounded px-1 uppercase text-red-400 border-red-400">{{num_major_issues[group]}}
            major</span>
        {% endif %}
        {% if num_medium_issues[group] > 0 %}
        <span class="text-xs border rounded px-1 uppercase text-amber-200 border-amber-200">{{num_medium_issues[group]}}
            medium</span>
        {% endif %}
    </div>

    {% include "_issues_table.html" %}
</div>
{% endfor %}

{% if issues|length == 0 %}
<div class="m-4">
    <div class="p-3 bg-green-100/40 rounded-sm w-full flex align-middle">
        <p class="ml-2 my-1 text-green-50 text-sm">
            We found no issues in your model. Good job!
        </p>
    </div>
</div>
{% endif %}