Jinja templates in button card

[lisz8]

I recently learned that Jinja templates can be rendered using rest_command. This allows them to be used in a custom button. However it's not very convenient, since the service calls are asynchronous, and you can't simply assign the result to a name or action.
But maybe this technique will be useful to someone, here's a demo.

Rest command

First you need to create a long lived access token and put it into secrets.yaml, e.g.
my_token: Bearer your_very_long_access_token

Command:

template:
  url: "http://localhost:8123/api/template"
  content_type: 'application/json'
  verify_ssl: false
  headers:
    authorization: !secret my_token
    content-type: 'application/json'
  method: 'post'
  payload: '{{ {"template": text|string}|to_json }}'

( if configured with an SSL certificate, the URL should be: "https://localhost/api/template" )

Button card

type: custom:button-card
variables:
  _renderTemplate: |
    [[[
      return async (text='') => {
        try {
          let r = await hass.callService('rest_command', 'template', {text}, {}, true, true);
          if (r.response?.status == 200)
            return r.response.content;
        } catch (ex) {
          console.error(ex);
        }
        return 'n/a';
      };
    ]]]
name: |
  [[[
    /* standard demo template from developer tools + time */
    const myTemplate = `
      {## Imitate available variables: ##}
      {% set my_test_json = {
        "temperature": 25,
        "unit": "°C"
      } %}
      
      The temperature is {{ my_test_json.temperature }} {{ my_test_json.unit }}.
      
      {% if is_state("sun.sun", "above_horizon") -%}
        The sun rose {{ relative_time(states.sun.sun.last_changed) }} ago.
      {%- else -%}
        The sun will rise at {{ as_timestamp(state_attr("sun.sun", "next_rising")) | timestamp_local }}.
      {%- endif %}
         
      {% for state in states.weather -%}
        {%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%}
        {{ state.name | lower }} is {{state.state_with_unit}}
      {%- endfor %}.
      It's {{ states('sensor.time') }}
    `;

    /* make custom button aware of entities used in the template, so that it auto updates when they change,
       and the template is re-rendered 
    */
    states['sun.sun'];
    states['sensor.time'];
    
    variables._renderTemplate(myTemplate)
    .then(r => {
      this.shadowRoot.querySelector('#name').innerText = r;
    });

    /* a non-empty string must be returned as initial value, otherwise 'name' would not be created in DOM,
       and the above line would fail
    */
    return ' ';
  ]]]
styles:
  name:
    - text-wrap: wrap
section_mode: true
grid_options:
  rows: 3
  columns: 6