{# Sailfish Grid view column — thin colored bar per run.

   Designed to be ``{% include %}``-d into an Airflow 2.5+ grid.html
   override. The 3.x React UI renders an equivalent slice via an
   external_views iframe.

   Required context vars:
     dag_id   — the DAG id being rendered
     bars     — ``{run_id: {variant, color, tooltip, view_url}}`` map
     empty    — True if there are no runs to render
#}
{% if not empty %}
<div class="sailfish-grid-column" data-dag-id="{{ dag_id }}"
     style="display:flex; flex-direction:row; gap:2px; align-items:center;">
  {% for run_id, bar in bars.items() %}
    {% if bar.view_url %}
      <a href="{{ bar.view_url }}"
         target="_blank"
         rel="noopener"
         class="sailfish-grid-bar"
         data-run-id="{{ run_id }}"
         data-variant="{{ bar.variant }}"
         title="{{ bar.tooltip }}"
         style="display:inline-block; width:6px; height:18px;
                background:{{ bar.color }}; border-radius:1px;
                text-decoration:none;">
      </a>
    {% else %}
      <span class="sailfish-grid-bar"
            data-run-id="{{ run_id }}"
            data-variant="{{ bar.variant }}"
            title="{{ bar.tooltip }}"
            style="display:inline-block; width:6px; height:18px;
                   background:{{ bar.color }}; border-radius:1px;"></span>
    {% endif %}
  {% endfor %}
</div>
{% endif %}