brita_water_card:
  card:
    type: custom:button-card
    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)