{# Sailfish DAG-run badge fragment.

   Designed to be ``{% include %}``-d from a customer-side template
   override (Airflow 2.5+ dagrun_macros hook), or fetched directly by
   the React UI on Airflow 3.x.

   Required context vars:
     dag_id, dag_run_id        — identifying the run
     badge                      — payload from build_badge_context(),
       with keys: variant, label, bootstrap_class, capture_count,
       view_in_sailfish_url, count_clause
     connection_status          — "connected" or "offline"
#}
<span class="sailfish-run-badge"
      data-dag-id="{{ dag_id }}"
      data-run-id="{{ dag_run_id }}"
      data-variant="{{ badge.variant }}"
      style="display:inline-flex; align-items:center; gap:0.5em;
             padding:0.25em 0.5em;">
  <span class="label {{ badge.bootstrap_class }}"
        style="font-size:0.9em;">
    {{ badge.label }}
  </span>
  {% if badge.count_clause %}
    <span style="color:#555;">&middot; {{ badge.count_clause }}</span>
  {% endif %}
  {% if badge.view_in_sailfish_url %}
    <a href="{{ badge.view_in_sailfish_url }}"
       target="_blank"
       rel="noopener"
       class="btn btn-link btn-xs"
       style="padding:0;">
      View
    </a>
  {% endif %}
  {% if connection_status != "connected" %}
    <span style="color:#999; font-style:italic; font-size:0.85em;"
          title="{{ badge.error or 'connection error' }}">
      (offline)
    </span>
  {% endif %}
</span>