substitutions:

  exit_icon:                     "\U0000e902"
  settings_icon:                 "\U0000e903"
  info_icon:                     "\U0000e904"
  devices_icon:                  "\U0000e905"
  home_icon:                     "\U0000e906"
  ceiling_icon:                  "\U0000e907"
  lightbulb_icon:                "\U0000e908"
  spotlight_group_icon:          "\U0000e915"
  desk_lamp_icon:                "\U0000e916"
  pendant_lamp_icon:             "\U0000e917" 
  ceiling_lamp_icon:             "\U0000e918"
  ceiling_lamp_variant_icon:     "\U0000e921"
  night_lamp_icon:               "\U0000e919"
  swipe_icon:                    "\U0000e91a"


lvgl:
  pages:
    - id: lights_group_page
      bg_color: color_slate_blue_gray
      widgets:

        - button:
            id: ${light_widget_name_1}_btn
            x: 20
            y: 20
            width: 210
            height: 160
            align: TOP_LEFT
            bg_color: color_steel_blue
            bg_opa: 20%
            shadow_opa: TRANSP
            radius: 10
            widgets:
              - label:
                  id: ${light_widget_name_1}_light_on
                  align: CENTER
                  text_color: color_steel_blue
                  text_font: icons_90
                  text: "${spotlight_group_icon}"
              - label:
                  id: ${light_widget_name_1}_lable_name
                  align: TOP_MID
                  text_font: nunito_16
                  text_color: color_misty_blue
                  text: "${light_label_name_1}"


        - button:
            id: ${light_widget_name_2}_btn
            x: 250
            y: 20
            width: 210
            height: 160
            align: TOP_LEFT
            bg_color: color_steel_blue
            bg_opa: 20%
            shadow_opa: TRANSP
            radius: 10
            widgets:
              - label:
                  id: ${light_widget_name_2}_light_on
                  align: CENTER
                  text_color: color_steel_blue
                  text_font: icons_90
                  text: "${pendant_lamp_icon}"
              - label:
                  id: ${light_widget_name_2}_lable_name
                  align: TOP_MID
                  text_font: nunito_16
                  text_color: color_misty_blue
                  text: "${light_label_name_2}"


        - button:
            id: ${light_widget_name_3}_btn
            x: 20
            y: 200
            width: 210
            height: 160
            align: TOP_LEFT
            bg_color: color_steel_blue
            bg_opa: 20%
            shadow_opa: TRANSP
            radius: 10
            widgets:
              - label:
                  id: ${light_widget_name_3}_light_on
                  align: CENTER
                  text_color: color_steel_blue
                  text_font: icons_90
                  text: "${ceiling_lamp_variant_icon}"
              - label:
                  id: ${light_widget_name_3}_lable_name
                  align: TOP_MID
                  text_font: nunito_16
                  text_color: color_misty_blue
                  text: "${light_label_name_3}"


        - button:
            id: ${light_widget_name_4}_btn
            x: 250
            y: 200
            width: 210
            height: 160
            align: TOP_LEFT
            bg_color: color_steel_blue
            bg_opa: 20%
            shadow_opa: TRANSP
            radius: 10
            widgets:
              - label:
                  id: ${light_widget_name_4}_light_on
                  align: CENTER
                  text_color: color_steel_blue
                  text_font: icons_90
                  text: "${night_lamp_icon}"
              - label:
                  id: ${light_widget_name_4}_lable_name
                  align: TOP_MID
                  text_font: nunito_16
                  text_color: color_misty_blue
                  text: "${light_label_name_4}"

binary_sensor:
  - platform: lvgl
    id: ${light_widget_name_1}_btn_long_sensor
    widget: ${light_widget_name_1}_btn
    on_click:
    - min_length: 50ms
      max_length: 500ms
      then:
        - homeassistant.service:
            service: light.toggle
            data:
              entity_id: "${light_entity_1}"
    - min_length: 800ms
      max_length: 3000ms
      then:
        - lvgl.widget.hide: menu_controls_main
        - lvgl.page.show: 
            id: ${light_widget_name_1}_light_rgb_page
            animation: OUT_RIGHT
            time: 300ms

  - platform: lvgl
    id: ${light_widget_name_2}_btn_long_sensor
    widget: ${light_widget_name_2}_btn
    on_click:
    - min_length: 50ms
      max_length: 500ms
      then:
        - homeassistant.service:
            service: light.toggle
            data:
              entity_id: "${light_entity_2}"
    - min_length: 800ms
      max_length: 3000ms
      then:
        - lvgl.widget.hide: menu_controls_main
        - lvgl.page.show: 
            id: ${light_widget_name_2}_light_rgb_page
            animation: OUT_RIGHT
            time: 300ms

  - platform: lvgl
    id: ${light_widget_name_3}_btn_long_sensor
    widget: ${light_widget_name_3}_btn
    on_click:
    - min_length: 50ms
      max_length: 500ms
      then:
        - homeassistant.service:
            service: light.toggle
            data:
              entity_id: "${light_entity_3}"
    - min_length: 800ms
      max_length: 3000ms
      then:
        - lvgl.widget.hide: menu_controls_main
        - lvgl.page.show: 
            id: ${light_widget_name_3}_light_rgb_page
            animation: OUT_RIGHT
            time: 300ms

  - platform: lvgl
    id: ${light_widget_name_4}_btn_long_sensor
    widget: ${light_widget_name_4}_btn
    on_click:
    - min_length: 50ms
      max_length: 500ms
      then:
        - homeassistant.service:
            service: light.toggle
            data:
              entity_id: "${light_entity_4}"
    - min_length: 800ms
      max_length: 3000ms
      then:
        - lvgl.widget.hide: menu_controls_main
        - lvgl.page.show: 
            id: ${light_widget_name_4}_light_rgb_page
            animation: OUT_RIGHT
            time: 300ms