saved_messages_card.yaml

###############################################################################
## Saved Messages Entities Card
## - card mod plugin required to use styles to center the buttons
## - vertical-stack-in-card required to combine the cards into one
## https://github.com/thomasloven/lovelace-card-mod
## https://github.com/ofekashery/vertical-stack-in-card
###############################################################################
type: custom:vertical-stack-in-card
cards:
  - type: entities
    title: "Saved Messages"
    entities:
      - entity: sensor.tts_saved_messages
        name: "Saved Messages"

      - type: buttons
        entities:
          - entity: script.tts_play_saved_messages
            name: Play Messages
            tap_action:
              action: call-service
              service: script.tts_play_saved_messages
              service_data:
                skip_none: false

          - entity: script.tts_play_last_message
            name: Last Message
            tap_action:
              action: call-service
              service: script.tts_play_last_message

          - entity: script.tts_clear_saved_messages
            name: Clear Messages
            tap_action:
              action: call-service
              service: script.tts_clear_saved_messages
        card_mod:
          style:
            hui-buttons-base $: |
              .ha-scrollbar {
                justify-content: center;
              }

  - type: conditional
    conditions:
      - entity: sensor.tts_saved_messages
        state_not: 0
    card:
      type: markdown
      content: |
        {%- set msgnum = namespace(value=0) %}
        {%- for key,value in states.sensor.tts_saved_messages.attributes.items()
              if key not in ['icon','friendly_name'] %}
        {%- if loop.index % 2 == 1 %}
        {%- set msgnum.value = msgnum.value + 1 %}
        - **{{ value }}**
        <sup>{{ as_datetime(state_attr('sensor.tts_saved_messages','msg_time' ~ msgnum.value)).strftime('%A, %B %-d at %-I:%M %p') }}</sup>

        {% endif %}
        {% endfor %}