Multiple light entity

type: custom:button-card
entity: light.master_bedroom
tap_action:
  action: more-info
show_icon: false
name: Master Bedroom Lights
custom_fields:
  slider:
    card:
      type: custom:my-slider-v2
      entity: light.master_bedroom
      colorMode: brightness
      styles:
        container:
          - border-radius: 100px
          - overflow: visible
          - background: none
        card:
          - height: 40px
          - padding: 0 20px
          - background: |
              [[[
                // Get all valid lights (on, with rgb_color)
                function getValidLights() {
                  let valid = [];
                  if (entity.attributes.entity_id && Array.isArray(entity.attributes.entity_id)) {
                    entity.attributes.entity_id.forEach(lightId => {
                      let light = states[lightId];
                      if (
                        light &&
                        light.state === 'on' &&
                        light.attributes.rgb_color &&
                        light.attributes.brightness > 0
                      ) {
                        valid.push(light.attributes.rgb_color);
                      }
                    });
                  }
                  return valid;
                }
                // Check if all lights have the same colour
                function isUniform(lights) {
                  if (lights.length === 0) return false;
                  return lights.every(c => c[0] === lights[0][0] && c[1] === lights[0][1] && c[2] === lights[0][2]);
                }

                let validLights = getValidLights();

                if (validLights.length === 1 || (validLights.length > 1 && isUniform(validLights))) {
                  // Single (or uniform) light: use original gradient (darker to lighter)
                  let [r, g, b] = validLights[0];
                  let darkR = Math.min(255, Math.floor(r * 0.6));
                  let darkG = Math.min(255, Math.floor(g * 0.6));
                  let darkB = Math.min(255, Math.floor(b * 0.6));
                  let lightR = Math.min(255, Math.floor(r * 1.3));
                  let lightG = Math.min(255, Math.floor(g * 1.3));
                  let lightB = Math.min(255, Math.floor(b * 1.3));
                  return `linear-gradient(to right, rgb(${darkR}, ${darkG}, ${darkB}), rgb(${lightR}, ${lightG}, ${lightB}))`;
                } else if (validLights.length > 1) {
                  // Multiple different colours: blend using each light's actual colour
                  let stops = validLights.map(c => `rgb(${c[0]}, ${c[1]}, ${c[2]})`);
                  return `linear-gradient(to right, ${stops.join(', ')})`;
                }
                // Fallback colour when no lights are on
                return "#4e4457";
              ]]]
          - transition: background 0.5s ease-in-out
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: |
              [[[
                // Use the first available bulb's colour for the thumb (darkened)
                function getValidLights() {
                  let valid = [];
                  if (entity.attributes.entity_id && Array.isArray(entity.attributes.entity_id)) {
                    entity.attributes.entity_id.forEach(lightId => {
                      let light = states[lightId];
                      if (
                        light &&
                        light.state === 'on' &&
                        light.attributes.rgb_color &&
                        light.attributes.brightness > 0
                      ) {
                        valid.push(light.attributes.rgb_color);
                      }
                    });
                  }
                  return valid;
                }
                let validLights = getValidLights();
                if (validLights.length > 0) {
                  let [r, g, b] = validLights[0];
                  let dr = Math.floor(r * 0.3);
                  let dg = Math.floor(g * 0.3);
                  let db = Math.floor(b * 0.3);
                  return `rgb(${dr}, ${dg}, ${db})`;
                }
                return "#393646";
              ]]]
          - top: 2px
          - right: "-18px"
          - height: 36px
          - width: 36px
          - border-radius: 100px
styles:
  grid:
    - grid-template-areas: "\"n\" \"slider\""
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - background: |
        [[[
          // Get all valid lights (on, with rgb_color)
          function getValidLights() {
            let valid = [];
            if (entity.attributes.entity_id && Array.isArray(entity.attributes.entity_id)) {
              entity.attributes.entity_id.forEach(lightId => {
                let light = states[lightId];
                if (
                  light &&
                  light.state === 'on' &&
                  light.attributes.rgb_color &&
                  light.attributes.brightness > 0
                ) {
                  valid.push(light.attributes.rgb_color);
                }
              });
            }
            return valid;
          }
          // Check if all lights have the same colour
          function isUniform(lights) {
            if (lights.length === 0) return false;
            return lights.every(c => c[0] === lights[0][0] && c[1] === lights[0][1] && c[2] === lights[0][2]);
          }

          let validLights = getValidLights();

          if (validLights.length === 1 || (validLights.length > 1 && isUniform(validLights))) {
            // Single (or uniform) light: use original darker gradient logic
            let [r, g, b] = validLights[0];
            let darkR = Math.min(255, Math.floor(r * 0.4));
            let darkG = Math.min(255, Math.floor(g * 0.4));
            let darkB = Math.min(255, Math.floor(b * 0.4));
            let darkerR = Math.min(255, Math.floor(r * 0.5));
            let darkerG = Math.min(255, Math.floor(g * 0.5));
            let darkerB = Math.min(255, Math.floor(b * 0.5));
            return `linear-gradient(to right, rgb(${darkR}, ${darkG}, ${darkB}), rgb(${darkerR}, ${darkerG}, ${darkerB}))`;
          } else if (validLights.length > 1) {
            // Multiple different colours: create darker tinted gradient from each light's colour
            let stops = validLights.map(c => {
              let r = Math.min(255, Math.floor(c[0] * 0.4));
              let g = Math.min(255, Math.floor(c[1] * 0.4));
              let b = Math.min(255, Math.floor(c[2] * 0.4));
              return `rgb(${r}, ${g}, ${b})`;
            });
            return `linear-gradient(to right, ${stops.join(', ')})`;
          }
          // Fallback colour when off
          return "#393646";
        ]]]
    - padding: 16px
    - "--mdc-ripple-press-opacity": 0
    - transition: background 0.5s ease-in-out
  name:
    - justify-self: start
    - font-size: 14px
    - margin: 4px 0 12px 0
    - color: var(--contrast20)