substitutions:

  exit_icon:            "\U0000e902"
  shutter_close_icon:   "\U0000e91d"
  swipe_icon:           "\U0000e91a"


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

        - button:
            id: ${shutter_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: ${shutter_widget_name_1}_shutter
                  y: 15
                  align: CENTER
                  text_color: color_steel_blue
                  text_font: icons_90
                  text: "${shutter_close_icon}"

              - label:
                  id: ${shutter_widget_name_1}_lable_name
                  align: TOP_MID
                  text_font: nunito_16
                  text_color: color_misty_blue
                  text: "${shutter_label_name_1}"

        - button:
            id: ${shutter_widget_name_2}_btn
            x: -20
            y: 20
            width: 210
            height: 160
            align: TOP_RIGHT
            bg_color: color_steel_blue
            bg_opa: 20%
            shadow_opa: TRANSP
            radius: 10
            widgets:
              - label:
                  id: ${shutter_widget_name_2}_shutter
                  y: 15
                  align: CENTER
                  text_color: color_steel_blue
                  text_font: icons_90
                  text: "${shutter_close_icon}"

              - label:
                  id: ${shutter_widget_name_2}_lable_name
                  align: TOP_MID
                  text_font: nunito_16
                  text_color: color_misty_blue
                  text: "${shutter_label_name_2}"

        - button:
            id: ${shutter_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: ${shutter_widget_name_3}_shutter
                  y: 15
                  align: CENTER
                  text_color: color_steel_blue
                  text_font: icons_90
                  text: "${shutter_close_icon}"

              - label:
                  id: ${shutter_widget_name_3}_lable_name
                  align: TOP_MID
                  text_font: nunito_16
                  text_color: color_misty_blue
                  text: "${shutter_label_name_3}"

        - button:
            id: ${shutter_widget_name_4}_btn
            x: -20
            y: 200
            width: 210
            height: 160
            align: TOP_RIGHT
            bg_color: color_steel_blue
            bg_opa: 20%
            shadow_opa: TRANSP
            radius: 10
            widgets:
              - label:
                  id: ${shutter_widget_name_4}_shutter
                  y: 15
                  align: CENTER
                  text_color: color_steel_blue
                  text_font: icons_90
                  text: "${shutter_close_icon}"

              - label:
                  id: ${shutter_widget_name_4}_lable_name
                  align: TOP_MID
                  text_font: nunito_16
                  text_color: color_misty_blue
                  text: "${shutter_label_name_4}"


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

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

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

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