{# Signal-chip component.

   Replaces the open-coded
       <span class="ui-signal-chip text-amber-700 dark:text-amber-300">
         <span class="ui-legend-dot bg-amber-500"></span>
         label
       </span>
   pattern (10+ duplicates across the dashboard cost-drivers,
   opportunities table, failures table, opportunity detail).

   Usage:

       {% from "components/_signal_chip.html" import signal_chip %}
       {{ signal_chip("Build", color="brand") }}
       {{ signal_chip("slot contention", color="amber", overflow="+2") }}
       {{ signal_chip("dbt", color="emerald", title="dbt-originated") }}

   Parameters:
     - label     (str) chip text
     - color     (str) palette: brand | emerald | rose | amber | teal
                                | slate (default)
     - overflow  (str, optional) trailing emphasised text such as "+2"
                                 used for "first issue + N more" cells
     - title     (str, optional) ``title`` attribute on the chip
#}
{% macro signal_chip(label, color="slate", overflow=None, title=None) -%}
  {%- set _palette = {
        "brand":   {"text": "text-brand-700 dark:text-brand-200", "dot": "bg-brand-500 dark:bg-brand-400"},
        "emerald": {"text": "text-emerald-700 dark:text-emerald-300", "dot": "bg-emerald-500 dark:bg-emerald-400"},
        "rose":    {"text": "text-rose-700 dark:text-rose-300", "dot": "bg-rose-500 dark:bg-rose-400"},
        "amber":   {"text": "text-amber-700 dark:text-amber-300", "dot": "bg-amber-500 dark:bg-amber-400"},
        "teal":    {"text": "text-teal-700 dark:text-teal-300", "dot": "bg-teal-500 dark:bg-teal-400"},
        "slate":   {"text": "text-slate-600 dark:text-slate-300", "dot": "bg-slate-400 dark:bg-slate-500"},
      }.get(color, {"text": "text-slate-600 dark:text-slate-300", "dot": "bg-slate-400 dark:bg-slate-500"}) -%}
  <span class="ui-signal-chip whitespace-nowrap {{ _palette.text }}"{% if title %} title="{{ title }}"{% endif %}>
    <span class="ui-legend-dot {{ _palette.dot }}"></span>
    {{ label }}
    {%- if overflow %}
    <span class="ml-1 {{ _palette.text }} font-semibold">{{ overflow }}</span>
    {%- endif %}
  </span>
{%- endmacro %}