---
title: Main
icon: 'mdi:shield-home'
panel: true
visible:
  - user: 1614b22cbef54f979741cf8a6b3413ec
  - user: 76e8af2547254ef0ab523ae1ad0bf81a
cards:
  - type: 'custom:layout-card'
    layout_type: 'custom:vertical-layout'
    layout:
      max_cols: 3
    cards:
      - type: vertical-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: template
                icon: mdi:faucet-variant
                icon_color: "{% if is_state('binary_sensor.presence_kitchen_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
                entity: binary_sensor.presence_kitchen_sensor_1
                tap_action:
                  action: more-info
              - type: template
                icon: mdi:sofa
                icon_color: "{% if is_state('binary_sensor.presence_living_room_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
                entity: binary_sensor.presence_living_room_sensor_1
                tap_action:
                  action: more-info
              - type: template
                icon: mdi:bed-king
                icon_color: "{% if is_state('binary_sensor.presence_bedroom_master_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
                entity: binary_sensor.presence_bedroom_master_sensor_1
                tap_action:
                  action: more-info
              - type: template
                icon: mdi:bed
                icon_color: "{% if is_state('binary_sensor.presence_bedroom_maxim_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
                entity: binary_sensor.presence_bedroom_maxim_sensor_1
                tap_action:
                  action: more-info
              - type: template
                icon: mdi:bed
                icon_color: "{% if is_state('binary_sensor.presence_bedroom_olivia_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
                entity: binary_sensor.presence_bedroom_olivia_sensor_1
                tap_action:
                  action: more-info
              - type: template
                icon: mdi:stairs
                icon_color: "{% if is_state('binary_sensor.presence_stairwell_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
                entity: binary_sensor.presence_stairwell_sensor_1
                tap_action:
                  action: more-info
              - type: template
                icon: mdi:garage-variant
                icon_color: "{% if is_state('binary_sensor.presence_garage_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
                entity: binary_sensor.presence_garage_sensor_1
                tap_action:
                  action: more-info
              - type: template
                icon: mdi:home-roof
                icon_color: "{% if is_state('binary_sensor.presence_garage_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
                entity: binary_sensor.presence_garage_sensor_1
                tap_action:
                  action: more-info

          - type: custom:bubble-card
            entity: alarm_control_panel.home_alarm
            card_type: button
            button_type: name
            name: Security
            icon: mdi:shield-check
            show_state: true
            show_last_changed: true
            sub_button:
              - name: Doors # sensor.number_doors_open
                icon: mdi:door-open
                show_state: false
                show_background: true
                tap_action:
                  action: navigate
                  navigation_path: '#popup-open-doors'
              - name: Windows # sensor.number_windows_open
                icon: mdi:window-open
                show_background: true
                tap_action:
                  action: navigate
                  navigation_path: '#popup-open-windows'
              - name: Lights  # sensor.number_light_on
                icon: mdi:lightbulb-group
                tap_action:
                  action: navigate
                  navigation_path: '#popup-on-lights'
              - name: Garage Cover
                icon: mdi:garage-variant
                entity: cover.garage_gate
                tap_action:
                  confirmation:
                    text: open/Close a Garage Cover?
                  action: call-service
                  service: cover.toggle
                  target:
                    entity_id: cover.garage_gate
              - name: Lock
                icon: mdi:lock-smart
                entity: lock.lock_01
                tap_action:
                  confirmation:
                    text: Lock/Unlock a Lock?
                  action: call-service
                  service: lock.lock
                  target:
                    entity_id: lock.lock_01
            modules:
              - badges
            badges:
              main_icon:
                badge_1:
                  icon: mdi:numeric-1-box
              sub_button_1:
                badge_1:
                  icon: mdi:numberc-1-box
            styles: |
              .bubble-button-background {
                opacity: 1 !important;
                background-color: ${ state === 'on' ? 'var(--light-theme-disabled-color)' : 'var(--light-theme-disabled-color)' } !important;
              }
              .bubble-sub-button-1 {
                background-color: white !important;
              }
              .bubble-sub-button-2 {
                background-color: white !important;
              }
              .bubble-sub-button-3 {
                background-color: white !important;
              }
              .bubble-sub-button-4 {
                background-color: white !important;
              }
              .bubble-sub-button-5 {
                background-color: white !important;
              }

          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                button_type: state
                name: Alexander Savin
                entity: person.alexander_savin
                show_state: true
                show_last_changed: true
                tap_action:
                  action: more-info
                button_action:
                  tap_action:
                    action: more-info
                sub_button:
                  - name: Map
                    icon: mdi:map-search-outline
                    show_state: false
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#popup-map'
                modules:
                  - progress_border
                progress_border:
                  entity: sensor.alex_s_google_pixel_8_pro_battery_level
                  color: purple
                  backcolor: deep-purple
                styles: |
                  .bubble-entity-picture {
                    display: flex !important;
                    background-image: url("/local/profile_savin_alex.jpg") !important;
                    background-size: 300%;
                  }
              - type: custom:bubble-card
                card_type: button
                button_type: state
                name: Tatiana Savin
                entity: person.tatiana_savin
                show_state: true
                show_last_changed: true
                tap_action:
                  action: more-info
                button_action:
                  tap_action:
                    action: more-info
                sub_button:
                  - name: Map
                    icon: mdi:map-search-outline
                    show_state: false
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#popup-map'
                modules:
                  - progress_border
                progress_border:
                  entity: sensor.tanya_s_google_pixel_8_pro_battery_level
                  color: purple
                  backcolor: deep-purple
                styles: |
                  .bubble-entity-picture {
                    display: flex !important;
                    background-image: url("/local/profile_savin_tanya.jpg") !important;
                    background-size: 300%;
                  }
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                button_type: state
                name: Maxim Savin
                entity: person.maxim_savin
                show_state: true
                show_last_changed: true
                tap_action:
                  action: more-info
                button_action:
                  tap_action:
                    action: more-info
                sub_button:
                  - name: Map
                    icon: mdi:map-search-outline
                    show_state: false
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#popup-map'
                modules:
                  - progress_border
                progress_border:
                  entity: sensor.maksims_iphone_battery_level
                  color: purple
                  backcolor: deep-purple
                styles: |
                  .bubble-entity-picture {
                    display: flex !important;
                    background-image: url("/local/profile_savin_maxim.jpg") !important;
                    background-size: 300%;
                  }
              - type: custom:bubble-card
                card_type: button
                button_type: state
                name: Olivia Savin
                entity: person.olivia_savin
                show_state: true
                show_last_changed: true
                tap_action:
                  action: more-info
                button_action:
                  tap_action:
                    action: more-info
                sub_button:
                  - name: Map
                    icon: mdi:map-search-outline
                    show_state: false
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#popup-map'
                modules:
                  - progress_border
                progress_border:
                  entity: sensor.olivia_google_pixel_watch_2_battery_level
                  color: purple
                  backcolor: deep-purple
                styles: |
                  .bubble-entity-picture {
                    display: flex !important;
                    background-image: url("/local/profile_savin_olivia.jpg") !important;
                    background-size: 300%;
                  }

      - type: custom:layout-break
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: climate
            entity: climate.living_room
            sub_button:
              - name: HVAC modes menu
                select_attribute: hvac_modes
                show_arrow: false
                state_background: false

          - type: custom:bubble-card
            card_type: button
            button_type: switch
            name: Vacuum
            entity: vacuum.roborock_s5_max
            icon: mdi:robot-vacuum
            show_state: true
            show_last_changed: true
            tap_action:
              action: more-info
            button_action:
              tap_action:
                action: navigate
                navigation_path: '#popup-vacuum-cleaner-kitchen'
            sub_button:
              - name: Battery
                icon: mdi:battery
                show_name: false
                show_icon: true
                show_background: false
                show_attribute: true
                attribute: battery_level
              - name: Return to dock
                icon: mdi:home
                show_background: false
                tap_action:
                  action: call-service
                  service: vacuum.return_to_base
                  target:
                    entity_id: vacuum.roborock_s5_max
              - name: Pause
                icon: mdi:pause
                show_background: false
                tap_action:
                  action: call-service
                  service: vacuum.pause
                  target:
                    entity_id: vacuum.roborock_s5_max
              - name: Start
                icon: mdi:play
                tap_action:
                  action: call-service
                  service: vacuum.start
                  target:
                    entity_id: vacuum.roborock_s5_max
            styles: |
              .bubble-button-card-container {
                /* Change the background color when the vacuum get an error (optional), more details in the styles template section */
                background: ${state === 'error' ? 'rgb(200, 80, 40)' : ''} !important;
              }
              /* Change the first sub-button battery icon based on the battery_icon attribute, more details in the styles template section */
              ${subButtonIcon[0].setAttribute("icon", hass.states['vacuum.roborock_s5_max'].attributes.battery_icon)}

          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                button_type: state
                name: Kitchen
                icon: 'mdi:countertop'
                entity: binary_sensor.presence_kitchen_sensor_2
                card_layout: large-2-rows
                grid_options:
                  columns: 6
                  rows: 3
                show_attribute: false
                show_name: true
                show_icon: true
                scrolling_effect: true
                show_state: true
                button_action:
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/2/
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/2/
                sub_button:
                  - entity: input_boolean.kitchen_light_state
                  - entity: sun.sun
                  - entity: sun.sun
                  - entity: sun.sun
                styles: |
                  :host{
                      --icon-Background-Color: #80bfff ;
                      --color-yellow: 255, 202, 58 ;
                      --color-blue: 25, 130, 196 ;
                      --color-green: 138, 201, 38 ;
                      --color-purple: 106, 76, 147 ;
                  }

                  .card-content {
                    width: 100%;
                    margin: 0 !important;
                  }

                  .bubble-button-card {
                    display: grid;
                    grid-template-areas:
                      'n n n b'
                      'l l l b'
                      'i i . b'
                      'i i . b';
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
                    justify-items: center;
                  }

                  .bubble-icon-container {
                    grid-area: i;
                    border-radius: 50% !important;
                    width: 150% !important;
                    height: 150% !important;
                    max-width: none !important;
                    max-height: none !important;
                    position: absolute !important;
                    place-self: center !important;
                    margin: 0px 0px 0px 0px !important;
                    padding: 0px, 0px, 0px, 0px !important;
                    background-color: var(--icon-Background-Color);
                  }

                  .bubble-icon {
                    width: 40%;
                    position: relative !important;
                    --mdc-icon-size: 100px !important;
                    opacity: 1 !important;
                  }

                  .bubble-name-container {
                    grid-area: n;
                    justify-self: start;
                    margin-left: 20px;
                    max-width: calc(100% -(12px + 0px));
                  }

                  .bubble-name {
                    font-weight: bold;
                    font-size: 16px;
                  }

                  .bubble-state {
                    font-weight: bold;
                    font-size: 14px;
                  }

                  .large .bubble-sub-button-container {
                    grid-area: b;
                    display: flex !important;
                    flex-wrap: wrap;
                    flex-direction: column;
                    gap: calc((100% - 4 * 36px)/5) !important;
                    justify-content: flex-start;
                    width: auto !important;
                    right: 0px !important;
                    padding-right: 0px !important;
                    height: 100% !important;
                    top: calc((100% - 4 * 36px)/5) !important;
                  }

                  .large .bubble-button-card-container {
                    height: 200px !important;
                  }

                  .large .bubble-sub-button {
                    height: 36px !important;
                  }

                  ${card.querySelector('.bubble-state').innerText = hass.states['sensor.climate_kitchen_01_temperature'].state + "°C | " + hass.states['sensor.climate_kitchen_01_humidity'].state + "%"}

              - type: custom:bubble-card
                card_type: button
                button_type: state
                name: Living Room
                icon: 'mdi:sofa'
                entity: binary_sensor.presence_living_room_sensor_1
                card_layout: large-2-rows
                grid_options:
                  columns: 6
                  rows: 3
                show_attribute: false
                show_name: true
                show_icon: true
                scrolling_effect: true
                show_state: true
                button_action:
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/3/
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/3/
                sub_button:
                  - entity: input_boolean.living_room_light_state
                  - entity: sun.sun
                  - entity: sun.sun
                  - entity: sun.sun
                styles: |
                  :host{
                      --icon-Background-Color: #80bfff ;
                      --color-yellow: 255, 202, 58 ;
                      --color-blue: 25, 130, 196 ;
                      --color-green: 138, 201, 38 ;
                      --color-purple: 106, 76, 147 ;
                  }

                  .card-content {
                    width: 100%;
                    margin: 0 !important;
                  }

                  .bubble-button-card {
                    display: grid;
                    grid-template-areas:
                      'n n n b'
                      'l l l b'
                      'i i . b'
                      'i i . b';
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
                    justify-items: center;
                  }

                  .bubble-icon-container {
                    grid-area: i;
                    border-radius: 50% !important;
                    width: 150% !important;
                    height: 150% !important;
                    max-width: none !important;
                    max-height: none !important;
                    position: absolute !important;
                    place-self: center !important;
                    margin: 0px 0px 0px 0px !important;
                    padding: 0px, 0px, 0px, 0px !important;
                    background-color: var(--icon-Background-Color);
                  }

                  .bubble-icon {
                    width: 40%;
                    position: relative !important;
                    --mdc-icon-size: 100px !important;
                    opacity: 1 !important;
                  }

                  .bubble-name-container {
                    grid-area: n;
                    justify-self: start;
                    margin-left: 20px;
                    max-width: calc(100% -(12px + 0px));
                  }

                  .bubble-name {
                    font-weight: bold;
                    font-size: 16px;
                  }

                  .bubble-state {
                    font-weight: bold;
                    font-size: 14px;
                  }

                  .large .bubble-sub-button-container {
                    grid-area: b;
                    display: flex !important;
                    flex-wrap: wrap;
                    flex-direction: column;
                    gap: calc((100% - 4 * 36px)/5) !important;
                    justify-content: flex-start;
                    width: auto !important;
                    right: 0px !important;
                    padding-right: 0px !important;
                    height: 100% !important;
                    top: calc((100% - 4 * 36px)/5) !important;
                  }

                  .large .bubble-button-card-container {
                    height: 200px !important;
                    overflow: hidden !important;
                  }

                  .large .bubble-sub-button {
                    height: 36px !important;
                  }

                  ${card.querySelector('.bubble-state').innerText = hass.states['sensor.climate_living_room_01_temperature'].state + "°C | " + hass.states['sensor.climate_living_room_01_humidity'].state + "%"}

          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                button_type: state
                name: Master Bedroom
                icon: 'mdi:bed-king'
                entity: binary_sensor.presence_bedroom_master_sensor_1
                card_layout: large-2-rows
                grid_options:
                  columns: 6
                  rows: 3
                show_attribute: false
                show_name: true
                show_icon: true
                scrolling_effect: true
                show_state: true
                button_action:
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/4/
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/4/
                sub_button:
                  - entity: input_boolean.bedroom_master_light_state
                  - entity: sun.sun
                  - entity: sun.sun
                  - entity: sun.sun
                styles: |
                  :host{
                      --icon-Background-Color: #80bfff ;
                      --color-yellow: 255, 202, 58 ;
                      --color-blue: 25, 130, 196 ;
                      --color-green: 138, 201, 38 ;
                      --color-purple: 106, 76, 147 ;
                  }

                  .card-content {
                    width: 100%;
                    margin: 0 !important;
                  }

                  .bubble-button-card {
                    display: grid;
                    grid-template-areas:
                      'n n n b'
                      'l l l b'
                      'i i . b'
                      'i i . b';
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
                    justify-items: center;
                  }

                  .bubble-icon-container {
                    grid-area: i;
                    border-radius: 50% !important;
                    width: 150% !important;
                    height: 150% !important;
                    max-width: none !important;
                    max-height: none !important;
                    position: absolute !important;
                    place-self: center !important;
                    margin: 0px 0px 0px 0px !important;
                    padding: 0px, 0px, 0px, 0px !important;
                    background-color: var(--icon-Background-Color);
                  }

                  .bubble-icon {
                    width: 40%;
                    position: relative !important;
                    --mdc-icon-size: 100px !important;
                    opacity: 1 !important;
                  }

                  .bubble-name-container {
                    grid-area: n;
                    justify-self: start;
                    margin-left: 20px;
                    max-width: calc(100% -(12px + 0px));
                  }

                  .bubble-name {
                    font-weight: bold;
                    font-size: 16px;
                  }

                  .bubble-state {
                    font-weight: bold;
                    font-size: 14px;
                  }

                  .large .bubble-sub-button-container {
                    grid-area: b;
                    display: flex !important;
                    flex-wrap: wrap;
                    flex-direction: column;
                    gap: calc((100% - 4 * 36px)/5) !important;
                    justify-content: flex-start;
                    width: auto !important;
                    right: 0px !important;
                    padding-right: 0px !important;
                    height: 100% !important;
                    top: calc((100% - 4 * 36px)/5) !important;
                  }

                  .large .bubble-button-card-container {
                    height: 200px !important;
                  }

                  .large .bubble-sub-button {
                    height: 36px !important;
                  }

                  ${card.querySelector('.bubble-state').innerText = hass.states['sensor.climate_bedroom_master_01_temperature'].state + "°C | " + hass.states['sensor.climate_bedroom_master_01_humidity'].state + "%"}

              - type: custom:bubble-card
                card_type: button
                button_type: state
                name: Olivia Bedroom
                icon: 'mdi:bed'
                entity: binary_sensor.presence_bedroom_olivia_sensor_1
                card_layout: large-2-rows
                grid_options:
                  columns: 6
                  rows: 3
                show_attribute: false
                show_name: true
                show_icon: true
                scrolling_effect: true
                show_state: true
                button_action:
                  tap_action:
                    action: navigate
                    navigation_path: /lovelace/6/
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/6/
                sub_button:
                  - entity: input_boolean.bedroom_olivia_light_state
                  - entity: sun.sun
                  - entity: sun.sun
                  - entity: sun.sun
                styles: |
                  :host{
                      --icon-Background-Color: #80bfff ;
                      --color-yellow: 255, 202, 58 ;
                      --color-blue: 25, 130, 196 ;
                      --color-green: 138, 201, 38 ;
                      --color-purple: 106, 76, 147 ;
                  }

                  .card-content {
                    width: 100%;
                    margin: 0 !important;
                  }

                  .bubble-button-card {
                    display: grid;
                    grid-template-areas:
                      'n n n b'
                      'l l l b'
                      'i i . b'
                      'i i . b';
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
                    justify-items: center;
                  }

                  .bubble-icon-container {
                    grid-area: i;
                    border-radius: 50% !important;
                    width: 150% !important;
                    height: 150% !important;
                    max-width: none !important;
                    max-height: none !important;
                    position: absolute !important;
                    place-self: center !important;
                    margin: 0px 0px 0px 0px !important;
                    padding: 0px, 0px, 0px, 0px !important;
                    background-color: var(--icon-Background-Color);
                  }

                  .bubble-icon {
                    width: 40%;
                    position: relative !important;
                    --mdc-icon-size: 100px !important;
                    opacity: 1 !important;
                  }

                  .bubble-name-container {
                    grid-area: n;
                    justify-self: start;
                    margin-left: 20px;
                    max-width: calc(100% -(12px + 0px));
                  }

                  .bubble-name {
                    font-weight: bold;
                    font-size: 16px;
                  }

                  .bubble-state {
                    font-weight: bold;
                    font-size: 14px;
                  }

                  .large .bubble-sub-button-container {
                    grid-area: b;
                    display: flex !important;
                    flex-wrap: wrap;
                    flex-direction: column;
                    gap: calc((100% - 4 * 36px)/5) !important;
                    justify-content: flex-start;
                    width: auto !important;
                    right: 0px !important;
                    padding-right: 0px !important;
                    height: 100% !important;
                    top: calc((100% - 4 * 36px)/5) !important;
                  }

                  .large .bubble-button-card-container {
                    height: 200px !important;
                    overflow: hidden !important;
                  }

                  .large .bubble-sub-button {
                    height: 36px !important;
                  }

                  ${card.querySelector('.bubble-state').innerText = hass.states['sensor.climate_bedroom_olivia_01_temperature'].state + "°C | " + hass.states['sensor.climate_bedroom_olivia_01_humidity'].state + "%"}


      - type: custom:layout-break
      - type: vertical-stack
        cards:
          - type: weather-forecast
            entity: weather.my_weather_station
            secondary_info_attribute: humidity
            show_current: true
            show_forecast: true
          - type: horizontal-stack
            cards:
              - type: picture
                image: https://objects.savin.nyc/api/frontyard/person/best.jpg
              - type: picture
                image: https://objects.savin.nyc/api/side1/person/best.jpg
          - type: horizontal-stack
            cards:
              - type: picture
                image: https://objects.savin.nyc/api/doorbell/person/best.jpg
              - type: picture
                image: https://objects.savin.nyc/api/entrance/person/best.jpg
          - type: horizontal-stack
            cards:
              - type: picture
                image: https://objects.savin.nyc/api/side2/person/best.jpg
              - type: picture
                image: https://objects.savin.nyc/api/backyard/person/best.jpg


      - type: vertical-stack
        cards:
          - type: 'custom:bubble-card'
            card_type: pop-up
            hash: '#popup-open-windows'
            name: Windows
            icon: 'mdi:window-open'
          - type: 'custom:bubble-card'
            card_type: button
            button_type: name
            name: Kitchen
            icon: mdi:countertop
            show_state: false
            sub_button:
              - name: Kitchen Window
                entity: binary_sensor.window_kitchen_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
            styles: |
                  .bubble-sub-button-1 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-1 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}

          - type: 'custom:bubble-card'
            card_type: button
            button_type: name
            name: Living Room
            icon: mdi:sofa
            show_state: false
            sub_button:
              - name: Front (Left)
                entity: binary_sensor.window_living_room_front_left_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
              - name: Front (Center)
                entity: binary_sensor.window_living_room_front_center_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
              - name: Front (Right)
                entity: binary_sensor.window_living_room_front_right_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
              - name: Side
                entity: binary_sensor.window_living_room_side_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
            styles: |
                  .bubble-sub-button-1 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-1 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_living_room_front_left_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  .bubble-sub-button-2 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-2 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_living_room_front_center_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  .bubble-sub-button-3 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-3 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_living_room_front_right_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  .bubble-sub-button-4 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-4 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_living_room_side_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_living_room_front_left_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
                  ${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.window_living_room_front_center_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
                  ${subButtonIcon[2].setAttribute("icon", hass.states['binary_sensor.window_living_room_front_right_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
                  ${subButtonIcon[3].setAttribute("icon", hass.states['binary_sensor.window_living_room_side_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}

          - type: 'custom:bubble-card'
            card_type: button
            button_type: name
            name: Master Bedroom
            icon: mdi:bed-king
            show_state: false
            sub_button:
              - name: Front (Left)
                entity: binary_sensor.window_bedroom_master_left_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
              - name: Front (Center)
                entity: binary_sensor.window_bedroom_master_center_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
              - name: Front (Right)
                entity: binary_sensor.window_bedroom_master_right_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
            styles: |
                  .bubble-sub-button-1 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-1 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_bedroom_master_left_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  .bubble-sub-button-2 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-2 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_bedroom_master_center_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  .bubble-sub-button-3 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-3 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_bedroom_master_right_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bedroom_master_left_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
                  ${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.window_bedroom_master_center_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
                  ${subButtonIcon[2].setAttribute("icon", hass.states['binary_sensor.window_bedroom_master_right_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}

          - type: 'custom:bubble-card'
            card_type: button
            button_type: name
            name: Maxim Bedroom
            icon: mdi:bed
            show_state: false
            sub_button:
              - name: Window
                entity: binary_sensor.window_bedroom_max_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
            styles: |
                  .bubble-sub-button-1 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-1 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_bedroom_max_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bedroom_max_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
          - type: 'custom:bubble-card'
            card_type: button
            button_type: name
            name: Olivia Bedroom
            icon: mdi:bed
            show_state: false
            sub_button:
              - name: Window
                entity: binary_sensor.window_bedroom_olivia_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
            styles: |
                  .bubble-sub-button-1 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-1 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_bedroom_olivia_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bedroom_olivia_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
          - type: 'custom:bubble-card'
            card_type: button
            button_type: name
            name: Master Bathroom
            icon: mdi:shower
            show_state: false
            sub_button:
              - name: Window
                entity: binary_sensor.window_bathroom_master_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
            styles: |
                  .bubble-sub-button-1 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-1 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_bathroom_master_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bathroom_master_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}
          - type: 'custom:bubble-card'
            card_type: button
            button_type: name
            name: Bedroom Bathroom
            icon: mdi:shower
            show_state: false
            sub_button:
              - name: Window
                entity: binary_sensor.window_bathroom_bedroom_01_contact
                icon: mdi:window-closed
                show_state: false
                show_background: true
            styles: |
                  .bubble-sub-button-1 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-1 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_bathroom_bedroom_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_bathroom_bedroom_01_contact'].state === 'on' ? 'mdi:window-open' : 'mdi:window-closed')}


      - type: vertical-stack
        cards:
          - type: 'custom:bubble-card'
            card_type: pop-up
            hash: '#popup-open-doors'
            name: Doors
            icon: 'mdi:door-open'
          - type: 'custom:bubble-card'
            card_type: button
            button_type: name
            name: Kitchen
            icon: mdi:countertop
            show_state: false
            sub_button:
              - name: Kitchen Door
                entity: binary_sensor.door_kitchen_01
                icon: mdi:door-sliding
                show_state: false
                show_background: true
            styles: |
                  .bubble-sub-button-1 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-1 > ha-icon {
                    color: ${ hass.states['binary_sensor.door_kitchen_01'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.door_kitchen_01'].state === 'on' ? 'mdi:door-sliding-open' : 'mdi:door-sliding')}
          - type: 'custom:bubble-card'
            card_type: button
            button_type: name
            name: Living Room
            icon: mdi:sofa
            show_state: false
            sub_button:
              - name: Entrance Door
                entity: binary_sensor.door_entrance_01
                icon: mdi:door-closed
                show_state: false
                show_background: true
            styles: |
                  .bubble-sub-button-1 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-1 > ha-icon {
                    color: ${ hass.states['binary_sensor.door_entrance_01'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.door_entrance_01'].state === 'on' ? 'mdi:door-open' : 'mdi:door-closed')}
          - type: 'custom:bubble-card'
            card_type: button
            button_type: name
            name: Garage
            icon: mdi:garage-variant
            show_state: false
            sub_button:
              - name: Garage Gate
                entity: binary_sensor.door_kitchen_01_contact
                icon: mdi:garage-variant
                show_state: false
                show_background: true
              - name: Garage Door
                entity: binary_sensor.door_garage_01_contact
                icon: mdi:door-closed
                show_state: false
                show_background: true
            styles: |
                  .bubble-sub-button-1 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-1 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  .bubble-sub-button-2 {
                    background-color: white !important;
                  }
                  .bubble-sub-button-2 > ha-icon {
                    color: ${ hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'rgb(255, 152, 0)' : '' } !important;
                  }
                  ${subButtonIcon[0].setAttribute("icon", hass.states['binary_sensor.window_kitchen_01_contact'].state === 'on' ? 'mdi:garage-open-variant' : 'mdi:garage-variant')}
                  ${subButtonIcon[1].setAttribute("icon", hass.states['binary_sensor.door_garage_01_contact'].state === 'on' ? 'mdi:door-open' : 'mdi:door-closed')}

      - type: vertical-stack
        cards:
          - type: 'custom:bubble-card'
            card_type: pop-up
            hash: '#popup-on-lights'
            name: Doors
            icon: 'mdi:door-open'
          - type: custom:auto-entities
            card:
              type: grid
              columns: 1
              square: false
            card_param: cards
            filter:
              include:
                - domain: light
                  state: 'on'
                  options:
                    type: custom:bubble-card
                    card_type: button
                    button_type: slider
                    show_attribute: false
                    show_last_changed: true
                    show_state: true
              exclude: []
            show_empty: true

      - type: vertical-stack
        cards:
          - type: 'custom:bubble-card'
            card_type: pop-up
            hash: '#popup-vacuum-cleaner-kitchen'
            name: Vacuum Cleaner
            icon: 'mdi:door-open'
          - type: horizontal-stack
            cards:
              - type: custom:xiaomi-vacuum-map-card
                entity: vacuum.roborock_s5_max
                map_source:
                  camera: camera.xiaomi_cloud_map_extractor
                calibration_source:
                  camera: true
                debug: false
                map_modes:
                  - template: vacuum_clean_zone
                  - template: vacuum_goto
                  - template: vacuum_clean_zone_predefined
                    predefined_selections:
                      - zones: [[26600,21200,23600,27000]] # Kitchen
                      - zones: [[32700,26000,26600,20700]] # Living Room
                map_locked: true

      - type: vertical-stack
        cards:
          - type: 'custom:bubble-card'
            card_type: pop-up
            hash: '#popup-map'
            name: Map
            icon: 'mdi:map-search-outline'
          - type: map
            aspect_ratio: 100%
            entities:
              - entity: person.alexander_savin
              - entity: person.tatiana_savin
              - entity: person.maxim_savin
              - entity: person.olivia_savin
              - entity: device_tracker.subaru_outback_txt
              - zone.home
              - zone.npfd
              - zone.work_kiswe
              - zone.ymca_berkley_heights
              - zone.nphs_school
              - zone.awr_school