type: custom:button-card
name: Wohnzimmer
icon: mdi:sofa-outline
tap_action:
  action: navigate
  navigation_path: /lovelace/wohnzimmer
entity: sensor.sensor_wohnzimmer_temperature
label: |
  [[[
    let temperature = states['sensor.sensor_wohnzimmer_temperature'].state + ' °C';
    let humidity = states['sensor.sensor_wohnzimmer_humidity'].state + '%';
    let presence = states['binary_sensor.presence_sensor_presence'].state;  // Ersetze dies durch deinen tatsächlichen Presence Sensor

    if (presence === 'on') {
      return temperature + ' | ' + humidity + ' | 🟠';
    } else {
      return temperature + ' | ' + humidity;
    }
  ]]] 
show_label: true
custom_fields:
  btn:
    card:
      type: vertical-stack
      cards:
        - type: custom:button-card
          tap_action:
            action: navigate
            navigation_path: "#pop-up-wohnzimmer-lampen"
          entity: light.raum_wohnzimmer
          show_name: false
          state:
            - value: "on"
              styles:
                card:
                  - background-color: rgba(255, 152, 0, 0.2)
                icon:
                  - color: rgb(255, 152, 0)
            - value: "off"
              styles:
                card:
                  - background-color: rgba(96,114,116,0.1)
          styles:
            card:
              - padding: 4px
              - width: 37px
              - height: 37px
              - border-radius: 12px
              - box-shadow: none
            icon:
              - width: 20px
        - type: custom:button-card
          tap_action:
            action: navigate
            navigation_path: "#pop-up-wohnzimmer-fenster"
          entity: binary_sensor.raum_wohnzimmer
          icon: mdi:window-closed-variant
          state:
            - value: "on"
              icon: mdi:window-open-variant
              styles:
                icon:
                  - color: var(--primary-color)
                card:
                  - background: rgba(33, 150, 243, 0.1)
          show_name: false
          styles:
            card:
              - padding: 4px
              - width: 37px
              - height: 37px
              - border-radius: 12px
              - box-shadow: none
              - background-color: rgba(96,114,116,0.1)
            icon:
              - width: 20px
        - type: custom:button-card
          tap_action:
            action: navigate
            navigation_path: "#pop-up-wohnzimmer-fenster"
          entity: climate.thermostat_wohnzimmer_2
          show_name: false
          state:
            - value: "off"
              styles:
                icon:
                  - color: grey
                card:
                  - background-color: rgba(96,114,116,0.1)
          styles:
            card:
              - padding: 4px
              - width: 37px
              - height: 37px
              - border-radius: 12px
              - box-shadow: none
              - background-color: rgba(96,114,116,0.1)
            icon:
              - width: 20px
styles:
  grid:
    - grid-template-areas: "\"n btn\" \"l btn\" \"i btn\""
    - grid-template-columns: 1fr min-content
    - grid-template-rows: min-content min-content 1fr
  card:
    - padding: 15px
    - border-radius: 12px
  custom_fields:
    btn:
      - justify-content: end
      - align-self: start
      - margin-left: 8px
  name:
    - justify-self: start
    - align-self: start
    - font-size: 14px
    - font-weight: 500
    - color: var(--primary-text-color)
    - margin-left: "-10px"
    - margin-top: "-7px"
  label:
    - justify-self: start
    - align-self: start
    - font-size: 12px
    - opacity: 0.9
    - margin-left: "-10px"
    - margin-top: 2px
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 140px
    - height: 140px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -20px
    - border-radius: 40px
    - background: rgba(33, 150, 243, 0.1)
  icon:
    - width: 90px
    - color: rgb(33, 150, 243)
show_state: false
layout_options:
  grid_columns: 2
  grid_rows: 2.6