Custom Button Card: conditions by numeric state

Configuration Frontend
1

Hi all,

long time lurker here. I learned a lot by browsing this great community but I am really stuck with the following, I hope someone can help:

I try to achieve 3 different color icon changes (traffic light) depending on the level of the fuel of my car in the custom fields of the custom button card.

What works with card mod in a multiple-entity-row card:

card_mod:
      style: >
        {% if states('sensor.fuellevel') | int >= 600
        %}

        div.entity:nth-child(1) {
          color: green;
          font-size:11px;
        }

        {% elif states('sensor.fuellevel') | int >= 150
        %}

        div.entity:nth-child(1) {
          color: orange;
          font-size:11px;
        }

        {% elif states('sensor.fuellevel') | int < 150
        %}

        div.entity:nth-child(1) {
          color: red;
          font-size:11px;
        }

        {% endif%}

This is what I try to do with the customer button card but I am not getting it to work:

custom_fields:
      fuel: |
        [[[
            if (states['sensor.fuellevel'].state >= 600)
              return `<ha-icon icon="mdi:gas-station" style="width:22px;height:22px;color:green;">
                </ha-icon><span> <span style="color: white">${states['sensor.fuellevel'].state} km</span></span>`;
            else 
              if (states['sensor.fuellevel'].state >= 150)
              return `<ha-icon icon="mdi:gas-station" style="width:22px;height:22px;color:orange;">
                </ha-icon><span> <span style="color: white">${states['sensor.fuellevel'].state} km</span></span>`;
			else
			if (states['sensor.fuellevel'].state < 150)
              return `<ha-icon icon="mdi:gas-station" style="width:22px;height:22px;color:red;">
                </ha-icon><span> <span style="color: white">${states['sensor.fuellevel'].state} km</span></span>`;
        ]]]

Any pointer into the right direction would be much appreciated - thanks!

2

BUMP

anyone…?