type: custom:html-template-card
title: Real Time — De Lijn
ignore_line_breaks: true
content: >
  {% set stop_name = "Anderlecht Coovi" %} {% set alert_entity =
  "sensor.delijn_alerts_anderlecht_coovi_300801" %} {% set alert_count =
  states(alert_entity) | int(0) %}

  <div style="display: flex; align-items: center; justify-content:
  space-between;
    margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--divider-color);">
    <div style="display: flex; align-items: center;">
      <ha-icon icon="mdi:bus-stop" style="color:#2196F3; margin-right: 10px;"></ha-icon>
      <span style="font-weight: bold; font-size: 1.1em;">{{ stop_name }}</span>
    </div>
    {% if alert_count > 0 %}
    <span style="color: #FF5722; font-size: 0.85em;">
      <ha-icon icon="mdi:alert-circle" style="color:#FF5722;"></ha-icon>
      {{ alert_count }} alerte{{ 's' if alert_count > 1 }}
    </span>
    {% endif %}
  </div>

  <table width="100%" style="border-collapse: collapse;">
    <thead>
      <tr style="border-bottom: 1px solid var(--divider-color);">
        <td width="18%" align="left"   style="font-weight: bold; padding-bottom: 8px;">Ligne</td>
        <td width="42%" align="center" style="font-weight: bold; padding-bottom: 8px;">Destination</td>
        <td width="20%" align="right"  style="font-weight: bold; padding-bottom: 8px;">Prochain</td>
        <td width="20%" align="right"  style="font-weight: bold; padding-bottom: 8px;">Suivant</td>
      </tr>
    </thead>
    <tbody>

  {% macro render_row(entity_id) %}
    {% set s = states[entity_id] %}
    {% if s %}
      {% set state_val  = s.state %}
      {% set line       = s.attributes.line | default('?') %}
      {% set dest       = s.attributes.destination | default('N/A') %}
      {% set pred       = s.attributes.prediction | default('') %}
      {% set bg         = s.attributes.badge_background | default('#888888') %}
      {% set fg         = s.attributes.badge_text | default('#FFFFFF') %}
      {% set border_col = s.attributes.badge_border | default(bg) %}
      {% set next_deps  = s.attributes.next_departures | default([]) %}
      {% set next_time  = next_deps[0].realtime if next_deps and next_deps[0].realtime else
                          (next_deps[0].scheduled if next_deps else None) %}
      {% set cancelled  = pred == 'Annulé' or pred == 'Geschrapt' %}
      {% set no_service = state_val in ['unknown','unavailable'] %}
      {% set fsize      = 52 if line|length <= 2 else (40 if line|length == 3 else 28) %}

      {% set svg_bg     = bg | replace('#','%23') %}
      {% set svg_fg     = fg | replace('#','%23') %}
      {% set svg_border = border_col | replace('#','%23') %}

      <tr style="border-bottom: 1px solid var(--divider-color, #e0e0e0);">

        <td width="18%" align="left" style="padding: 10px 0;">
          <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
            <rect x='8' y='8' width='84' height='84' fill='{{ svg_bg }}' stroke='{{ svg_border }}'
              stroke-width='6' rx='14'/>
            <text x='50' y='52' font-size='{{ fsize }}' font-family='Arial,sans-serif'
              text-anchor='middle' dominant-baseline='central'
              fill='{{ svg_fg }}' font-weight='bold'>{{ line }}</text>
            </svg>"
            style="width:48px; height:48px;" />
        </td>

        <td width="42%" align="center"
          style="padding: 6px 4px; font-size: 0.88em; text-transform: uppercase;">
          {% if cancelled %}
            <span style="color: var(--error-color, #FF5722);">
              <ha-icon icon="mdi:cancel"></ha-icon> Annulé
            </span>
          {% else %}
            {{ dest }}
          {% endif %}
        </td>

        <td width="20%" align="right" style="padding: 6px 0; font-weight: bold; white-space: nowrap;">
          {% if no_service %}
            <span style="color: var(--secondary-text-color); font-size: 0.85em;">—</span>
          {% else %}
            <span style="font-size: 1.6em;">{{ state_val if not cancelled else '--' }}</span>
            <span style="font-size: 0.8em;"> m</span>
          {% endif %}
        </td>

        <td width="20%" align="right"
          style="padding: 6px 0; color: var(--secondary-text-color); white-space: nowrap;">
          <span style="font-size: 1.1em;">{{ next_time if next_time else '—' }}</span>
        </td>

      </tr>
    {% endif %}
  {% endmacro %}

  {{ render_row('sensor.delijn_line_r42_anderlecht_coovi_to_leerbeek') }} {{
  render_row('sensor.delijn_line_r54_anderlecht_coovi_to_halle_az') }} {{
  render_row('sensor.delijn_line_r70_anderlecht_coovi_to_halle_station') }} {{
  render_row('sensor.delijn_line_r71_anderlecht_coovi_to_brukom_europalaan') }}
  {{ render_row('sensor.delijn_line_r72_anderlecht_coovi_to_sint_pieters_leeuw')
  }}

    </tbody>
  </table>