<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}}</code>
    </td>
    <td class="p-3">
        {{ issue.info.metric.name }} = {{ issue.info.metric_value_slice|format_metric }}
        <span class="text-gray-400">
            (Global = {{ issue.info.metric_value_reference|format_metric }})
        </span>
    </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">
                For records in your dataset where {{ issue.domain }},
                the {{ issue.info.metric.name|lower }} is {{ (issue.info.metric_rel_delta * 100)|round(1)|abs }}%
                {{ 'lower' if issue.info.metric_rel_delta < 0 else 'higher' }} than the global {{
                    issue.info.metric.name|lower }}.    
            </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(justify="left", notebook=True) | safe }}
        </div>
    </td>
</tr>