Can't use conditionals inside the card

[joseaguardia]

Checklist

• [X ] I updated the card to the latest version available
• [ X] I cleared the cache of my browser

Describe the bug What I want to achieve is to have a button that alternates between two scenes, and depending on which one is active it has one icon or another.

I have reviewed everything and it seems that both conditions (the one for the image and the one for applying the scene) are not interpreted well. If I put a fixed value in both, the button works as expected, but with the conditionals it does nothing.

Version of the card Version: 4.1.2 HA: 2024.11.0

To Reproduce This is the configuration I used:

    name: " "
    show_name: true
    show_icon: false
    aspect_ratio: 3/2
    style:
      top: 15%
      left: 9%
      width: 10%
    styles:
      card:
        - background: rgba(255, 255, 255, 0.1)
        - color: "#D1F2EB"
        - background-image: >
            {% if is_state('input_boolean.escena_todas_las_luces_exteriores', 'on') %}
              url('/local/plano/bombilla_encendida.png')
            {% else %}
              url('/local/plano/bombilla_apagada.png')
            {% endif %}
        - background-size: 120%
        - background-repeat: no-repeat
        - background-position: center
      icon:
        - color: "#48C9B0"
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: >
          {% if is_state('input_boolean.escena_todas_las_luces_exteriores',
          'on') %}
            scene.todas_las_luces_exteriores_apagar
          {% else %}
            scene.todas_las_luces
          {% endif %}

Thanks!

[joseaguardia]

I solved this reading the doc :)))

  - type: custom:button-card
    name: " "
    show_name: true
    show_icon: false
    aspect_ratio: 3/2
    style:
      top: 15%
      left: 9%
      width: 10%
    styles:
      card:
        - background: rgba(255, 255, 255, 0.1)
        - color: "#D1F2EB"
        - background-image: |
            [[[
              if (states['input_boolean.escena_todas_las_luces_exteriores'].state == 'on')
                return "url('/local/plano/bombilla_encendida.png')";
              else
                return "url('/local/plano/bombilla_apagada.png')";
            ]]]
        - background-size: 120%
        - background-repeat: no-repeat
        - background-position: center
      icon:
        - color: "#48C9B0"
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data:
        entity_id: >
          [[[ if
          (states['input_boolean.escena_todas_las_luces_exteriores'].state ==
          'on')
            return "scene.todas_las_luces_exteriores_apagar";
          else
            return "scene.todas_las_luces";
          ]]]