From 34b60283a9a386b2605a4776d0741d5365ae7a8e Mon Sep 17 00:00:00 2001
From: Georgi Gardev <georgi@gardev.com>
Date: Wed, 13 Oct 2021 21:51:48 +0300
Subject: [PATCH] Fix brita button color

---
 .../v3/v3_button_brita_water.yaml             | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/config/lovelace/button_card_templates/v3/v3_button_brita_water.yaml b/config/lovelace/button_card_templates/v3/v3_button_brita_water.yaml
index 169e003..d863ab8 100644
--- a/config/lovelace/button_card_templates/v3/v3_button_brita_water.yaml
+++ b/config/lovelace/button_card_templates/v3/v3_button_brita_water.yaml
@@ -4,10 +4,6 @@ v3_button_brita_water:
   entity: script.brita_pour_water
   variables:
     long_state: true
-    value_has_error: |
-      [[[
-        return states['binary_sensor.brita_should_change_filter'].state === 'on';
-      ]]]
   state_display: |
     [[[
       return Math.round(states['input_number.brita_remaining_liters'].state) +
@@ -60,3 +56,25 @@ v3_button_brita_water:
             return percent > 65 ? 'white' : 'transparent';
           ]]]
       - border-radius: 4px
+
+    state:
+      - position: absolute
+      - bottom: 10px
+      - left: 16px
+      - font-weight: bold
+      - font-size: 13px
+      - color: |
+          [[[
+            if (states['binary_sensor.brita_should_change_filter'].state === 'on') { return 'red'; }
+
+            const remaining = states['input_number.brita_remaining_liters'].state;
+            const percent = remaining / 150 * 100;
+            return percent > 10 ? 'black' : 'white';
+          ]]]
+      - background-color: |
+          [[[
+            const remaining = states['input_number.brita_remaining_liters'].state;
+            const percent = remaining / 150 * 100;
+            return percent > 10 ? 'white' : 'transparent';
+          ]]]
+      - border-radius: 4px