Roombutton

aspect_ratio: 1/1
icon: mdi:sofa
name: woonkamer
show_state: false
size: 40%
styles:
  card:
    - font-size: 12px
  grid:
    - grid-template-areas: '"heating lights" "i i" "n n" "stats stats"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: min-content 1fr min-content min-content
  name:
    - justify-self: start
    - padding-left: 10px
    - font-weight: bold
    - font-size: 16px
    - text-transform: lowercase
  img_cell:
    - align-self: start
    - text-align: middle
  custom_fields:
    lights:
      - align-self: start
      - justify-self: end
      - padding-right: 10px
      - color: '#f7cd89'
      - '--icon-color-sensor': >-
          [[[ if (states["light.woonkamer_lampen"].state == "off") return
          "#636363"; ]]]
    heating:
      - align-self: start
      - justify-self: start
      - padding-left: 10px
      - color: '#f789b3'
      - '--icon-color-sensor': >-
          [[[ if (states["climate.lyric_b7ae7e"].state == "off") return
          "#636363"; ]]]
    stats:
      - padding-left: 8px
      - align-self: start
      - justify-self: start
custom_fields:
  heating: |
    [[[
      return `<ha-icon
        icon="mdi:fire"
        style="width: 26px; height: 26px; color: var(--icon-color-sensor">
        </ha-icon>`
    ]]]
  lights: |
    [[[ if (states["light.woonkamer_lampen"].state == "on")
      return `<ha-icon
        icon="mdi:lightbulb-outline"
        style="width: 26px; height: 26px; color: var(--icon-color-sensor">
        </ha-icon>`
       if (states["light.woonkamer_lampen"].state == "off")
      return `<ha-icon
        icon="mdi:lightbulb-off-outline"
        style="width: 26px; height: 26px; color: var(--icon-color-sensor">
        </ha-icon>`
    ]]]
  stats: |
    [[[
      return `<ha-icon
        icon="mdi:thermometer"
        style="width: 12px; height: 12px; color: #f789b3;">
        </ha-icon><span>${states['sensor.lumi_lumi_weather_temperature'].state}°C </span>
        <ha-icon
        icon="hass:water"
        style="width: 12px; height: 12px; color: var(--primary-color)">
        </ha-icon><span>${states['sensor.lumi_lumi_weather_humidity'].state}%</span>`
    ]]]
type: custom:button-card
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Woonkamer
    hide_header: false
    card:
      type: vertical-stack
      cards:
#Insert your cards here