<tr class="gsk-issue text-sm group peer text-left cursor-pointer hover:bg-zinc-700">
    {% if issue.slicing_fn or "domain" in issue.meta %}
    <td class="p-3">
        {% if "domain" in issue.meta %}
        <span class="mono text-blue-300">
            {{ issue.meta.domain }}
        </span>
        {% endif %}
        {% if issue.slicing_fn %}
        <code class="mono text-blue-300">
        {{ issue.slicing_fn }}
        </code>
        {% endif %}
    </td>
    {% endif %}

    {% if issue.transformation_fn %}
    <td class="p-3">
        <span>{{ issue.transformation_fn }}</span>
    </td>
    {% endif %}

    {% if "metric" in issue.meta %}
    <td class="p-3">
        <span>{{ issue.meta.metric }} = {{ issue.meta.metric_value|format_metric }}</span>
        {% if "metric_reference_value" in issue.meta %}
        <span class="text-gray-400">
            (Global = {{ issue.meta.metric_reference_value|format_metric }})
        </span>
        {% endif %}
    </td>
    {% endif %}
    {% if "deviation" in issue.meta %}
    <td class="p-3">        
        <span class="{% if issue.is_major %}text-red-400{% elif issue.is_medium %}text-amber-200{% else %}text-blue-200{% endif %}">
            {{ issue.meta.deviation }}
        </span>
    </td>
    {% endif %}
    {% if "slice_size" in issue.meta %}
    <td class="p-3">
        <span class="text-gray-400">
            {{ issue.meta.slice_size }} samples affected<br>
            ({{ (issue.meta.slice_size / (issue.dataset|length) * 100)|round(1) }}% of dataset)
        </span>
        {% endif %}
    <td class="p-3 text-xs text-right space-x-1">
        <a href="#"
            class="gsk-issue-detail-btn inline-block group-[.open]:hidden border border-zinc-100/50 text-zinc-100/90 hover:bg-zinc-500 hover:border-zinc-500 hover:text-white px-2 py-0.5 rounded-sm">Show details</a>
        <a href="#"
            class="hidden group-[.open]:inline-block gsk-issue-detail-btn border border-zinc-500 text-zinc-100/90 bg-zinc-500 hover:bg-zinc-400 hover:text-white px-2 py-0.5 rounded-sm">Hide details</a>
    </td>
</tr>
<tr class="gsk-issue-detail text-left hidden  peer-[.open]:table-row border-b border-zinc-500 bg-zinc-700">
    <td colspan="1000" class="p-3">
        {% if issue.description %}
        <h4 class="font-bold text-sm">Description</h4>
        {{ issue.description }}
        {% endif %}

        {% if issue.examples(3)|length %}
        <h4 class="font-bold text-sm mt-4">Examples</h4>
        <div class="text-white text-sm overflow-scroll">
            {{ issue.examples(issue.meta.num_examples if "num_examples" in issue.meta else 3).to_html(notebook=True,
            index=not issue.meta.hide_index if "hide_index" in issue.meta
            else True)|replace("\\n", "<br>")|safe }}
        </div>
        {% endif %}

        {% if "p_value" in issue.meta and issue.meta["p_value"] is not none %}
        <h4 class="font-bold text-sm mt-4">Significance</h4>
        <p class="text-sm my-2">
            The hypothesis that the <em>{{ issue.meta.metric }}</em> on the data slice was different with respect
            to the rest of the data was asserted with p-value = {{ issue.meta.p_value|format_metric }}.
        </p>
        {% endif %}

        {% if issue.taxonomy %}
        <h4 class="font-bold text-sm mt-4">Taxonomy</h4>
        {% for tag in issue.taxonomy %}
        <span class="inline-block bg-blue-300/25 text-zinc-100 px-2 py-0.5 rounded-sm text-sm mr-1 my-2">
            {{ tag }}
        </span>
        {% endfor %}
        {% endif %}
    </td>
</tr>