substitutions:

  music_icon:             "\U0000e91b"
  #shutter_icon:           "\U0000e91d"
  vacuum_icon:            "\U0000e922"
  thermostat_icon:        "\U0000e925"
  #air_conditioner_icon:   "\U0000e93b"

packages:
  media_player: !include media_player/media_player.yaml
  vacuum: !include vacuum/vacuum_widget.yaml
  #shutter: !include shutter/shutter_config.yaml
  thermostat: !include thermostat/thermostat_widget.yaml
  #air_conditioner: !include air_conditioner/air_conditioner_widget.yaml
  #alarm_panel: !include alarm_panel/alarm_panel.yaml


lvgl:
  pages:
    - id: devices_page
      bg_color: color_slate_blue_gray
      widgets:
        - obj:
            id: devices_main
            y: 20
            width: 440
            height: 340
            pad_all: 0
            align: TOP_MID
            bg_color: color_steel_blue
            bg_opa: 20%
            shadow_opa: TRANSP
            border_opa: TRANSP
            border_width: 0
            radius: 10
            widgets:
              - obj:
                  y: 10
                  width: 440
                  height: 150
                  pad_all: 0
                  align: TOP_MID
                  bg_opa: TRANSP
                  shadow_opa: TRANSP
                  border_opa: TRANSP
                  border_width: 0
                  radius: 10
                  widgets:

                    - button:
                        id: media_player_page_btn
                        x: 35
                        align: LEFT_MID
                        width: 100
                        height: 100
                        radius: 10
                        bg_color: color_slate_blue_gray
                        shadow_opa: TRANSP
                        widgets:
                          - label:
                              align: CENTER
                              text_color: color_steel_blue
                              text_font: icons_90
                              text: "${music_icon}"
                        on_press:
                          - lvgl.widget.hide: menu_controls_main
                          - lvgl.page.show: 
                              id: media_player_page
                              animation: OUT_RIGHT
                              time: 300ms

                    # - button:
                    #     id: shutters_page_btn
                    #     x: 170
                    #     align: LEFT_MID
                    #     width: 100
                    #     height: 100
                    #     radius: 10
                    #     bg_color: color_slate_blue_gray
                    #     shadow_opa: TRANSP
                    #     widgets:
                    #       - label:
                    #           align: CENTER
                    #           text_color: color_steel_blue
                    #           text_font: icons_72
                    #           text: "${shutter_icon}"
                    #     on_press:
                    #       - lvgl.page.show: 
                    #           id: shutter_group_page
                    #           animation: OUT_RIGHT
                    #           time: 300ms

                    - button:
                        id: vacuum_page_btn
                        x: 305
                        align: LEFT_MID
                        width: 100
                        height: 100
                        radius: 10
                        bg_color: color_slate_blue_gray
                        shadow_opa: TRANSP
                        widgets:
                          - label:
                              align: CENTER
                              text_color: color_steel_blue
                              text_font: icons_72
                              text: "${vacuum_icon}"
                        on_press:
                          - lvgl.widget.hide: menu_controls_main
                          - lvgl.page.show: 
                              id: vacuum_page
                              animation: OUT_RIGHT
                              time: 300ms

              - obj:
                  y: 120
                  width: 440
                  height: 150
                  pad_all: 0
                  align: TOP_MID
                  bg_opa: TRANSP
                  shadow_opa: TRANSP
                  border_opa: TRANSP
                  border_width: 0
                  radius: 10
                  widgets:

                    - button:
                        id: thermostat_page_btn
                        x: 35
                        align: LEFT_MID
                        width: 100
                        height: 100
                        radius: 10
                        bg_color: color_slate_blue_gray
                        shadow_opa: TRANSP
                        widgets:
                          - label:
                              align: CENTER
                              text_color: color_steel_blue
                              text_font: icons_72
                              text: "${thermostat_icon}"
                        on_press:
                          - lvgl.widget.hide: menu_controls_main
                          - lvgl.page.show: 
                              id: thermostat_page
                              animation: OUT_RIGHT
                              time: 300ms

                    # - button:
                    #     id: air_conditioner_page_btn
                    #     x: 170
                    #     align: LEFT_MID
                    #     width: 100
                    #     height: 100
                    #     radius: 10
                    #     bg_color: color_slate_blue_gray
                    #     shadow_opa: TRANSP
                    #     widgets:
                    #       - label:
                    #           align: CENTER
                    #           text_color: color_steel_blue
                    #           text_font: icons_72
                    #           text: "${air_conditioner_icon}"
                    #     on_press:
                    #       - lvgl.widget.hide: menu_controls_main
                    #       - lvgl.page.show: 
                    #           id: air_conditioner_page
                    #           animation: OUT_RIGHT
                    #           time: 300ms


                    # - button:
                    #     id: alarm_panel_page_btn
                    #     x: 305
                    #     align: LEFT_MID
                    #     width: 100
                    #     height: 100
                    #     radius: 10
                    #     bg_color: color_slate_blue_gray
                    #     shadow_opa: TRANSP
                    #     widgets:
                    #       - label:
                    #           align: CENTER
                    #           text_color: color_steel_blue
                    #           text_font: mdi_icons_72
                    #           text: "${shield_away_icon}"
                    #     on_press:
                    #       - lvgl.widget.hide: menu_controls_main
                    #       - lvgl.page.show: 
                    #           id: alarm_panel_page
                    #           animation: OUT_RIGHT
                    #           time: 300ms