Push/Template a value into a Card_mod Style

1

Note sure if I’ve got the right terms here , but i using the Mushroom-chip-card to display if a person is home . All working fine

Screenshot 2022-12-27 134046

I have been able to include a FIXED Content badge on the chips :

Screenshot 2022-12-27 134356

using the following code:

type: custom:mushroom-chips-card
alignment: center
chips:
  - type: entity
    entity: person.lee
    icon_color: green
    name: LB
    content_info: name
    icon: mdi:face-man
    card_mod:
      style: |
        ha-card:after {
          content:  
                    {%- if is_state('person.lee','home') -%}
                    "A"
                    {%- else -%}
                    "B"
                    {%- endif %};
                    
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgb(var(--rgb-orange));
          color: var(--card-background-color);
          font-weight: bolder;
          border-radius: 50%;
          top: -5px;
          right: -5px;
          width: 18px;
          height: 18px;
          font-size: 11px; 
        }

What i would like to do is insert the time into the badge , ie “2m” or “2h” instead of the fixed text

Developed the following code to do the time and works ok in the template editor

{% set time_diff =  (now()- states.person.lee.last_changed).total_seconds() | round(0) %}
                    {% if time_diff > 86400 %}
                    {{(time_diff / 86400) | int}}d
                    {% elif time_diff > 3600 %}
                    {{(time_diff / 3600) | int}}h
                    {% elif time_diff > 60 %}
                    {% else -%}
                    {{(time_diff / 60) | int}}m
                    {% endif %}

But just can not get it to work with the chip/badge .
I’m sure it’s just a special character required to insert the code

type: custom:mushroom-chips-card
alignment: center
chips:
  - type: entity
    entity: person.lee
    icon_color: green
    name: LB
    content_info: name
    icon: mdi:face-man
    card_mod:
      style: |
        ha-card:after {
          content:  
                  
                    {%- set time_diff =  (now()- states.person.lee.last_changed).total_seconds() | round(0) -%}
                    {%- if time_diff > 86400 -%}
                    {{(time_diff / 86400) | int}}d
                    {%- elif time_diff > 3600 -%}
                    {{(time_diff / 3600) | int}}h
                    {%- elif time_diff > 60 -%}
                    {%- else -%}
                    {{(time_diff / 60) | int}}m
                    {%- endif %};
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgb(var(--rgb-orange));
          color: var(--card-background-color);
          font-weight: bolder;
          border-radius: 50%;
          top: -5px;
          right: -5px;
          width: 18px;
          height: 18px;
          font-size: 11px; 
        }

Thanks in advance
Lee B

2

FIXED : found another similar example …

end result looks like Screenshot 2022-12-28 131452

code:

- type: entity
    entity: person.blake
    icon_color: green
    icon: mdi:face-man
    name: BC
    content_info: name
    card_mod:
      style: |
        ha-card:after {  position: absolute; display: flex; justify-content: center; align-items: center; background: rgb(var(--rgb-orange)); color: var(--card-background-color);  border-radius: 50%;
          top: -5px; right: -5px; width: 18px; height: 18px; font-size: 10px; 
          content:  {%- set time_diff =  (now()- states.person.blake.last_changed).total_seconds() | round(0) -%}
                   
                    {%- if time_diff > 86400 -%}
                    "{{(time_diff / 86400) | int}}d"
                    {%- elif time_diff > 3600 -%}
                    "{{(time_diff / 3600) | int}}h"
                    {%- elif time_diff > 60 -%}
                    "{{(time_diff / 60) | int}}m"
                    {%- else -%}
                    "{{(time_diff) | int}}s"
                    {%- endif %} ;     

                    {%- if time_diff > 1150 -%}
                    display: none; 
                    {%- endif %}         
            }

The last if statement turns off the badge if the last activity was more than 19 minutes !