---
title: Garage
icon: mdi:garage-variant
panel: true
visible:
  - user: 1614b22cbef54f979741cf8a6b3413ec # Alex
  - user: 76e8af2547254ef0ab523ae1ad0bf81a # Tanya
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: "{% if is_state('binary_sensor.presence_garage_sensor_1', 'on') -%}mdi:account-multiple{%- else -%}mdi:account-off-outline{%- endif %}"
                icon_color: "{% if is_state('binary_sensor.presence_garage_sensor_1', 'on') -%} #FFC107 {%- else -%} #44739E {%- endif %}"
                badge_icon: mdi:numeric-1-circle
                badge_color: green
                entity: binary_sensor.presence_garage_sensor_1
                tap_action:
                  action: more-info
              - type: template
                icon: "{% if is_state('binary_sensor.door_garage_01_contact', 'on') -%}mdi:door-open{%- else -%}mdi:door-closed{%- endif %}"
                icon_color: "{% if is_state('binary_sensor.door_garage_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
                entity: binary_sensor.door_garage_01_contact
                tap_action:
                  action: more-info
              - type: template
                icon: "{% if is_state('binary_sensor.cover_garage_01_contact', 'on') -%}mdi:garage-open-variant{%- else -%}mdi:garage-variant{%- endif %}"
                icon_color: "{% if is_state('binary_sensor.cover_garage_01_contact', 'on') -%}#FFC107{%- else -%}#44739E{%- endif %}"
                entity: binary_sensor.cover_garage_01_contact
                tap_action:
                  action: more-info
              - type: template
                icon: "{% if is_state('binary_sensor.smoke_garage_01_smoke', 'on') -%}mdi:smoke-detector-variant-alert{%- else -%}mdi:smoke-detector-variant{%- endif %}"
                icon_color: "{% if is_state('binary_sensor.smoke_garage_01_smoke', 'on') -%}#D40909{%- else -%}#44739E{%- endif %}"
                entity: binary_sensor.smoke_garage_01_smoke
                tap_action:
                  action: more-info

          - type: 'custom:bubble-card'
            card_type: separator
            icon: 'mdi:bed'
            sub_button:
              - name: Temp
                icon: 'mdi:thermometer-lines'
                entity: sensor.climate_garage_01_temperature
                show_name: false
                show_icon: true
                show_state: true
                show_background: false
                show_attribute: false
              - name: Humidity
                icon: 'mdi:water-percent'
                entity: sensor.climate_garage_01_humidity
                show_name: false
                show_icon: true
                show_state: true
                show_background: false
                show_attribute: false
              - name: Light Level
                icon: 'mdi:weather-sunny'
                entity: sensor.presence_garage_light_level
                show_name: false
                show_icon: true
                show_state: true
                show_background: false
                show_attribute: false
            styles: |
              .bubble-feedback-container {
                margin: 0px;
              }

      - type: vertical-stack
        cards:
          - type: 'custom:bubble-card'
            card_type: button
            button_type: switch
            name: Occupancy
            entity: input_boolean.occupancy_garage
            icon: 'mdi:account-multiple'
            show_state: false
            show_background: false
            tap_action:
              action: toggle
            button_action:
              tap_action:
                action: more-info
            sub_button:
              - entity: sensor.garage_person_count
                icon: 'mdi:account-group'
                show_state: false
                show_background: true
              - entity: sensor.garage_cat_count
                icon: 'mdi:cat'
                show_state: false
                show_background: true
              - icon: 'mdi:brightness-auto'
                entity: input_boolean.manually_operated_light_garage
                show_state: false
                show_background: true
                tap_action:
                  action: toggle
            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-1 > ha-icon {
                color: ${ hass.states['sensor.garage_person_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
              }
              .bubble-sub-button-2 {
                background-color: white !important;
              }
              .bubble-sub-button-2 > ha-icon {
                color: ${ hass.states['sensor.garage_cat_count'].state > 0 ? 'rgb(255, 152, 0)' : '' } !important;
              }
              .bubble-sub-button-3 {
                background-color: white !important;
              }
              ${subButtonIcon[2].setAttribute("icon", hass.states['input_boolean.manually_operated_light_garage'].state === 'on' ? 'mdi:hand-front-right' : 'mdi:brightness-auto')}


          - type: 'custom:bubble-card'
            card_type: button
            button_type: switch
            name: Light
            entity: input_boolean.garage_light_state
            icon: 'mdi:lightbulb-group'
            show_state: true
            show_background: false
            tap_action:
              action: toggle
            button_action:
              tap_action:
                action: navigate
                navigation_path: '#popup-garage-light'
            sub_button:
              - icon: 'phu:ceiling-round'
                entity: scene.garage_ceiling_only
                show_state: false
                show_background: true
                tap_action:
                  action: call-service
                  service: input_select.select_option
                  service_data:
                    entity_id: input_select.garage_scenes
                    option: Ceiling Only
            styles: |
              .bubble-sub-button-1 > ha-icon {
                color: ${hass.states['input_select.garage_scenes'].state === 'Ceiling Only' ? 'rgb(255, 152, 0)' : ''} !important;
              }

      - type: vertical-stack
        cards:
          - type: 'custom:bubble-card'
            card_type: button
            button_type: switch
            name: Garage Gate
            entity: cover.garage_gate
            icon: 'mdi:garage-variant'
            show_state: false
            show_background: false
            tap_action:
              action: toggle
            button_action:
              tap_action:
                action: more-info
            sub_button:
              - icon: 'mdi:arrow-up-thick'
                show_state: false
                show_background: true
                tap_action:
                  action: call-service
                  service: cover.open_cover
                  service_data:
                    entity_id: cover.garage_gate
              - icon: 'mdi:stop'
                show_state: false
                show_background: true
                tap_action:
                  action: call-service
                  service: cover.stop_cover
                  service_data:
                    entity_id: cover.garage_gate
              - icon: 'mdi:arrow-down-thick'
                show_state: false
                show_background: true
                tap_action:
                  action: call-service
                  service: cover.close_cover
                  service_data:
                    entity_id: cover.garage_gate
            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;
              }

      - type: custom:layout-break
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: 'custom:webrtc-camera'
                url: 'rtsp://10.10.11.110:8554/garage'
                title: 'Garage'
                muted: true
                mode: webrtc,mse

      - type: custom:layout-break
      - type: vertical-stack
        cards:
          - type: custom:mini-media-player
            entity: media_player.garage
            artwork: cover

          - type: vertical-stack
            cards:
              - type: 'custom:bubble-card'
                card_type: pop-up
                hash: '#popup-garage-light'
                name: Garage
                icon: 'mdi:garage-variant'
              - type: 'custom:bubble-card'
                card_type: button
                button_type: slider
                name: 'Ceiling #1'
                entity: light.garage_ceiling_01
                show_state: true
                tap_action:
                  action: toggle
                button_action:
                  tap_action:
                    action: toggle