<tr class="gsk-issue text-sm group peer text-left cursor-pointer hover:bg-zinc-700">
    <td class="p-3">
        <code class="mono text-blue-300">
        {{issue.domain|replace("&", "<br>")|safe}}
    </code>
    </td>
    <td class="p-3">
        {{ issue.metric }}
    </td>
    <td class="p-3">
        <span class="{{'text-red-400' if issue.is_major else 'text-amber-200'}}">
            {{ issue.deviation }}
        </span>
    </td>
    <td class="p-3">
        <span class="text-gray-400">
            {{ issue.description }}
        </span>
    </td>
    <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 collapse peer-[.open]:visible border-b border-zinc-500 bg-zinc-700">
    <td colspan="5" class="p-3">
        <h4 class="font-bold text-sm">Description</h4>
        <div class="text-sm">
            <p class="my-2">
                When we perturb the content of feature “{{ issue.info.feature }}” with the transformation
                “{{ issue.info.transformation_fn.name }}” (see examples below), your model changes its prediction in about
                {{(issue.info.fail_ratio * 100)|round(1)|abs }}% of the cases.
                We expected the predictions not to be affected by this transformation.
            </p>
        </div>
        <h4 class="font-bold mt-4 text-sm">Examples</h4>
        <div class="text-white max-w-xl text-sm overflow-scroll" style="max-width: 920px">
            {{ issue.examples(3).to_html(notebook=True) | safe }}
        </div>
    </td>
</tr>