Using a variable in a button card to set a grid-template-area

[vlaryn]

I want to change what is displayed under the icon of this button card depending on if a person state is home or not. So if the person is home I want it to say Home and if they are away I want to display the distance away they are using a proximity entity. Here is the code I cam up with below but I can't seem to get it to work.

type: custom:button-card
entity: person.rachel
show_name: false
show_entity_picture: true
show_state: true
entity_picture: /local/images/Rachel.webp
state:

• value: home
  styles:
  entity_picture:
  - filter: none
• value: non-home
  styles: null
  variables:
  location: |
  {% if is_state('person.rachel', 'home') %}
  "s"
  {% else %}
  "proximity"
  {% endif %}
  styles:
  grid:
  • grid-template-columns: 100%
  • grid-template-rows: min-content min-content
  • grid-template-areas: '"i" "{{ location }}"'
    entity_picture:
  • filter: grayscale(100%)
    custom_fields:
    proximity:
    card:
    type: custom:button-card
    entity: proximity.rachel_home
    show_name: false
    show_state: true
    show_icon: true
    icon: mdi:home-import-outline
    styles:
    grid:
    - grid-template-areas: '"s i"'
    - grid-template-columns: min-content min-content
    - grid-template-rows: auto
    - justify-content: center;
    - align-items: center;
    card:
    - background: none
    icon:
    - width: 25px
    - height: 25px
    - padding-left: 5px
    - background: null
    state:
    - background: null
    - font-size: 14px

[Opontios]

You can't use Jinja 2 templates in custom button card. It is all stated in the docs. You have to use Java templates.