{% load i18n %}
{% comment %}
Render a {css, icon, label, title} badge dict from _display.build_badge
/ flag_badge. The verbose enum label lives in `title` (hover) so a dense
list cell stays narrow; the icon carries meaning and the colour carries
severity. Shared by run_list and invocation_list so the badge columns
render identically across both tables.
{% endcomment %}
{# Content kept flush against the tags: a leading newline + indent would render as whitespace inside the badge padding, an asymmetric gap before the icon / label. #}
{% if icon_only and badge.icon %}
    {% comment %}
    Icon-only variant: drop the visible label so a long enum label
    (e.g. the run-state "completed with error" text) cannot set a wide
    min-content and force a horizontal scrollbar. The full text moves
    to the hover title + aria-label; the glyph carries the meaning and
    the colour the severity. run_state badges leave `title` empty (the
    label already IS the full text), so fall back to label. The hosting
    <td> carries a data-order key so DataTables still sorts the column
    despite the empty text content.
    {% endcomment %}
    <span class="badge {{ badge.css }}" title="{{ badge.title|default:badge.label }}" aria-label="{{ badge.title|default:badge.label }}"><i class="fas {{ badge.icon }}" aria-hidden="true"></i></span>
{% else %}
    <span class="badge {{ badge.css }} text-nowrap"{% if badge.title %} title="{{ badge.title }}"{% endif %}>{% if badge.icon %}<i class="fas {{ badge.icon }}" aria-hidden="true"></i> {% endif %}{{ badge.label }}</span>
{% endif %}