- theme: Backend-selected
    title: Полигон
    icon: mdi:ab-testing
    layout: {}
    type: custom:horizontal-layout
    path: polygon
    badges: []
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:bubble-card
            card_type: button
            button_type: state
            icon: ''
            show_name: true
            card_layout: large
            show_icon: true
            force_icon: false
            show_state: false
            show_last_changed: false
            show_last_updated: true
            show_attribute: false
            entity: person.mikhail
            button_action:
              tap_action:
                action: more-info
            styles: |-
              .bubble-button-background {
                background-color: ${
                  {
                    'home': '#8AD926FF',
                    'away': '#1982C4FF',
                  }[state] ?? '#ff0000AA'
                };
              }
          - type: custom:bubble-card
            card_type: button
            button_type: switch
            entity: person.roman
            icon: ''
            show_name: true
            card_layout: large
            show_state: false
            show_last_changed: false
            show_last_updated: true
            button_action:
              tap_action:
                action: more-info
      - type: horizontal-stack
        cards:
          - type: custom:bubble-card
            card_type: button
            button_type: switch
            icon: mdi:weather-partly-cloudy
            show_name: false
            card_layout: large
            show_icon: true
            force_icon: true
            show_state: true
            show_last_changed: false
            show_last_updated: false
            show_attribute: true
            entity: weather.yandex_weather
            button_action:
              tap_action:
                action: more-info
            attribute: temperature
            modules:
              - get_state_attribute
            get_state_attribute:
              - entity: weather.yandex_weather
              - entity: weather.yandex_weather
                attribute: temperature
              - entity: weather.yandex_weather
                attribute: wind_speed
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.yeelink_strip6_c28f_light
        name: Светодиодная лента
        icon: mdi:led-strip-variant
        card_layout: large
        sub_button: []
        rows: '1'
        slider_live_update: false
        read_only_slider: false
        use_accent_color: true
        allow_light_slider_to_0: false
        light_transition: true
      - type: custom:bubble-card
        card_type: media-player
        name: ТВ Приставка
        entity: media_player.mibox4
        show_state: true
        show_last_updated: false
        show_attribute: false
        card_layout: large
        scrolling_effect: true
        show_icon: true
        force_icon: true
        show_name: true
        show_last_changed: false
        columns: 2
        rows: 1
        min_volume: 0
        max_volume: 100
        cover_background: true
        hide:
          play_pause_button: true
          volume_button: false
          previous_button: true
          next_button: true
          power_button: true
        sub_button: []
        icon: mdi:television
        attribute: friendly_name
        button_action:
          tap_action:
            action: more-info
        modules:
          - conditional_icon
        icon_container_color:
          color: blue-grey
        conditional_icon:
          advanced_settings:
            color_true: dark-grey
            color_false: dark-grey
          conditions:
            - condition: device
              device_id: 4a904b5168cb609dd3e9c788d17a3a34
              domain: media_player
              entity_id: 31690791dbcacc0190eaf40887eee06d
              type: is_idle
      - type: custom:bubble-card
        card_type: cover
        button_type: state
        event_action:
          tap_action:
            action: more-info
          double_tap_action:
            action: none
          hold_action:
            action: none
        icon_open: mdi:gate-open
        entity: vacuum.dreame_p2009_05bd_robot_cleaner
        sub_button: []
        card_layout: large
        icon_down: mdi:window-shutter
        icon_up: mdi:window-shutter-open
        force_icon: true
        icon_close: mdi:gate
        show_icon: true
        name: Ворота
        show_last_changed: false
        show_last_updated: false
        show_state: true
        show_attribute: false
        rows: '1'
        button_action: {}
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: vacuum.dreame_p2009_05bd_robot_cleaner
        force_icon: false
        show_last_changed: false
        show_state: true
        show_attribute: true
        attribute: battery_level
        sub_button:
          - entity: button.dreame_p2009_05bd_start_charge
            icon: mdi:home
            show_attribute: false
            show_last_updated: false
          - entity: button.dreame_p2009_05bd_start_sweep
            icon: mdi:play
          - entity: button.dreame_p2009_05bd_stop_sweeping
            icon: mdi:stop
          - entity: camera.dreame_p2009_05bd_map
            icon: mdi:map-search
        card_layout: large
      - type: custom:bubble-card
        card_type: select
        entity: select.dreame_p2009_05bd_mode
        force_icon: false
        show_icon: true
        show_state: true
        show_last_changed: false
        show_last_updated: false
        show_attribute: true
        attribute: options
        card_layout: large-2-rows
        sub_button: []
        name: Кнопка выбора
        icon: mdi:vacuum
      - type: horizontal-stack
        cards:
          - type: custom:bubble-card
            card_type: button
            button_type: switch
            entity: light.yeelink_strip6_c28f_light
            show_name: true
            force_icon: true
            sub_button:
              - entity: light.yeelink_strip6_c28f_light
                show_background: true
                state_background: false
              - entity: light.yeelink_strip6_c28f_light
                state_background: false
                light_background: true
              - entity: light.yeelink_strip6_c28f_light
                state_background: false
                show_name: false
                show_state: false
                show_last_changed: false
                show_last_updated: false
            button_action:
              tap_action:
                action: none
            card_layout: large
            scrolling_effect: true
            show_icon: true
            use_accent_color: false
            show_state: true
            rows: '1'
            modules:
              - conditional_icon
            conditional_icon:
              advanced_settings:
                color_true: dark-grey
                color_false: dark-grey
              conditions:
                - condition: state
                  entity_id: light.yeelink_strip6_c28f_light
                  state:
                    - 'on'
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: input_boolean.silent_mode
        modules:
          - toggle_switch
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: light.yeelink_strip6_c28f_light
        modules:
          - conditional_icon
          - color_temp_slider
        card_layout: large
        conditional_icon:
          advanced_settings:
            color_true: dark-grey
            color_false: dark-grey
          conditions:
            - condition: device
              type: is_off
              device_id: 29ec80c4fabc681c70620ed9d38b7941
              entity_id: 3a98eae887f10ac4498a9060a9672fa3
              domain: light
        tap_to_slide: false
        relative_slide: false
        read_only_slider: false
        slider_live_update: false
        use_accent_color: false
        styles: |
          .bubble-buttons-container {
            --bubble-sub-button-light-background-color: var(--color-theme);
            #--icon-primary-color: grey;
          }
        allow_light_slider_to_0: true
        light_transition: false
        show_state: true
        show_last_changed: false
        show_last_updated: false
        show_attribute: true
        attribute: brightness
      - type: custom:bubble-card
        card_type: button
        button_type: slider
        entity: timer.bathroom_timer
        modules:
          - timer_progress
          - conditional_icon
        timer_progress:
          inverted: false
          startColor: disabled
          endColor: disabled
          timer_entity: timer.bathroom_timer
        show_state: true
        show_last_changed: false
        show_last_updated: false
        button_action:
          tap_action:
            action: perform-action
            target:
              entity_id: timer.bathroom_timer
            perform_action: timer.pause
        sub_button:
          - entity: timer.bathroom_timer
            show_attribute: false
            attribute: restore
            tap_action:
              action: perform-action
              target:
                entity_id:
                  - timer.bathroom_timer
              perform_action: timer.pause
            icon: mdi:pause
            show_background: true
            state_background: false
          - icon: mdi:play
            tap_action:
              action: call-service
              service: timer.start
              target:
                entity_id:
                  - timer.bathroom_timer
            state_background: false
        card_layout: large
        show_name: true
        show_attribute: true
        attribute: duration
        icon_container_color:
          color: none
        conditional_icon:
          advanced_settings:
            color_true: dark-grey
            color_false: dark-grey
          conditions:
            - condition: state
              entity_id: timer.bathroom_timer
              state:
                - active
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: sensor.dreame_p2009_05bd_battery_level
        force_icon: false
        show_icon: true
        scrolling_effect: true
        show_state: false
        show_last_changed: false
        sub_button:
          - entity: sensor.dreame_p2009_05bd_battery_level
            show_state: true
            show_icon: false
            state_background: false
            show_background: true
        modules:
          - conditional_icon
          - progress_bar
        progress_bar:
          progress_color: disabled
          min_value: 0
          max_value: 100
        card_layout: large
        conditional_icon:
          advanced_settings:
            color_true: dark-grey
            color_false: dark-grey
      - type: custom:bubble-card
        card_type: cover
        button_type: state
        event_action:
          tap_action:
            action: more-info
          double_tap_action:
            action: none
          hold_action:
            action: none
        icon_open: mdi:gate-open
        entity: vacuum.dreame_p2009_05bd_robot_cleaner
        sub_button: []
        card_layout: large
        icon_down: mdi:arrow-down-bold
        icon_up: mdi:arrow-up-bold
        force_icon: true
        icon_close: mdi:gate
        show_icon: true
        name: Ворота
        show_last_changed: false
        show_last_updated: false
        show_state: true
        show_attribute: false
        rows: '1'
        styles: |
          ha-card {
            --bubble-main-background-color: rgba(12,120,50,0.5) !important;
          }
          ha-card {
            --bubble-icon-background-color: rgb(230, 128, 41) !important;
          }
          .bubble-sub-button {
            height: 148px !important;
            min-width: 148px !important;
          }
          .bubble-sub-button-2 {
            background-color: blue !important;
          }
          .bubble-sub-button-icon {
            --mdc-icon-size: 126px !important;
          }
      - type: custom:bubble-card
        card_type: button
        card_layout: large
        button_type: name
        show_icon: false
        show_name: false
        sub_button:
          - name: Mute
            icon: mdi:volume-off
            tap_action:
              action: toggle
              service: input_boolean.toggle
            entity: input_boolean.silent_mode
          - name: Covers
            entity: cover.all_group
            show_background: true
            tap_action:
              action: navigate
              navigation_path: '#cover'
          - name: Shopping list
            icon: mdi:cart-outline
            show_background: true
            tap_action:
              action: navigate
              navigation_path: '#shopping-list'
          - name: Security
            icon: mdi:video-outline
            show_background: true
            tap_action:
              action: navigate
              navigation_path: '#security'
          - name: Settings
            icon: mdi:cog
            show_background: true
            tap_action:
              action: navigate
              navigation_path: '#configuration'
        styles: |
          .card-content {
            width: 100%;
            margin: 0 !important;
          }
          .bubble-button-card-container {
            background: none;
            border: none;
          }
          .bubble-sub-button {
            height: 46px !important;
            width: 46px !important;
          }
          .bubble-sub-button-container {
            display: flex !important;
            width: 100%;
            justify-content: space-between !important;
          }
          .bubble-sub-button-icon {
            --mdc-icon-size: inherit !important;
          }
          .bubble-name-container {
            margin-right: 0px !important;
          }
      - type: custom:bubble-card
        card_type: button
        card_layout: large
        button_type: name
        show_icon: false
        show_name: false
        sub_button:
          - name: Mute
            icon: mdi:volume-off
            tap_action:
              action: toggle
              service: input_boolean.toggle
            entity: input_boolean.silent_mode
          - name: Covers
            entity: cover.all_group
            show_background: true
            tap_action:
              action: navigate
              navigation_path: '#cover'
          - name: Shopping list
            icon: mdi:cart-outline
            show_background: true
            tap_action:
              action: navigate
              navigation_path: '#shopping-list'
          - name: Security
            icon: mdi:video-outline
            show_background: true
            tap_action:
              action: navigate
              navigation_path: '#security'
          - name: Settings
            icon: mdi:cog
            show_background: true
            tap_action:
              action: navigate
              navigation_path: '#configuration'
        styles: |
          .card-content {
            width: 100%;
            margin: 0 !important;
          }
          .bubble-sub-button {
            height: 43px !important;
            width: 45px !important;
          }
          .bubble-sub-button-container {
            display: flex !important;
            width: 100%;
            justify-content: space-between !important;
          }
          .bubble-sub-button-icon {
            --mdc-icon-size: inherit !important;
          }
          .bubble-name-container {
            margin-right: 0px !important;
          }
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: timer.bathroom_timer
        sub_button:
          - entity: timer.bathroom_timer
            tap_action:
              action: call-service
              service: timer.start
              target:
                entity_id: timer.bathroom_timer
            icon: mdi:play
          - entity: timer.bathroom_timer
            icon: mdi:pause
            tap_action:
              action: call-service
              service: timer.pause
              target:
                entity_id: timer.bathroom_timer
          - entity: timer.bathroom_timer
            icon: mdi:cancel
            tap_action:
              action: call-service
              target:
                entity_id: timer.bathroom_timer
              service: timer.cancel
          - entity: timer.bathroom_timer
            tap_action:
              action: call-service
              service: timer.finish
              target:
                entity_id: timer.bathroom_timer
            icon: mdi:clock-end
        show_attribute: false
        show_state: true
        show_name: true
        <force_icon: false
        show_icon: true
        show_last_changed: false
        card_layout: large
        styles: |
          :host{
            --circle-color: var(--bubble-accent-color, var(--accent-color));
            --percentage: ${(() => {
              card.timerEntity = hass.states[entity];
              const now = new Date();
              const endTime = new Date(card.timerEntity.attributes.finishes_at); 
              const runningTime = Math.round((endTime - now) / 1000);
              const maxtime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.duration + " UTC") / 1000);
              const remainingTime = Math.round(new Date("1970-01-01 " + card.timerEntity.attributes.remaining + " UTC") / 1000);

              var percentage = 0;
              if (isNaN(runningTime)) {
                percentage = 100 - Math.round( 100.0 * remainingTime / maxtime);
              } else {
                percentage = 100 - Math.round( 100.0 * runningTime / maxtime);
              }
              
              if (isNaN(percentage)) {
                return "0%";
              } else {
                return "" + percentage +"%";
              }
            })()};
          }
          .bubble-icon-container {
            background: radial-gradient(
                var(--card-background-color) 60%,
                transparent 0%
              ), conic-gradient(
                var(--circle-color) var(--percentage) 0%,
                var(--card-background-color) 0% 100%
              ) !important;
          }
          .bubble-icon-container:after {
            content: "" !important;
            height: 100% !important;
            width: 100% !important;
            position: absolute !important;
            border-radius: 50% !important;
            background: (var(--bubble-button-icon-background-color), 0.1) !important;
          }
          ${(() => {
            function UpdateState(){
              try {
                    let now = new Date(); 
                    let endTime = new Date(card.timerEntity.attributes.finishes_at); 
                    let runningTime = Math.round((endTime - now)/1000);
                    let hours = Math.floor(runningTime / 3600);
                    let minutes = Math.floor((runningTime - (hours * 3600)) / 60);
                    let remainingSeconds = runningTime % 60;
                    
                    card.querySelector('.bubble-state').innerText =
                        (hours > 0 ? (hours + ":") : "") +
                        ("0" + minutes).slice(-2) + ":" +
                        ("0" + remainingSeconds).slice(-2);

                  } catch (error) {
                    card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
                  }
            };
            
            if (card.timer == null && card.timerEntity.state === 'active') {
              card.timer = setInterval(()=>{UpdateState()}, 500);
            }else if (card.timerEntity.state != 'active'){
              clearInterval(card.timer);
              card.timer = null;
              if (card.timerEntity.state !='paused') {
                  card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.duration;
                } else if(card.timerEntity.state==='paused') {
                  card.querySelector('.bubble-state').innerText = card.timerEntity.attributes.remaining;
              }
            }
          })()}

          ${(() => {
            subButtonIcon[0].setAttribute("icon",card.timerEntity.state != 'active' ?'mdi:play' : 'mdi:replay');
          })()}
          ${(() => {
            if (card.timerEntity.state != 'active') {
              card.querySelector('.bubble-sub-button-2').classList.add("hidden");
            }
          })()}
          ${(() => {
            if (card.timerEntity.state === 'idle') {
              card.querySelector('.bubble-sub-button-3').classList.add("hidden");
            }
          })()}
          ${(() => {
            if (card.timerEntity.state === 'idle') {
              card.querySelector('.bubble-sub-button-4').classList.add("hidden");
            }
          })()}
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                card_layout: large
                button_type: name
                show_icon: false
                show_name: false
                sub_button:
                  - name: Mute
                    icon: mdi:volume-off
                    tap_action:
                      action: toggle
                      service: input_boolean.toggle
                    entity: input_boolean.silent_mode
                  - name: Covers
                    entity: cover.all_group
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#cover'
                  - name: Shopping list
                    icon: mdi:cart-outline
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#shopping-list'
                  - name: Security
                    icon: mdi:video-outline
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#security'
                  - name: Settings
                    icon: mdi:cog
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#configuration'
                styles: |
                  .card-content {
                    width: 100%;
                    margin: 0 !important;
                  }
                  .bubble-sub-button {
                    height: 43px !important;
                    width: 45px !important;
                  }
                  .bubble-sub-button-container {
                    display: flex !important;
                    width: 100%;
                    justify-content: space-between !important;
                  }
                  .bubble-sub-button-icon {
                    --mdc-icon-size: inherit !important;
                  }
                  .bubble-name-container {
                    margin-right: 0px !important;
                  }
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                card_layout: large
                button_type: name
                show_icon: false
                show_name: false
                sub_button:
                  - name: Mute
                    icon: mdi:volume-off
                    tap_action:
                      action: toggle
                      service: input_boolean.toggle
                    entity: input_boolean.silent_mode
                  - name: Covers
                    entity: cover.all_group
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#cover'
                  - name: Shopping list
                    icon: mdi:cart-outline
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#shopping-list'
                  - name: Security
                    icon: mdi:video-outline
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#security'
                  - name: Settings
                    icon: mdi:cog
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#configuration'
                styles: |
                  .card-content {
                    width: 100%;
                    margin: 0 !important;
                  }
                  .bubble-sub-button {
                    height: 43px !important;
                    width: 45px !important;
                  }
                  .bubble-sub-button-container {
                    display: flex !important;
                    width: 100%;
                    justify-content: space-between !important;
                  }
                  .bubble-sub-button-icon {
                    --mdc-icon-size: inherit !important;
                  }
                  .bubble-name-container {
                    margin-right: 0px !important;
                  }
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                card_layout: large
                button_type: name
                show_icon: false
                show_name: false
                sub_button:
                  - name: Mute
                    icon: mdi:volume-off
                    tap_action:
                      action: toggle
                      service: input_boolean.toggle
                    entity: input_boolean.silent_mode
                  - name: Covers
                    entity: cover.all_group
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#cover'
                  - name: Shopping list
                    icon: mdi:cart-outline
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#shopping-list'
                  - name: Security
                    icon: mdi:video-outline
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#security'
                  - name: Settings
                    icon: mdi:cog
                    show_background: true
                    tap_action:
                      action: navigate
                      navigation_path: '#configuration'
                styles: |
                  .card-content {
                    width: 100%;
                    margin: 0 !important;
                  }
                  .bubble-sub-button {
                    height: 43px !important;
                    width: 45px !important;
                  }
                  .bubble-sub-button-container {
                    display: flex !important;
                    width: 100%;
                    justify-content: space-between !important;
                  }
                  .bubble-sub-button-icon {
                    --mdc-icon-size: inherit !important;
                  }
                  .bubble-name-container {
                    margin-right: 0px !important;
                  }
      - type: custom:auto-entities
        card:
          square: false
          type: grid
          columns: 1
        card_param: cards
        filter:
          template: |-
            {%- for state in states.sensor if "battery" in state.entity_id -%}
              {{
                {
                  "entity": state.entity_id,
                  "name": (state.name | regex_replace('(?i)\\s*Battery.*$','') | replace('_',' ') | trim),
                  "type": "custom:bubble-card",
                  "card_type": "button",
                  "button_type": "slider",
                  "show_last_changed": true,
                  "show_state": true,
                  "read_only_slider": true,
                  "scrolling_effect": true,

                  "tap_action": { "action": "none" },
                  "hold_action": { "action": "none" },
                  "double_tap_action": { "action": "none" },
                  "name_tap_action": { "action": "none" },
                  "state_tap_action": { "action": "none" },
                  "icon_tap_action": { "action": "more-info" },

                  "styles": ".bubble-range-fill {\n  background-color: rgba(${state >= 90 ? '46, 204, 113'  /* vibrant green */\n  : state >= 75 ? '39, 174, 96'   /* green */\n  : state >= 60 ? '110, 207, 151' /* light green */\n  : state >= 40 ? '241, 196, 15'  /* yellow */\n  : state >= 25 ? '230, 126, 34'  /* orange */\n  : state >= 10 ? '231, 76, 60'   /* light red */\n  :              '192, 57, 43'    /* dark red */}, 0.45) !important;\n}\n${(() => {\n  let date = new Date(hass.states[entity].attributes['battery_last_replaced']);\n  let options = { weekday: \"short\", year: \"numeric\", month: \"short\", day: \"numeric\" };\n  card.querySelector('.bubble-sub-button-2').innerText = hass.states[entity].attributes['battery_last_replaced'] == null ?\n    \"Не заменялась\" : date.toLocaleDateString(undefined, options);\n})()}\n",

                  "sub_button": [
                    {
                      "show_state": false,
                      "show_icon": false,
                      "state_background": false,
                      "show_background": false,
                      "show_attribute": true,
                      "attribute": "battery_type_and_quantity",
                      "tap_action": { "action": "none" }
                    },
                    {
                      "show_name": true,
                      "show_state": false,
                      "show_icon": false,
                      "state_background": false,
                      "show_background": false,
                      "tap_action": { "action": "none" }
                    }
                  ],
                  "modules": ["default"]
                }
              }},
            {%- endfor -%}
        sort:
          method: friendly_name
          ignore_case: true
          reverse: false
        show_empty: true
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: alarm_control_panel.home_alarm
        show_attribute: true
        show_state: true
        force_icon: false
        show_icon: true
        scrolling_effect: false
        show_name: true
        sub_button:
          - entity: script.alarm_active_outside_house
            icon: mdi:shield-lock
            tap_action:
              action: toggle
            double_tap_action:
              action: none
            visibility:
              - condition: state
                entity: alarm_control_panel.home_alarm
                state_not: armed_away
          - icon: mdi:shield-home
            tap_action:
              action: toggle
            double_tap_action:
              action: none
            visibility:
              - condition: state
                entity: alarm_control_panel.home_alarm
                state_not: armed_home
            entity: script.alarm_active_in_house
          - icon: mdi:shield-off
            state_background: true
            show_background: true
            tap_action:
              action: toggle
            visibility:
              - condition: state
                entity: alarm_control_panel.home_alarm
                state_not: disarmed
            entity: script.alarm_inactive
        tap_action:
          action: none
        double_tap_action:
          action: none
        hold_action:
          action: none
        modules:
          - subbutton_colors
          - home-assistant-default
        subbutton_colors:
          subbutton1:
            color: teal
            condition:
              - condition: state
                state: armed_away
                entity_id: alarm_control_panel.home_alarm
          subbutton2:
            color: green
            condition:
              - condition: state
                state: armed_home
                entity_id: alarm_control_panel.home_alarm
          subbutton3:
            color: indigo
            condition:
              - condition: state
                state: disarmed
                entity_id: alarm_control_panel.home_alarm
        card_layout: large-sub-buttons-grid
        button_action:
          tap_action:
            action: none
          hold_action:
            action: none
        styles: >-
          .bubble-icon-container {
            animation: ${state === 'arming' ? 'fade-animate 3s ease-in-out infinite' : '' };
            background:  ${
              state == 'disarmed'
                ? "blue"
                : state ==  'armed_home'
                ? "green"
                : state ==  'armed_away'
                ? "teal" 
                : state ==  'arming'
                ? "orange" 
                : "#FF0000" // Red
            } !important;    
            #border-radius: 25%!important;
            color: white!important;
           }
           @keyframes fade-animate {
             0%, 100% {
               opacity: 1;
             }
             50% {
               opacity: 0;
             }

          ${card.querySelector('.bubble-state').innerText = 
            state == 'armed_home' ? "Сработала сигнализация (дома)"
            : state == 'armed_away' ? "Сработала сигнализация (вне дома)"
            : state == 'disarmed' ? "Отключить сигнализацию"
            : "Включение сигнализации"
          }


          ${state == 'armed_home' ? icon.setAttribute("icon",
          'mdi:shield-home') 
           : state == 'armed_away' ? icon.setAttribute("icon", 'mdi:shield-lock')
           : state == 'disarmed' ? icon.setAttribute("icon", 'mdi:shield-off')
           :icon.setAttribute("icon", 'mdi:shield')};
          }
        name: Сигнализация
      - type: vertical-stack
        cards:
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.system_monitor_processor_use
            color_thresholds:
              - value: 10
                color: '#CCE5FF'
              - '#66B2FF'
              - '#0080FF'
              - '#87c087'
              - '#389638'
              - '#FF9932'
              - '#FF8000'
              - value: 27
                color: '#ff0000'
            hours_to_show: 24
            points_per_hour: 1.2
            animate: false
            update_interval: 120
            aggregate_func: avg
            line_width: 1
            height: 52
            group: true
            show:
              labels: false
              fill: true
              state: false
              name: false
              icon: false
            card_mod:
              style: |
                ha-card {
                  #height: 74px !important;
                  #position: absolute;
                  #box-shadow: none;
                  #background: none;
                  border-radius: 40px;
                  #border-color: black;
                  border-width: 0px;
                  opacity: 1;
                  margin-bottom: -65px;
                  margin-top: 10px;
                  #margin-left: 0em;
                  #margin-right: 0em;
                  #width: 100%;
                  #left: 0;
                  #top: 0;
                }
          - type: custom:bubble-card
            card_type: button
            scrolling_effect: false
            show_name: true
            tap_action:
              action: more-info
            card_layout: large
            name: ''
            styles: |
              .bubble-button-card-container {
                background: transparent;
              } .bubble-name {
                font-weight: bold !important;
              }
            show_attribute: true
            show_state: true
            show_icon: true
            button_type: state
            button_action:
              tap_action:
                action: navigate
                navigation_path: '#office-temp'
            entity: weather.yandex_weather
            show_last_updated: false
            show_last_changed: false
            attribute: temperature
            modules:
              - get_state_attribute
            get_state_attribute:
              - entity: weather.yandex_weather
              - entity: weather.yandex_weather
                attribute: temperature
              - entity: weather.yandex_weather
                attribute: wind_speed
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: input_number.massimo_assorbimento_auto
        show_state: true
        name: Corrente massima
        scrolling_effect: false
        icon: mdi:battery-charging-high
        force_icon: false
        sub_button:
          - entity: input_number.massimo_assorbimento_auto
            tap_action:
              action: call-service
              target:
                entity_id: entity
              service: input_number.decrement
            show_background: true
            icon: mdi:minus
            state_background: false
          - entity: input_number.massimo_assorbimento_auto
            tap_action:
              action: call-service
              target:
                entity_id: entity
              service: input_number.increment
            icon: mdi:plus
            state_background: false
        card_layout: normal
      - type: custom:bubble-card
        card_type: button
        button_type: switch
        entity: sensor.xiaomi_lumi_sen_ill_mgl01
        sub_button:
          - entity: sensor.xiaomi_lumi_sen_ill_mgl01
            show_state: true
            show_icon: false
            show_last_updated: false
            show_last_changed: false
            show_attribute: false
            state_background: false
        show_state: false
        modules:
          - color_temp_slider
      - type: custom:bubble-card
        card_type: button
        show_attribute: false
        show_name: true
        show_icon: true
        scrolling_effect: true
        show_state: false
        card_layout: large-2-rows
        tap_action:
          action: none
        button_type: name
        name: Гостиная
        icon: mdi:sofa
        sub_button:
          - name: Освещение гостиной
            icon: mdi:lightbulb-group
            tap_action:
              action: navigate
              navigation_path: '#rasveta_boravak'
            entity: light.yeelink_strip6_c28f_light
          - name: Media
            icon: mdi:television-off
            tap_action:
              action: navigate
              navigation_path: '#media_boravak'
            entity: media_player.mibox4
          - name: Media
            tap_action:
              action: navigate
              navigation_path: '#klima_boravak'
            entity: input_boolean.automation_off
        styles: >-
          .bubble-icon-container {
            overflow: visible;
          }

          .bubble-icon {
            #color: teal!important;
            opacity: .5 !important;
          }

          .bubble-icon-container {
              opacity: 1 !important;
              background: var(--icon-Background-Color); !important;
            }

          .large .bubble-sub-button-container {
            position: absolute;
            right: 10px; /* fiksna udaljenost od desne ivice */
            top: calc((100% - 4 * 36px)/5); /* vertikalni razmak */
            display: flex !important;
            flex-direction: column;
            gap: calc((100% - 4 * 36px)/5) !important;
            justify-content: flex-start;
            height: 100% !important;
            padding-right: 0 !important;
          }

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

          .bubble-sub-button {
            height: 36px !important;
            width: 36px !important;
            border-radius: 10px !important;
          }

          .bubble-sub-button-icon {
            --mdc-icon-size: 24px !important;  
          }

          ${subButtonIcon[1].setAttribute("icon",
          hass.states['media_player.mibox4'].state === 'on' ? 'mdi:television' :
          'mdi:television-off')} 

          ${subButtonIcon[2].setAttribute("icon",
          hass.states['input_boolean.automation_off'].state === 'heat' 
            ? 'mdi:fire' 
            : hass.states['input_boolean.automation_off'].state === 'heat_cool'
            ? 'mdi:sun-snowflake'
            : hass.states['input_boolean.automation_off'].state === 'cool'
            ? 'mdi:snowflake'
            : hass.states['input_boolean.automation_off'].state === 'dry'
            ? 'mdi:water-percent'
            : hass.states['input_boolean.automation_off'].state === 'fan_only'
            ? 'mdi:fan'
            : 'mdi:air-conditioner')}
        card_mod:
          style: |
            .bubble-icon::after {
              content: "{{states ('sensor.alarm_clock_a332_temperature')}}°C/{{states ('sensor.alarm_clock_a332_humidity')}}%";
              position: absolute;
              top: -30px;
              left: 30px;
              color: var(--primary-text-color);
              opacity: 1 !important;
              font-size: 12px;
            }

            {% if states('sensor.count_automation_off') | int > 0 %}
            .bubble-sub-button-1:after {
              content: "{{ states('sensor.count_automation_off') }}";
              position: absolute;
              top: -5px;
              left: 22px;
              width: 18px !important;
              height: 15px !important;
              display: flex;
              align-items: center;
              justify-content: center;
              color: black;
              background-color: orange;
              border-radius: 20%;
              font-size: 10px;
            }
            {% endif %}

            {% if states('input_boolean.automation_off') !='off' %}
            .bubble-sub-button-3:after {
              content: "{{ state_attr('input_boolean.automation_off', 'temperature') }}";
              position: absolute;
              top: -5px;
              left: 22px;
              width: 18px !important;
              height: 15px !important;
              display: flex;
              align-items: center;
              justify-content: center;
              color: black;
              background-color: var(--primary-color);
              border-radius: 20%;
              font-size: 10px;
            }
            {% endif %}
        grid_options:
          columns: 6
          rows: 3
        modules:
          - room_card
      - type: horizontal-stack
        cards:
          - type: custom:bubble-card
            card_type: button
            show_attribute: false
            show_name: true
            show_icon: true
            scrolling_effect: true
            show_state: false
            card_layout: large-2-rows
            tap_action:
              action: none
            button_type: name
            name: Гостиная
            icon: mdi:sofa
            sub_button:
              - name: Освещение гостиной
                icon: mdi:lightbulb-group
                tap_action:
                  action: navigate
                  navigation_path: '#rasveta_boravak'
                entity: light.yeelink_strip6_c28f_light
                show_background: true
                light_background: true
                state_background: true
                show_name: false
              - name: Media
                icon: mdi:television-off
                tap_action:
                  action: navigate
                  navigation_path: '#media_boravak'
                entity: media_player.mibox4
              - name: Media
                tap_action:
                  action: navigate
                  navigation_path: '#klima_boravak'
                entity: input_boolean.automation_off
            styles: >-
              .bubble-icon-container {
                overflow: visible;
              }

              .bubble-icon {
                #color: teal!important;
                opacity: .5 !important;
              }

              .bubble-icon-container {
                  opacity: 1 !important;
                  background: var(--icon-Background-Color); !important;
                }

              .large .bubble-sub-button-container {
                position: absolute;
                right: 10px; /* fiksna udaljenost od desne ivice */
                top: calc((100% - 4 * 36px)/5); /* vertikalni razmak */
                display: flex !important;
                flex-direction: column;
                gap: calc((100% - 4 * 36px)/5) !important;
                justify-content: flex-start;
                height: 100% !important;
                padding-right: 0 !important;
              }

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

              .bubble-sub-button {
                height: 36px !important;
                width: 36px !important;
                border-radius: 10px !important;
              }

              .bubble-sub-button-icon {
                --mdc-icon-size: 24px !important;  
              }

              ${subButtonIcon[1].setAttribute("icon",
              hass.states['media_player.mibox4'].state === 'on' ?
              'mdi:television' : 'mdi:television-off')} 

              ${subButtonIcon[2].setAttribute("icon",
              hass.states['input_boolean.automation_off'].state === 'heat' 
                ? 'mdi:fire' 
                : hass.states['input_boolean.automation_off'].state === 'heat_cool'
                ? 'mdi:sun-snowflake'
                : hass.states['input_boolean.automation_off'].state === 'cool'
                ? 'mdi:snowflake'
                : hass.states['input_boolean.automation_off'].state === 'dry'
                ? 'mdi:water-percent'
                : hass.states['input_boolean.automation_off'].state === 'fan_only'
                ? 'mdi:fan'
                : 'mdi:air-conditioner')}
            grid_options:
              columns: 6
              rows: 3
            modules:
              - room_card
            card_mod:
              style: |
                .bubble-icon::after {
                  content: "{{states ('sensor.alarm_clock_a332_temperature)}}°C/{{states ('sensor.alarm_clock_a332_humidity')}}%";
                  position: absolute;
                  top: -30px;
                  left: 30px;
                  color: var(--primary-text-color);
                  opacity: 1 !important;
                  font-size: 12px;
                }

                {% if states('sensor.count_automation_off') | int > 0 %}
                .bubble-sub-button-1:after {
                  content: "{{ states('sensor.count_automation_off') }}";
                  position: absolute;
                  top: -5px;
                  left: 22px;
                  width: 18px !important;
                  height: 15px !important;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: black;
                  background-color: orange;
                  border-radius: 20%;
                  font-size: 10px;
                }
                {% endif %}

                {% if states('input_boolean.automation_off') !='off' %}
                .bubble-sub-button-3:after {
                  content: "{{ state_attr('input_boolean.automation_off', 'temperature') }}";
                  position: absolute;
                  top: -5px;
                  left: 22px;
                  width: 18px !important;
                  height: 15px !important;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: black;
                  background-color: var(--primary-color);
                  border-radius: 20%;
                  font-size: 10px;
                }
                {% endif %}
          - type: custom:bubble-card
            card_type: button
            show_attribute: false
            show_name: true
            show_icon: true
            scrolling_effect: true
            show_state: false
            card_layout: large-2-rows
            tap_action:
              action: none
            button_type: name
            name: Гостиная
            icon: mdi:sofa
            sub_button:
              - name: Освещение гостиной
                icon: mdi:lightbulb-group
                tap_action:
                  action: navigate
                  navigation_path: '#rasveta_boravak'
                entity: light.yeelink_strip6_c28f_light
              - name: Media
                icon: mdi:television-off
                tap_action:
                  action: navigate
                  navigation_path: '#media_boravak'
                entity: media_player.mibox4
              - name: Media
                tap_action:
                  action: navigate
                  navigation_path: '#klima_boravak'
                entity: input_boolean.automation_off
            styles: >-
              .bubble-icon-container {
                overflow: visible;
              }

              .bubble-icon {
                #color: teal!important;
                opacity: .5 !important;
              }

              .bubble-icon-container {
                  opacity: 1 !important;
                  background: var(--icon-Background-Color); !important;
                }

              .large .bubble-sub-button-container {
                position: absolute;
                right: 10px; /* fiksna udaljenost od desne ivice */
                top: calc((100% - 4 * 36px)/5); /* vertikalni razmak */
                display: flex !important;
                flex-direction: column;
                gap: calc((100% - 4 * 36px)/5) !important;
                justify-content: flex-start;
                height: 100% !important;
                padding-right: 0 !important;
              }

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

              .bubble-sub-button {
                height: 36px !important;
                width: 36px !important;
                border-radius: 10px !important;
              }

              .bubble-sub-button-icon {
                --mdc-icon-size: 24px !important;  
              }

              ${subButtonIcon[1].setAttribute("icon",
              hass.states['media_player.mibox4'].state === 'on' ?
              'mdi:television' : 'mdi:television-off')} 

              ${subButtonIcon[2].setAttribute("icon",
              hass.states['input_boolean.automation_off'].state === 'heat' 
                ? 'mdi:fire' 
                : hass.states['input_boolean.automation_off'].state === 'heat_cool'
                ? 'mdi:sun-snowflake'
                : hass.states['input_boolean.automation_off'].state === 'cool'
                ? 'mdi:snowflake'
                : hass.states['input_boolean.automation_off'].state === 'dry'
                ? 'mdi:water-percent'
                : hass.states['input_boolean.automation_off'].state === 'fan_only'
                ? 'mdi:fan'
                : 'mdi:air-conditioner')}
            card_mod:
              style: |
                .bubble-icon::after {
                  content: "{{states ('sensor.alarm_clock_a332_temperature')}}°C/{{states ('sensor.alarm_clock_a332_humidity')}}%";
                  position: absolute;
                  top: -30px;
                  left: 30px;
                  color: var(--primary-text-color);
                  opacity: 1 !important;
                  font-size: 12px;
                }

                {% if states('sensor.count_automation_off') | int > 0 %}
                .bubble-sub-button-1:after {
                  content: "{{ states('sensor.count_automation_off') }}";
                  position: absolute;
                  top: -5px;
                  left: 22px;
                  width: 18px !important;
                  height: 15px !important;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: black;
                  background-color: orange;
                  border-radius: 20%;
                  font-size: 10px;
                }
                {% endif %}

                {% if states('input_boolean.automation_off') !='off' %}
                .bubble-sub-button-3:after {
                  content: "{{ state_attr('input_boolean.automation_off', 'temperature') }}";
                  position: absolute;
                  top: -5px;
                  left: 22px;
                  width: 18px !important;
                  height: 15px !important;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: black;
                  background-color: var(--primary-color);
                  border-radius: 20%;
                  font-size: 10px;
                }
                {% endif %}
            grid_options:
              columns: 6
              rows: 3
            modules:
              - room_card
      - type: custom:bubble-card
        card_type: button
        button_type: state
        entity: sun.sun
        show_icon: false
        show_state: false
        show_name: false
        card_layout: large-sub-buttons-grid
        grid_options:
          columns: 48
          rows: 3
        tap_action:
          action: none
        double_tap_action:
          action: none
        hold_action:
          action: none
        button_action:
          tap_action:
            action: none
          double_tap_action:
            action: none
          hold_action:
            action: none
        sub_button:
          - entity: input_number.offene_fenster
            icon: mdi:lock
            state_background: false
            show_state: true
          - entity: input_number.eingeschaltete_lampen
            icon: mdi:lightbulb
            state_background: false
            show_state: true
          - entity: sun.sun
            icon: ''
            state_background: false
            show_state: true
            show_background: false
            show_icon: false
            show_attribute: false
            tap_action:
              action: none
          - entity: sensor.total_dc_power
            icon: m3rf:solar-power
            show_icon: true
            state_background: false
            show_background: true
            show_last_changed: false
            show_state: true
          - entity: sensor.battery_level
            state_background: false
            show_state: true
          - entity: sensor.energy_production_today_remaining
            icon: mdi:calendar-month-outline
            state_background: false
            show_state: true
          - entity: sensor.load_power
            icon: mdi:home-lightning-bolt
            show_background: true
            state_background: false
            show_state: true
          - entity: sensor.meter_active_power_raw
            icon: mdi:transmission-tower
            state_background: false
            show_state: true
        styles: >-
          ha-card {
            --bubble-sub-button-background-color: rgba(46, 43, 56, 0.7); # Add transparency
          }

          .bubble-button-card-container {
            background-image: url("https://www.hessl.at/files/architektenhaus-mit-pool/architektenhaus-kueche-essbereich.jpg");
            background-size: cover;
            border-radius: 28px;
            background-position: center;
          }

          .bubble-sub-button-container {
            width: 100%; # Span the container over the full width 
          }

          .bubble-sub-button-1 ha-icon {
            color: #06d8d0;
          }

          .bubble-sub-button-2 ha-icon {
            color: #fcc93d;
          }

          .bubble-sub-button-3 {
            opacity: 0.0; # Hide unused button
          }

          .bubble-sub-button-6 {
            grid-column: span 2; # Larger button over 2 columns
          }

          # Format text for large sub-button
          ${card.querySelector('.bubble-sub-button-6
          .bubble-sub-button-name-container').innerText = "~" +
          Math.round(subButtonState[5]*10)/10 + "kWh Solarertrag verbleibend"}
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            name: Гостиная
            icon: mdi:sofa-outline
            hash: '#balcony'
            button_type: name
            close_on_click: true
          - type: custom:bubble-card
            card_type: separator
            name: Освещение (пример)
            icon: mdi:lightbulb-outline
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                button_type: slider
                entity: light.yeelink_strip6_c28f_light
                show_state: true
              - type: custom:bubble-card
                card_type: button
                button_type: slider
                entity: light.yeelink_strip6_c28f_light
                show_state: true
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                button_type: slider
                entity: light.yeelink_strip6_c28f_light
                show_state: true
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: '#lights'
            name: Главная
            icon: mdi:chart-bubble
            width_desktop: 500px
            margin_top_desktop: 10%
            margin_top_mobile: 30vh
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                name: Кухня
                icon: mdi:dip-switch
                entity: light.kitchen_lights
              - type: custom:bubble-card
                card_type: button
                button_type: slider
                entity: light.yeelink_strip6_c28f_light
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                name: Гостиная
                icon: mdi:dip-switch
                entity: light.living_room_lights
              - type: custom:bubble-card
                card_type: button
                button_type: slider
                entity: light.yeelink_strip6_c28f_light
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                name: Спальня
                icon: mdi:dip-switch
                entity: light.yeelink_strip6_c28f_light
              - type: custom:bubble-card
                card_type: button
                button_type: slider
                entity: light.yeelink_strip6_c28f_light
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: '#bathroom'
            button_type: name
            name: Ванна
            icon: mdi:bathtub
            card_layout: normal
            styles: ".bubble-button-card-container {\n  background: none;\n  border: none;\n}\n.bubble-sub-button-icon {\n    --mdc-icon-size: 14px;\n}\n.bubble-sub-button {\n\tfont-size: 14px !important;\n    padding: 6px;\n}\n"
            bg_color: var(--secondary-background-color)
            bg_opacity: '50'
            auto_close: '4000'
            sub_button:
              - entity: weather.yandex_weather
                show_background: false
                show_state: true
              - entity: sensor.system_monitor_processor_use
                show_background: false
                show_state: true
            show_header: true
            close_on_click: true
            hide_backdrop: false
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: '#hallway'
            name: Освещение
            icon: mdi:chart-bubble
            width_desktop: 500px
            margin_top_desktop: 10%
            button_type: name
            modules: []
            more_info_popup:
              center: false
              window_ani: scale(0.1)
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                name: Кухня
                icon: mdi:dip-switch
                entity: light.kitchen_lights
              - type: custom:bubble-card
                card_type: button
                button_type: slider
                entity: light.yeelink_strip6_c28f_light
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                name: Гостиная
                icon: mdi:dip-switch
                entity: light.living_room_lights
              - type: custom:bubble-card
                card_type: button
                button_type: slider
                entity: light.yeelink_strip6_c28f_light
          - type: horizontal-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                name: Спальня
                icon: mdi:dip-switch
                entity: light.yeelink_strip6_c28f_light
              - type: custom:bubble-card
                card_type: button
                button_type: slider
                entity: light.yeelink_strip6_c28f_light
      - type: custom:bubble-card
        card_type: horizontal-buttons-stack
        auto_order: false
        highlight_current_view: true
        margin: 0px
        width_desktop: 1540px
        1_icon: mdi:home-city-outline
        1_link: '#lights'
        2_icon: mdi:door-open
        2_link: '#hallway'
        3_icon: mdi:sofa-outline
        3_link: '#livingroom'
        4_icon: mdi:bed-king-outline
        4_link: '#bedroom'
        5_icon: mdi:sofa-single-outline