1.   - platform: template
2.     sensors:
3.       devices_with_low_battery:
4.         friendly_name: 'Devices with Low Battery'
5.         unit_of_measurement: devices
6.         value_template: >-
7.           {% set ignore_entities = [] %}
8.           {{ states.sensor
9.             | selectattr('attributes.device_class', 'eq', 'battery')
10.             | rejectattr('entity_id', 'in', ignore_entities)
11.             | map(attribute='state')
12.             | reject('in', ['unknown', 'unavailable'])
13.             | map('int', -1) | select('le', 30)
14.             | select('ge', 0)
15.             | list | count
16.           }}
17.         icon_template: >-
18.           {% if is_state('sensor.devices_with_low_battery', '0') %}
19.             mdi:battery-check
20.           {% else %}
21.             mdi:battery-alert
22.           {% endif %}  
23.  
24. type: custom:stack-in-card
25. cards:
26.   - type: custom:mushroom-chips-card
27.     alignment: center
28.     chips:
29.       - type: template
30.         entity: sensor.devices_with_low_battery
31.         icon_color: red
32.         icon: mdi:battery-alert
33.         content: '{{ states(entity) }}'
34.         tap_action:
35.           action: fire-dom-event
36.           browser_mod:
37.             service: browser_mod.popup
38.             data:
39.               title: Low Batteries
40.               content:
41.                 type: custom:auto-entities
42.                 filter:
43.                   include:
44.                     - attributes:
45.                         device_class: battery
46.                       state: < 30
47.                       options:
48.                         type: custom:mushroom-template-card
49.                         primary: '{{ states(entity) }}%'
50.                         secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
51.                         icon: >
52.                           {% set battery_level = (states(entity) | int / 10) |
53.                           round(0) | int * 10 %} {% if battery_level == 100 %}
54.                             mdi:battery
55.                           {% elif battery_level > 0 %}
56.                             mdi:battery-{{ battery_level }}
57.                           {% else %}
58.                             mdi:battery-outline
59.                           {% endif %}
60.                         icon_color: |-
61.                           {% set battery_level = states(entity) | int %}
62.                           {% if battery_level > 90 %}
63.                             green
64.                           {% elif battery_level > 60 %}
65.                             light-green
66.                           {% elif battery_level > 50 %}
67.                             lime
68.                           {% elif battery_level > 40 %}
69.                             yellow
70.                           {% elif battery_level > 30 %}
71.                             amber
72.                           {% elif battery_level > 20 %}
73.                             orange
74.                           {% elif battery_level > 10 %}
75.                             deep-orange
76.                           {% else %}
77.                             red
78.                           {% endif %}
79.                         layout: horizontal
80.                         tap_action:
81.                           action: none
82.                         badge_icon: |-
83.                           {% set battery_level = states(entity) | int %}
84.                           {% if battery_level < 10 %}
85.                             mdi:exclamation-thick
86.                           {% endif %}
87.                         badge_color: red
88.                   exclude: null
89.                 show_empty: false
90.                 card:
91.                   type: custom:layout-card
92.                   cards: []
93.                   layout_type: masonry
94.                 sort:
95.                   method: friendly_name
96.     card_mod:
97.       style: |
98.  
99.         ha-card {
100.           --chip-box-shadow: none;
101.           --chip-spacing: 15px;
102.           --chip-icon-size: 35px;
103.           --chip-height: 35px;
104.           height: 60px;
105.           margin-top: 15px;
106.         }
107.