v3_button_brita_water:
  template: v3_button
  name: Brita water
  entity: script.brita_pour_water
  variables:
    long_state: true
  state_display: |
    [[[
      return Math.round(states['input_number.brita_remaining_liters'].state) +
        (variables.long_state ? 'L Remaining' : 'L')
    ]]]
  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(--v3-background) 0%',
              `var(--v3-background) ${percent}%`,
              `white ${percent}%`
            ]

            return `linear-gradient(${gradient.join(',')})`;
          ]]]
    name:
      - color: |
          [[[
            const remaining = states['input_number.brita_remaining_liters'].state;
            const percent = remaining / 150 * 100;
            return percent > 25 ? 'black' : 'white';
          ]]]
      - background-color: |
          [[[
            const remaining = states['input_number.brita_remaining_liters'].state;
            const percent = remaining / 150 * 100;
            return percent > 25 ? 'white' : 'transparent';
          ]]]
      - border-radius: 4px

    icon:
      - color: |
          [[[
            const remaining = states['input_number.brita_remaining_liters'].state;
            const percent = remaining / 150 * 100;
            return percent > 65 ? 'var(--primary-color)' : 'white';
          ]]]
      - background-color: |
          [[[
            const remaining = states['input_number.brita_remaining_liters'].state;
            const percent = remaining / 150 * 100;
            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 ? 'var(--v3-btn-state-color)' : '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
