Timer in Button Card doesn't display like standard entity does

[poldim]

Checklist

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

Describe the bug Timer's dont display as expected. Only says active or idle.

Version of the card Version: v3.4.2

To Reproduce This is the configuration I used, one is in an if statement, and one is without:

name: |-
  [[[
    if (states['lock.rpi_airbnb_deadbolt'].state == "unlocked")
      return `AirBnB Lock<br>  ${ states['timer.rpi_door_auto_lock'].state}`;
    else
      return "AirBnB Lock";
  ]]]

name: '[[[ return `AirBnB Lock<br> ${states[''timer.rpi_door_auto_lock''].state}` ]]]'

Screenshots

Expected behavior Timer correctly displayed if only shown as it's own single entity:

type: entities
title: TEST
show_header_toggle: false
entities:
  - entity: timer.door_auto_lock
    icon: 'mdi:timer'
    name: Timer Remaining

Desktop (please complete the following information):

• Google Chrome Version 91.0.4472.101 (Official Build) (x86_64)

Additional context I know timers have some finicky UI display issues, but if it works as a regular entity, shouldn't the button card be able to pull the same data?

Ultimately I'd like it to look like:

[RomRider]

Use show_state: trueand you'll get what you want. No need for javascript templates.

[poldim]

Use show_state: trueand you'll get what you want. No need for javascript templates.

This is what adding show_state: true got me:

Don't I have to use a template to only show the remaining time of the timer when door is unlocked/timer is active?

Here's the full config for the card:

type: custom:button-card
template: door_buttons
entity: lock.rpi_airbnb_deadbolt
name: '[[[ return `AirBnB Lock<br> ${states[''timer.rpi_door_auto_lock''].state}` ]]]'
icon: |-
  [[[
    if (states['lock.rpi_airbnb_deadbolt'].state == "unlocked")
      return "mdi:lock-open-variant-outline";
    else if (states['lock.rpi_airbnb_deadbolt'].state == "locked")
      return "mdi:lock-outline";
    else
      return "mdi:alert";
  ]]]
double_tap_action:
  action: call-service
  service: lock.unlock
  service_data:
    entity_id: lock.rpi_airbnb_deadbolt
hold_action:
  action: more-info
layout: icon_name
show_state: true
styles:
  card:
    - height: 95px
  icon:
    - color: var(--primary-color)

[RomRider]

Ok, I see. The timer is not the main entity. One easy way to do this is to embed a button-card with the timer as entity in a custom_field on the main button-card

[poldim]

embed a button-card with the timer as entity in a custom_field on the main button-card

Could you point me to any hints on how to do this? I tried to look at the docs but I didn't see any examples which made sense for me for how to do this

[Mariusthvdb]

see: https://community.home-assistant.io/t/lovelace-button-card/65981/6282?u=mariusthvdb