brita_water:
  template: [default, with_state_indicator]
  name: Brita water
  entity: script.brita_pour_water
  custom_fields:
    remaining_liters: "[[[ return states['input_number.brita_remaining_liters'].state ]]]"
  tap_action:
    action: toggle
  styles:
    card:
      - background: >
          [[[
            const remaining = states['input_number.brita_remaining_liters'].state;
            const percent = 100 - (remaining / 150 * 100);

            const gradient = [
              '180deg',
              'var(--paper-card-background-color) 0%',
              `var(--paper-card-background-color) ${percent}%`,
              `var(--primary-color) ${percent}%`
            ]

            return `linear-gradient(${gradient.join(',')})`;
          ]]]
      - color: white
    name:
      - color: >
          [[[
            const remaining = states['input_number.brita_remaining_liters'].state;
            const percent = 100 - (remaining / 150 * 100);

            return percent < 75 ? 'black' : 'white';
          ]]]
    icon:
      - color: >
          [[[
            const remaining = states['input_number.brita_remaining_liters'].state;
            const percent = 100 - (remaining / 150 * 100);

            return percent < 25 ? 'black' : 'white';
          ]]]
    custom_fields:
      remaining_liters:
        - position: absolute
        - top: 8px
        - right: 5px
        - font-size: 12px
  variables:
    state_indicator_id: binary_sensor.brita_should_change_filter
    state_indicator_size: 5px
    state_indicator_off_size: 0px
    state_indicator_on_color: var(--color-red)
    state_on_indicator_on_color: var(--color-red)
