type: horizontal-stack
cards:
  - type: custom:button-card
    entity: sensor.multi_sensor_temperature_01
    color_type: card
    show_name: true
    show_label: true
    show_icon: true
    show_state: true
    name: Kitchen
    icon: mdi:silverware-fork-knife
    state_display: |
      [[[
        var a = entity.state;
        var floatValue = parseFloat(a.replace(/, /, '.'));
        return floatValue.toFixed(1).toString().replace('.',',')+ ' °C';
      ]]]
    custom_fields:
      icon1: >
        [[[return '<ha-icon icon="mdi:lightbulb" style="width: 20px; height:
        20px; color: green;"> </ha-icon>';]]]
      icon2: >
        [[[return '<ha-icon icon="mdi:motion-sensor-off" style="width: 20px;
        height: 20px;"> </ha-icon>';]]]
      icon3: >
        [[[return '<ha-icon icon="mdi:door-open" style="width: 20px; height:
        20px;color: red"> </ha-icon>';]]]
      icon4: >
        [[[return '<ha-icon icon="mdi:lock-open" style="width: 20px; height:
        20px; color: red"> </ha-icon>';]]]
    styles:
      grid:
        - grid-template-areas: '"l" "i" "n" "s"'
        - grid-template-rows: 1fr 2fr min-content min-content
        - grid-template-columns: 1fr
      custom_fields:
        icon1:
          - position: absolute
          - left: 85%
          - top: 5%
        icon2:
          - position: absolute
          - left: 85%
          - top: 30%
        icon3:
          - position: absolute
          - left: 85%
          - top: 55%
        icon4:
          - position: absolute
          - left: 85%
          - top: 80%
  - type: custom:button-card
    entity: sensor.multi_sensor_temperature_02
    color_type: card
    show_name: true
    show_label: true
    show_icon: true
    show_state: true
    name: Living Room
    icon: mdi:sofa
    state_display: |
      [[[
        var a = entity.state;
        var floatValue = parseFloat(a.replace(/, /, '.'));
        return floatValue.toFixed(1).toString().replace('.',',')+ ' °C';
      ]]]
    custom_fields:
      icon1: >
        [[[return '<ha-icon icon="mdi:lightbulb-off" style="width: 20px; height:
        20px;;"> </ha-icon>';]]]
      icon2: >
        [[[return '<ha-icon icon="mdi:motion-sensor" style="width: 20px; height:
        20px; color: red;"> </ha-icon>';]]]
      icon3: >
        [[[return '<ha-icon icon="mdi:door-closed" style="width: 20px; height:
        20px;"> </ha-icon>';]]]
      icon4: >
        [[[return '<ha-icon icon="mdi:lock" style="width: 20px; height: 20px;
        color: green"> </ha-icon>';]]]
    styles:
      grid:
        - grid-template-areas: '"l" "i" "n" "s"'
        - grid-template-rows: 1fr 2fr min-content min-content
        - grid-template-columns: 1fr
      custom_fields:
        icon1:
          - position: absolute
          - left: 85%
          - top: 5%
        icon2:
          - position: absolute
          - left: 85%
          - top: 30%
        icon3:
          - position: absolute
          - left: 85%
          - top: 55%
        icon4:
          - position: absolute
          - left: 85%
          - top: 80%