decluttering_templates:
  test_template:
    card:
      type: custom:button-card
      entity: '[[entity]]'

  test_default:
    card:
      type: picture-elements
      image: '/local/cast.jpg'
      elements:
        - type: state-label
          entity: '[[entity]]'
          style:
            top: 90%
            left: 20%

button_card_templates:
  test_action_template:
    tap_action:
      action: |
        [[[
          console.log("test")
          console.log(variables);
          return "none";
        ]]]

  test_var:
    variables:
      test: "[[[ return 'pouet_template' ]]]"

  sensor:
    styles:
      card:
        - font-size: 16px
        - width: 75px
    tap_action:
      action: more-info
    state:
      - color: orange
        value: 75
        id: my_id
  sensor_humidity:
    template: sensor
    icon: 'mdi:weather-rainy'
    state:
      - color: 'rgb(255,0,0)'
        operator: '>'
        value: 50
      - color: 'rgb(255,100,0)'
        operator: '>'
        value: 40
      - color: 'rgb(255,200,0)'
        operator: '>'
        value: 35
      - color: 'rgb(0,255,80)'
        operator: '>'
        value: 30
      - color: 'rgb(0,255,255)'
        operator: '>'
        value: 25
      - color: 'rgb(0,0,255)'
        operator: '<'
        value: 25

  sensor_test:
    template: sensor_humidity
    state:
      - color: pink
        id: my_id
        operator: '>'
        value: 75
        styles:
          name:
            - color: '#ff0000'

  light_button_style:
    aspect_ratio: 1/1
    show_label: true
    show_state: true
    size: 30%
    label: test-label
    styles:
      card:
        - border-radius: 12px
        - --paper-card-background-color: var(--homekit-white)
      label:
        - color: gray
        - font-size: 11px
        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
      state:
        - font-size: 11px
        - font-family: Helvetica
        - padding: 0px 10px
        - justify-self: start
        - text-transform: capitalize
        - font-weight: bold
        - padding-left: 10px
      grid:
        - grid-template-areas: '"i" "n" "s" "l"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content min-content
      img_cell:
        - justify-content: start
        - align-items: start
      icon:
        - height: auto
      name:
        - justify-self: start
        - padding-left: 10px
        - font-weight: bold
        - font-family: Helvetica
        - font-size: 13px

  button_picture:
    size: 90%
    show_state: false
    show_label: false
    show_name: false
    entity_picture: https://3c1703fe8d.site.internapcdn.net/newman/csz/news/800/2019/ofalltheforc.jpg
    show_entity_picture: true
    color_type: card
    aspect_ratio: 1/1
    tap_action:
      action: toggle
      haptic: light
    hold_action:
      action: more-info
      haptic: success
    styles:
      card:
        - border-radius: 12px
    #      - width: 85px
    #      - height: 85px
    state:
      - value: 'on'
        color: '#F0C209'
        id: on-picture
      - value: 'off'
        color: '#555B65'
        id: off-picture

  cb_overview_counters:
    layout: icon_state
    color: auto
    aspect_ratio: 1/1
    show_state: false
    show_name: true
    show_label: true
    label: '[[[return "42";]]]'
    styles:
      grid:
        - grid-template-rows: 42px auto 42px
        - grid-template-columns: 42px auto
      card:
        - border-radius: 15px
        - margin: 8px 0px 0px 0px
        - padding: 0px 0px
      icon:
        - align-self: end
        - height: 30px
        - width: 30px
      name:
        - justify-self: start
        - padding: 0px 10px
        - font-size: 13px
      label:
        - font-size: 11px
        - font-family: Helvetica
        - text-transform: capitalize
        - font-weight: bold
        - align-self: end
        - justify-self: start
        - padding: 9px 10px
      lock:
        - align-items: flex-end
    state:
      - value: 'on'
        styles:
          card:
            - --paper-card-background-color: rgba(40, 40, 40)
            - box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
          name:
            - color: white
          state:
            - color: white
          label:
            - color: white
    tap_action:
      action: toggle
    hold_action:
      action: more-info

  button_body:
    color: auto
    size: 30%
    aspect_ratio: 1/1
    show_state: true
    show_label: true
    tap_action:
      action: toggle
      haptic: light
    hold_action:
      action: more-info
      haptic: success
    styles:
      icon:
        - color: var(--local-color)
      lock:
        - color: red
      card:
        - color: var(--local-color)
        - border-radius: 6px
        - background-color: ivory
        - padding-left: 5px
        - box-shadow: 0px 0px 2px 1px
      name:
        - text-align: start
        - font-weight: bold
        - font-family: Helvetica
        - font-size: 13px
        - justify-self: start
      label:
        - font-size: 11px
        - font-family: Helvetica
        - text-align: start
        - justify-self: start
      state:
        - font-size: 11px
        - font-family: Helvetica
        - justify-self: start
        - text-align: start
        - text-transform: capitalize
        - font-weight: bold
      grid:
        - grid-template-areas: '"i" "n" "s" "l"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content min-content
      img_cell:
        - justify-content: start
        - align-items: start

  button_motion:
    template: button_body
    show_last_changed: true
    tap_action:
      action: more-info
      haptic: light
    hold_action:
      action: more-info
      haptic: success
    styles:
      card:
        - box-shadow: 0px 0px 2px 1px
    state:
      - value: 'on'
        styles:
          card:
            - color: red
          name:
            - color: black
          icon:
            - color: red
      #      id: on-icon

      - value: 'off'
        styles:
          card:
            - color: '#555B65'
            - opacity: 0.8
          icon:
            - color: '#555B65'
  #      id: off-icon

  test1:
    #name: test1
    template:
      - test2
      - test3
    state:
      - value: 42
        icon: mdi:test
      - value: 1
        id: '1'
        pouet: value1 - test1
        test1: ok
      - value: 2
        id: '2'
        pouet: value2 - test1
        test1: ok
  test2:
    #name: test2
    template: test4
    state:
      - value: 1
        id: '1'
        pouet: value1 - test2
        test2: ok
      - value: 2
        id: '2'
        pouet: value2 - test2
        test2: ok
      - value: test2
        icon: mdi:test
  test3:
    name: test3
    state:
      - value: 1
        id: '1'
        pouet: value1 - test3
        test3: ok
      - value: 2
        id: '2'
        pouet: value2 - test3
        test3: ok
  test4:
    name: test4
    label: test4
    state:
      # - value: 1
      #   id: '1'
      #   pouet: value1 - test4
      #   test4: ok
      # - value: 2
      #   id: '2'
      #   pouet: value2 - test4
      #   test4: ok
      - value: test4
        icon: mdi:test

views:
  - title: Main
    cards:
      - type: 'custom:button-card'
        color_type: card
        show_entity_picture: true
        name: Entity Picture Cast
        entity_picture: /local/cast.jpg
        tooltip: 'mega super long tooltip that should overflow everything here mega super long tooltip that should overflow everything here mega super long tooltip that should overflow everything here mega super long tooltip that should overflow everything here'
        styles:
          tooltip:
            - color: red
      - type: 'custom:button-card'
        color_type: card
        icon: mdi:lock
        name: Lock + Tooltip Test
        tooltip: 'Test Test'
        lock:
          enabled: true
          duration: 7
          unlock: hold
        styles:
          tooltip:
            - color: red
      - type: 'custom:button-card'
        custom_fields:
          test:
            card:
              type: vertical-stack
              cards:
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      entity: sensor.sensor1
                      show_state: true
      - type: custom:button-card
        name: Change Background
        entity: switch.skylight
        show_icon: false
        aspect_ratio: 2/1
        label: '[[[ return `test` ]]]'
        extra_styles: |
          @keyframes bgswap1 {
            0% {
              background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
            }
            25% {
              background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
            }
            50% {
              background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
            }
            75% {
              background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
            }
            100% {
              background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
            }
          }
        styles:
          card:
            - animation: bgswap1 10s linear infinite
            - background-size: cover
          name:
            - color: white
      - type: entities
        entities:
          - input_number.test
          - switch.skylight
          - light.test_light
      - type: custom:button-card
        entity: input_number.test
        name: test
        styles:
          card:
            - display: '[[[ if (Number(entity.state) < 30) return "none"; else return null; ]]]'
      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Defaults
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: switch.skylight
                name: Default
              - type: 'custom:button-card'
                entity: switch.skylight
              - type: 'custom:button-card'
                color_type: card
                entity: switch.skylight
              - type: 'custom:button-card'
                name: test
                icon: mdi:flash
                color: orange
              - type: 'custom:button-card'
                name: test
                color_type: card
                icon: mdi:flash
                color: orange
      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Card-Modder
          - type: horizontal-stack
            cards:
              - type: custom:card-modder
                styles:
                  card:
                    - border-radius: 10px
                card:
                  type: entity-button
                  entity: switch.skylight
                  name: Default HASS
                  show_name: false
                  show_state: true
              - type: custom:card-modder
                styles:
                  card:
                    - border-radius: 10px
                card:
                  type: 'custom:button-card'
                  entity: switch.skylight
                  show_state: true
                  show_name: false
              - type: custom:card-modder
                styles:
                  card:
                    - border-radius: 10px
                card:
                  type: 'custom:button-card'
                  color_type: card
                  entity: switch.skylight

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Style-Modder
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                color_type: card
                color: rgb(245,116,56)
                styles:
                  card:
                    #    - background-color: rgba(245,116,56,1)
                    - border-radius: 30px
                    - border: solid 3px rgba(118,185,0,1)
                entity: switch.skylight
                icon: mdi:stop
                name: BUTTON only CType card
              - type: custom:button-card
                styles:
                  card:
                    - background-color: rgba(245,116,56,1)
                    - border-radius: 30px
                    - border: solid 3px rgba(118,185,0,1)
                entity: switch.skylight
                icon: mdi:stop
                name: BUTTON only CType card

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Template
          - type: horizontal-stack
            cards:
              - type: custom:config-template-card
                variables:
                  - states['input_number.test'].state
                entities:
                  - input_number.test
                card:
                  type: 'custom:button-card'
                  entity: input_number.test
                  name: '${vars[0]}'
              - type: custom:config-template-card
                variables:
                  - states['input_number.test'].state
                entities:
                  - input_number.test
                card:
                  type: 'custom:button-card'
                  color_type: card
                  color: '${"rgb(" + Number(vars[0]) * 2 + ",255,255)"}'
                  entity: input_number.test
                  name: '${vars[0]}'

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Layout
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    name: icon_name_state_no_state
                    show_state: false
                    layout: icon_name_state

              - type: 'custom:button-card'
                entity: sensor.sensor1
                name: icon_name_state
                show_state: true
                layout: icon_name_state
              - type: 'custom:button-card'
                color_type: label-card
                name: Testing default size
                styles:
                  card:
                    - font-weight: bold
                    - text-transform: uppercase
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    name: icon_name_state
                    color_type: card
                    show_state: false
                    show_name: false
                    layout: icon_name_state
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    show_name: false
                    show_state: false
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    name: icon_name
                    layout: icon_name
                    show_state: true
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    name: icon_state
                    layout: icon_state
                    show_state: true
                    show_name: true
                    color_type: card
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    name: icon_name
                    layout: icon_name
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    name: icon_state
                    layout: icon_state
                    show_state: true
                    show_name: false
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    color_type: card
                    name: icon_state
                    layout: icon_state
                    show_state: true
                    show_name: false
                    show_units: false
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    layout: icon_name_state2nd
                    show_state: true
                    show_name: true
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    layout: icon_state_name2nd
                    show_state: true
                    show_name: true

              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    name: name_state
                    layout: name_state
                    show_state: true
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    name: default state
                    show_state: true
                    units: UNITS TOO LONNNNNNG
                    color_type: card
                    show_name: false
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    name: default name
                    show_state: false
                    show_name: true

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: No Name
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                show_name: false
              - type: 'custom:button-card'
                color_type: card
                entity: switch.skylight
                show_name: false
      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: No Icon but name and state
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                show_icon: false
                show_state: true
              - type: 'custom:button-card'
                color_type: card
                entity: switch.skylight
                show_icon: false
                show_state: true
      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Show State
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                show_name: false
                show_state: true
              - type: 'custom:button-card'
                color_type: card
                entity: switch.skylight
                show_name: false
                show_state: true
      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Show Name and State
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                show_state: true
              - type: 'custom:button-card'
                color_type: card
                entity: switch.skylight
                show_state: true

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Redefine name and icon
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                name: Test Name
                icon: mdi:home
              - type: 'custom:button-card'
                color_type: card
                entity: switch.skylight
                name: Test Name
                icon: mdi:home

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Test lights
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: light.test_light
                color: auto
                styles:
                  name:
                    - color: var(--button-card-light-color)
                  card:
                    - -webkit-box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
                    - box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
              - type: 'custom:button-card'
                entity: light.test_light
                color_type: card
                color: auto

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Test Height
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: light.test_light
                    color: auto
                    name: s:default h:200px
                    styles:
                      card:
                        - height: 200px
                  - type: 'custom:button-card'
                    entity: light.test_light
                    color_type: card
                    color: auto
                    name: s:100% h:200px
                    size: 100%
                    styles:
                      card:
                        - height: 200px
                  - type: 'custom:button-card'
                    entity: light.test_light
                    color_type: card
                    color: auto
                    size: 10%
                    name: s:10% h:200px
                    styles:
                      card:
                        - height: 200px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: light.test_light
                    color: auto
                    name: 60px
                    styles:
                      card:
                        - height: 60px
                        - width: 60px
                  - type: 'custom:button-card'
                    entity: light.test_light
                    color_type: card
                    color: auto
                    name: 80px
                    styles:
                      card:
                        - height: 80px
                        - width: 30px
                  - type: 'custom:button-card'
                    entity: light.test_light
                    color_type: card
                    color: auto
                    name: 300px
                    styles:
                      card:
                        - height: 300px
              - type: horizontal-stack
                cards:
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    show_state: true
                    layout: icon_name
                    styles:
                      card:
                        - width: 100px
                  - type: 'custom:button-card'
                    entity: sensor.sensor1
                    show_state: true
                    layout: icon_state
                    styles:
                      card:
                        - height: 200px

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Redefine style with state
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                state:
                  - value: 'off'
                    color: green
                  - value: 'on'
                    color: red
              - type: 'custom:button-card'
                color_type: card
                entity: switch.skylight
                state:
                  - value: 'off'
                    color: green
                  - value: 'on'
                    color: red

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Entity Picture
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                entity_picture: https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG
                show_entity_picture: true
                name: Entity Picture Default
                state:
                  - value: 'off'
                    styles:
                      entity_picture:
                        - filter: grayscale(100%)
                        - border-radius: 50%
                  - value: 'on'
                    spin: true
                    styles:
                      card:
                      entity_picture:
                        - border-radius: 50%
              - type: 'custom:button-card'
                color_type: card
                entity: switch.skylight
                show_entity_picture: true
                name: Entity Picture State
                state:
                  - value: 'off'
                    color: black
                    entity_picture: https://welovecatsandkittens.com/wp-content/uploads/2013/09/fallling-asleep-at-keyboard-cat.jpg
                    styles:
                      entity_picture:
                        - filter: grayscale(100%)
                  - value: 'on'
                    color: '#ce42f4'
                    entity_picture: https://media.tenor.com/images/d740131a4906504d47cab865f1bd95b3/tenor.gif
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: camera.demo_camera
                show_live_stream: true

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Redefine name and icon with state
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                state:
                  - value: 'off'
                    name: This is off
                    icon: mdi:lightbulb
                  - value: 'on'
                    name: This is on
                    icon: mdi:lightbulb-on
              - type: 'custom:button-card'
                color_type: card
                entity: switch.skylight
                state:
                  - value: 'off'
                    name: This is off
                    icon: mdi:lightbulb
                  - value: 'on'
                    name: This is on
                    icon: mdi:lightbulb-on

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Test tap_action
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                name: navigate
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/1
              - type: 'custom:button-card'
                entity: switch.skylight
                name: toggle
                tap_action:
                  action: toggle
              - type: 'custom:button-card'
                entity: switch.skylight
                name: more-info
                tap_action:
                  action: more-info
                  entity: light.test_light
              - type: 'custom:button-card'
                entity: switch.skylight
                name: call-service
                tap_action:
                  action: call-service
                  service: switch.toggle
                  service_data:
                    entity_id: switch.skylight
              - type: 'custom:button-card'
                entity: switch.skylight
                name: call-service
                tap_action:
                  action: call-service
                  service: timer.start
                  target:
                    entity_id: timer.laundry
              - type: 'custom:button-card'
                entity: switch.skylight
                name: assist
                tap_action:
                  action: assist
              - type: 'custom:button-card'
                entity: switch.skylight
                name: none
                tap_action:
                  action: none
              - type: 'custom:button-card'
                icon: mdi:link
                name: url
                confirmation:
                  text: '[[[ return "main" ]]]'
                tap_action:
                  action: url
                  url_path: https://www.google.com
                  # confirmation:
                  #   text: '[[[ return "pouet" ]]]'
                  # exemptions:
                  #   - user: befc8496799848bda1824f2a8111e30a

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Test conditional card
          - type: conditional
            conditions:
              - entity: switch.skylight
                state: 'off'
            card:
              type: vertical-stack
              cards:
                - type: horizontal-stack
                  cards:
                    - type: 'custom:button-card'
                      entity: switch.skylight
                      show_state: true
                      name: Kitchen
                - type: horizontal-stack
                  cards:
                    - type: entities
                      entities:
                        - switch.skylight

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Test hold_action
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                name: navigate
                hold_action:
                  action: navigate
                  navigation_path: /lovelace/1
              - type: 'custom:button-card'
                entity: switch.skylight
                name: toggle
                hold_action:
                  action: toggle
              - type: 'custom:button-card'
                entity: switch.skylight
                name: more-info
                hold_action:
                  action: more-info
              - type: 'custom:button-card'
                entity: switch.skylight
                name: call-service
                hold_action:
                  action: call-service
                  service: switch.toggle
                  service_data:
                    entity_id: switch.skylight
              - type: 'custom:button-card'
                entity: switch.skylight
                name: none
                hold_action:
                  action: none
              - type: 'custom:button-card'
                icon: mdi:link
                name: url
                hold_action:
                  action: url
                  url_path: https://www.google.com

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Effects
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                color_type: card
                entity: switch.skylight
                state:
                  - value: 'on'
                    color: red
                    icon: mdi:alert
                    name: Blink
                    styles:
                      card:
                        - animation: blink 2s ease infinite
                  - operator: default
                    color: green
                    name: No Blink
                    icon: mdi:shield-check
              - type: 'custom:button-card'
                color_type: icon
                entity: switch.skylight
                state:
                  - value: 'on'
                    color: red
                    icon: mdi:alert
                    name: Blink
                    styles:
                      card:
                        - color: red
                        - animation: blink 2s ease infinite
                  - operator: default
                    color: green
                    name: No Blink
                    icon: mdi:shield-check

          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                color_type: card
                entity: switch.skylight
                icon: mdi:fan
                name: Fan Spin
                state:
                  - value: 'on'
                    spin: true
                  - operator: default
                    spin: false
              - type: 'custom:button-card'
                color_type: icon
                entity: switch.skylight
                icon: mdi:fan
                name: Fan Spin
                state:
                  - value: 'on'
                    spin: true
                  - operator: default
                    spin: false

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: test operators and multiple styles
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                state:
                  - value: '^of.*$'
                    operator: regex
                    name: This is off (regex)
                    icon: mdi:lightbulb
                  - value: '^o.*$'
                    operator: regex
                    name: This is on (regex)
                    icon: mdi:lightbulb-on

              - type: 'custom:button-card'
                icon: mdi:battery
                # name: Battery
                color_type: card
                entity: input_number.test
                show_name: false
                show_state: true
                tap_action:
                  action: more-info
                state:
                  - value: 10
                    operator: '<'
                    color: '#FF0000' #red
                    icon: 'mdi:battery-10'
                    styles:
                      card:
                        - animation: blink 2s linear infinite

                  - value: 20
                    operator: '<='
                    color: '#ff6600' #red orange
                    icon: 'mdi:battery-20'
                    styles:
                      card:
                        - font-weight: 1000

                  - value: 30
                    operator: '<='
                    color: '#ff9933' #dark orange
                    icon: 'mdi:battery-30'

                  - value: 40
                    operator: '<='
                    color: '#ffcc00' #light orange
                    icon: 'mdi:battery-40'

                  - value: 50
                    operator: '<='
                    color: '#FFFF00' #yellow
                    icon: 'mdi:battery-50'

                  - value: 60
                    operator: '<='
                    color: '#FFFF00' #yellow
                    icon: 'mdi:battery-60'

                  - value: 70
                    operator: '<='
                    color: '#FFFF00' #yellow
                    icon: 'mdi:battery-70'

                  - value: 80
                    operator: '<='
                    color: '#CCFF33' #yellow green
                    icon: 'mdi:battery-80'

                  - value: 90
                    operator: '<='
                    color: '#66FF33' #light green
                    icon: 'mdi:battery-90'

                  - value: 100
                    operator: '<='
                    color: '#279b37' #dark green
                    icon: 'mdi:battery'

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: 'Bug #89'
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
              - type: 'custom:button-card'
                entity: switch.skylight
              - type: 'custom:button-card'
                entity: switch.skylight
              - type: 'custom:button-card'
                entity: switch.skylight
              - type: 'custom:button-card'
                entity: switch.skylight
              - type: 'custom:button-card'
                entity: switch.skylight
              - type: 'custom:button-card'
                entity: switch.skylight
              - type: 'custom:button-card'
                entity: switch.skylight
              - type: 'custom:button-card'
                entity: switch.skylight
              - type: 'custom:button-card'
                entity: switch.skylight
          - type: horizontal-stack
            cards:
              - type: entity-button
                entity: switch.skylight
              - type: entity-button
                entity: switch.skylight
              - type: entity-button
                entity: switch.skylight
              - type: entity-button
                entity: switch.skylight
              - type: entity-button
                entity: switch.skylight
              - type: entity-button
                entity: switch.skylight
              - type: entity-button
                entity: switch.skylight
              - type: entity-button
                entity: switch.skylight
              - type: entity-button
                entity: switch.skylight
              - type: entity-button
                entity: switch.skylight

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Labels
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                color_type: icon
                entity: light.test_light
                label: >
                  [[[
                  var bri = states['light.test_light'].attributes.brightness;
                  return 'Brightness: ' + (bri ? bri : '0') + '%';
                  ]]]
                show_label: true
                show_state: true
                size: 10%
                styles:
                  card:
                    - height: 100px
                  label:
                    - color: gray
                    - font-size: 9px
                    - justify-self: start
                    - padding: 0px 5px
                  name:
                    - text-transform: uppercase
                    - letter-spacing: 0.5em
                    - font-familly: cursive
                    - justify-self: start
                    - padding: 0px 5px
                  state:
                    - justify-self: start
                    - font-size: 10px
                    - padding: 0px 5px
                state:
                  - value: 'on'
                    styles:
                      state:
                        - color: green
                  - value: 'off'
                    styles:
                      state:
                        - color: red
                      card:
                        - filter: brightness(40%)
              - type: 'custom:button-card'
                color_type: icon
                entity: light.test_light
                layout: icon_label
                label: >
                  [[[ return 'Other State: ' + states['switch.skylight'].state; ]]]
                show_label: true
                show_name: false
                size: 100%
                styles:
                  card:
                    - height: 200px
                  label:
                    - font-weight: bold
                    - writing-mode: vertical-rl
                    - text-orientation: mixed
                state:
                  - value: 'on'
                    styles:
                      label:
                        - color: red
                  - value: 'off'
                    styles:
                      label:
                        - color: green

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: State Template
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                color_type: icon
                entity: switch.skylight
                show_state: true
                show_label: true
                state:
                  - operator: template
                    value: >
                      [[[
                        return states['light.test_light'].attributes
                        && (states['light.test_light'].attributes.brightness <= 100)
                      ]]]
                    icon: mdi:alert
                  - operator: default
                    icon: mdi:lightbulb
              - type: 'custom:button-card'
                color_type: icon
                entity: switch.skylight
                show_label: true
                state:
                  - operator: template
                    value: >
                      [[[
                        return states['light.test_light'].attributes
                        && (!states['light.test_light'].attributes.brightness || states['light.test_light'].attributes.brightness <= 100)
                      ]]]
                    icon: mdi:weather-night
                    label: Night Mode
                  - operator: default
                    icon: mdi:white-balance-sunny
                    label: Day Mode

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Lock
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                name: Only test
                lock:
                  enabled: true
                  duration: 10
                  unlock: double_tap
                  exemptions:
                    - username: test
              - type: 'custom:button-card'
                color_type: card
                lock:
                  enabled: true
                  exemptions: []
                color: black
                name: Always
                entity: switch.skylight

  # second view
  - title: 2nd
    cards:
      - type: entities
        entities:
          - input_number.test
          - switch.skylight
      - type: 'custom:button-card'
        color_type: label-card
        styles:
          card:
            - font-weight: bold
            - text-transform: uppercase
        icon: mdi:arrow-left-circle
        name: Return
        tap_action:
          action: navigate
          navigation_path: /lovelace/0

  # Demo Layout
  - title: Layout Demo
    cards:
      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Layout
          - type: vertical-stack
            cards:
              - type: 'custom:button-card'
                color_type: label-card
                name: icon_name_state
                color: var(--paper-item-icon-color)
                styles:
                  card:
                    - font-weight: bold
                    - padding: 5px 0px
              - type: 'custom:button-card'
                entity: sensor.sensor1
                show_state: true
                layout: icon_name_state

          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                color_type: label-card
                name: name_state
                color: var(--paper-item-icon-color)
                styles:
                  card:
                    - font-weight: bold
                    - padding: 5px 0px
              - type: 'custom:button-card'
                color_type: label-card
                name: vertical (default)
                color: var(--paper-item-icon-color)
                styles:
                  card:
                    - font-weight: bold
                    - padding: 5px 0px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: sensor.sensor1
                show_state: true
                layout: name_state
              - type: 'custom:button-card'
                entity: sensor.sensor1
                show_state: true

          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                color_type: label-card
                name: icon_name
                color: var(--paper-item-icon-color)
                styles:
                  card:
                    - font-weight: bold
                    - padding: 5px 0px
              - type: 'custom:button-card'
                color_type: label-card
                name: icon_state
                color: var(--paper-item-icon-color)
                styles:
                  card:
                    - font-weight: bold
                    - padding: 5px 0px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: sensor.sensor1
                show_state: true
                layout: icon_name
              - type: 'custom:button-card'
                entity: sensor.sensor1
                show_state: true
                layout: icon_state

          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                color_type: label-card
                name: icon_name with hidden state
                color: var(--paper-item-icon-color)
                styles:
                  card:
                    - font-weight: bold
                    - padding: 5px 0px
              - type: 'custom:button-card'
                color_type: label-card
                name: icon_state with hidden name
                color: var(--paper-item-icon-color)
                styles:
                  card:
                    - font-weight: bold
                    - padding: 5px 0px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: sensor.sensor1
                show_state: false
                layout: icon_name
              - type: 'custom:button-card'
                entity: sensor.sensor1
                show_state: true
                show_name: false
                layout: icon_state

          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                color_type: label-card
                name: icon_name_state2nd
                color: var(--paper-item-icon-color)
                styles:
                  card:
                    - font-weight: bold
                    - padding: 5px 0px
              - type: 'custom:button-card'
                color_type: label-card
                name: icon_state_name2nd
                color: var(--paper-item-icon-color)
                styles:
                  card:
                    - font-weight: bold
                    - padding: 5px 0px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: sensor.sensor1
                show_state: true
                layout: icon_name_state2nd
              - type: 'custom:button-card'
                entity: sensor.sensor1
                show_state: true
                layout: icon_state_name2nd

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
                - height: 100px
            name: Grid
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                show_icon: true
                show_state: true
                styles:
                  card:
                    - height: 200px
                dbltap_action:
                  action: call-service
                  service: input_number.increment
                  service_data:
                    entity_id: input_number.test
              - type: custom:vertical-stack-in-card
                title: Entities card sample
                cards:
                  - type: horizontal-stack
                    cards:
                      - type: button-card
                        entity: switch.skylight
                        name: Default
                      - type: 'custom:button-card'
                        entity: switch.skylight
                      - color: var(--primary-color)
                        color_type: card
                        entity: light.test_light
                        hold_action:
                          action: more-info
                        icon: 'mdi:lightbulb'
                        name: Shelf
                        state:
                          - color: red
                            value: 'off'
                        type: 'custom:button-card'

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: RGB
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: light.test_light
                layout: rgb_light
                name: Default
                color_type: card

      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color_type: label-card
            styles:
              card:
                - font-weight: bold
                - text-transform: uppercase
            name: Lock
          - type: 'custom:button-card'
            color_type: blank-card
            styles:
              card:
                - height: 100px
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                entity: switch.skylight
                lock:
                  enabled: true
                styles:
                  lock:
                    - color: red
                    - align-items: flex-end
                    - justify-content: flex-start
              - type: 'custom:button-card'
                color_type: card
                lock:
                  enabled: true
                color: black
                entity: switch.skylight
                show_label: true
                show_last_changed: true

  - title: overlay
    cards:
      - type: alarm-panel
        entity: alarm_control_panel.home_alarm
      - type: custom:button-card
        entity: switch.skylight
        tap_action:
          action: overlay
          overlay: cover
      - type: custom:button-card
        entity: alarm_control_panel.home_alarm
        show_state: true

      - type: 'custom:button-card'
        layout: icon_label
        entity: light.test_light
        color: auto
        show_state: true
        show_name: true
        show_label: true
        styles:
          grid:
            - grid-template-rows: 30px auto 30px
          card:
            - border-radius: 15px
            - height: 105px
            - width: 105px
            - margin: 5px 5px 0px 0px
          icon:
            - align-self: end
            - height: 30px
            - width: 30px
          name:
            - justify-self: start
            - padding: 0px 10px
            - font-size: 13px
          label:
            - align-self: end
            - padding: 1px
            - font-size: 11px
            - font-weight: bold
            - font-family: Helvetica
          state:
            - font-size: 11px
            - font-family: Helvetica
            - text-transform: capitalize
            - font-weight: bold
            - align-self: end
            - justify-self: start
            - padding: 5px 10px
        state:
          - value: 'on'
            styles:
              card:
                - --paper-card-background-color: rgba(40, 40, 40)
                - box-shadow: 0px 0px 20px 3px var(--button-card-light-color)
              name:
                - color: white
              state:
                - color: white
              label:
                - color: white
          - value: 'off'
            styles:
              label:
                - color: rgba(0, 0, 0, 0.0)
        tap_action:
          action: toggle
        hold_action:
          action: more-info

  - title: Test
    cards:
      - type: 'custom:button-card'
        layout: icon_label
        color: auto
        show_state: false
        show_name: true
        show_label: true
        name: Media
        icon: mdi:music-note
        label: Line 1<br />Line 2
        styles:
          grid:
            - grid-template-rows: 50px auto auto
            - grid-template-columns: 50px auto
          card:
            - border-radius: 15px
            - height: 76px
            - width: 342px
            - margin: 5px 5px 0px 0px
            - --paper-card-background-color: rgba(40, 40, 40)
            - box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color
          icon:
            - color: var(--paper-item-icon-active-color)
            - height: 30px
            - width: 30px
          name:
            - justify-self: start
            - padding: 0px 10px
            - font-size: 12px
            - text-transform: capitalize
            - color: white
          label:
            - text-transform: capitalize
            - font-size: 12px
            - justify-self: start
            - color: white
        tap_action:
          action: toggle

      - type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: switch.skylight
            icon: mdi:spotlight
            show_name: false
            show_label: true
            label: 1
            layout: custom
            styles:
              grid:
                - display: flex
                - position: relative
              label:
                - position: absolute
                - left: 0
                - right: 0
                - top: 0
                - bottom: 0
                - text-align: right
                - padding: 0px 5px
              img_cell:
                - align-items: center
                - justify-content: center
          - type: custom:button-card
            entity: switch.skylight
            icon: mdi:spotlight
            show_name: false
            show_label: true
            label: 2
            layout: custom
            styles:
              grid:
                - display: flex
                - position: relative
              label:
                - position: absolute
                - left: 0
                - right: 0
                - top: 0
                - bottom: 0
                - text-align: right
                - padding: 0px 5px
              img_cell:
                - align-items: center
                - justify-content: center

          - type: custom:button-card
            entity: switch.skylight
            icon: mdi:spotlight
            show_name: false
            show_label: true
            label: 3
            layout: custom
            styles:
              grid:
                - display: flex
                - position: relative
              label:
                - position: absolute
                - left: 0
                - right: 0
                - top: 0
                - bottom: 0
                - text-align: right
                - padding: 0px 5px
              img_cell:
                - align-items: center
                - justify-content: center
          - type: custom:button-card
            entity: switch.skylight
            icon: mdi:spotlight
            show_name: false
            show_label: true
            label: 4
            layout: custom
            styles:
              grid:
                - display: flex
                - position: relative
              label:
                - position: absolute
                - left: 0
                - right: 0
                - top: 0
                - bottom: 0
                - text-align: right
                - padding: 0px 5px
              img_cell:
                - align-items: center
                - justify-content: center
          - type: custom:button-card
            entity: switch.skylight
            icon: mdi:spotlight
            show_name: false
            show_label: true
            label: 5
            layout: custom
            styles:
              grid:
                - display: flex
                - position: relative
              label:
                - position: absolute
                - left: 0
                - right: 0
                - top: 0
                - bottom: 0
                - text-align: right
                - padding: 0px 5px
              img_cell:
                - align-items: center
                - justify-content: center
      - type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            entity: switch.skylight
            show_label: true
            state:
              - operator: template
                value: >
                  var last_changed = new Date(entity.last_changed);
                  var now = new Date();
                  return (now - last_changed) / 1000 / 60 / 60 <= 1
                color: '#FF0000'
                label: >
                  [[[
                  var last_changed = new Date(entity.last_changed);
                  var now = new Date();
                  return `${now} <br/>- ${last_changed}`
                  ]]]
          - type: custom:button-card
            entity: input_number.test
            show_state: true
            styles:
              icon:
                - transform: rotate(45deg) scaleX(-1)
            hold_action:
              action: call-service
              repeat: 500
              repeat_limit: 2
              service: input_number.increment
              service_data:
                entity_id: input_number.test
            double_tap_action:
              action: call-service
              repeat: 500
              service: input_number.decrement
              service_data:
                entity_id: input_number.test

      - type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            entity: switch.skylight
            color_type: card
            show_name: false
            show_label: true
            layout: icon_label
            size: 20px
            styles:
              card:
                - height: 50px
                - border-radius: 10px
              grid:
                - grid-template-columns: min-content min-content
                - width: min-content
                - margin: auto
                - grid-gap: 0px 10px
            label: >
              [[[
              return "Windows: " + 1;
              ]]]
            state:
              - value: 'on'
                color: rgb(71,39,45) #Red
                icon: mdi:window-open
                styles:
                  label:
                    - color: rgb(220,69,121)
                  icon:
                    - color: rgb(220,69,121)
              - value: 'off'
                color: rgb(49,68,42) #Green
                icon: mdi:window-closed
                styles:
                  label:
                    - color: rgb(134,219,85)
                  icon:
                    - color: rgb(134,219,85)
          - type: 'custom:button-card'
            entity: switch.skylight
            color_type: card
            show_name: false
            show_label: true
            layout: icon_label
            size: 20px
            styles:
              label:
                - justify-self: start
                # - padding-right: 30%
              card:
                - height: 50px
                - border-radius: 10px
            label: >
              [[[return 'Windows: ' + 1;]]]
            state:
              - value: 'on'
                color: rgb(71,39,45) #Red
                icon: mdi:window-open
                styles:
                  label:
                    - color: rgb(220,69,121)
                  icon:
                    - color: rgb(220,69,121)
              - value: 'off'
                color: rgb(49,68,42) #Green
                icon: mdi:window-closed
                styles:
                  label:
                    - color: rgb(134,219,85)
                  icon:
                    - color: rgb(134,219,85)
      - type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            entity: binary_sensor.bsensor1
            layout: icon_name_state2nd
            show_state: true
            show_name: true
            show_label: true
            label: label
          - type: 'custom:button-card'
            entity: binary_sensor.bsensor1
            layout: icon_state_name2nd
            show_state: true
            show_name: true
            show_label: true
            label: label
            styles:
              grid:
                - grid-template-areas: '"n i" "s i" "l i"'
                - grid-template-columns: 1fr 40%

      - type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            entity: sensor.sensor1
            show_state: true
            show_name: true
            show_label: true
            label: label
          - type: 'custom:button-card'
            entity: sensor.sensor1
            show_state: true
            show_name: true
            show_label: true
            label: label
            styles:
              grid:
                - grid-template-areas: '"l" "i" "n" "s"'
                - grid-template-rows: min-content 1fr min-content min-content

      - type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: switch.skylight
            name: Label and State Same line
            icon: mdi:fire
            color_type: card
            show_state: true
            show_label: true
            label: label
            styles:
              grid:
                - grid-template-areas: '"i i" "n n" "s l"'
                - grid-template-columns: 1fr 1fr
                - grid-template-rows: 1fr min-content min-content
              state:
                - justify-self: start
                - padding-left: 10px
              label:
                - justify-self: end
                - padding-right: 10px
          - type: custom:button-card
            entity: switch.skylight
            name: Label and State Same line
            icon: mdi:fire
            show_state: true
            show_label: true
            label: label
            styles:
              grid:
                - grid-template-areas: '"i i" "n n" "s l"'
                - grid-template-columns: 1fr 1fr
                - grid-template-rows: 1fr min-content min-content
              state:
                - justify-self: start
                - padding-left: 10px
              label:
                - justify-self: end
                - padding-right: 10px

      - type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: switch.skylight
            name: <3 Apple
            icon: mdi:fire
            show_state: true
            styles:
              card:
                - width: 100px
                - height: 100px
              grid:
                - grid-template-areas: '"i" "n" "s"'
                - grid-template-columns: 1fr
                - grid-template-rows: 1fr min-content min-content
              img_cell:
                - align-self: start
                - text-align: start
              name:
                - justify-self: start
                - padding-left: 10px
                - font-weight: bold
                - text-transform: lowercase
              state:
                - justify-self: start
                - padding-left: 10px
            state:
              - value: 'off'
                styles:
                  card:
                    - filter: opacity(50%)
                  icon:
                    - filter: grayscale(100%)
          - type: custom:button-card
            entity: switch.skylight
            name: <3 Apple
            icon: mdi:fire
            color_type: card
            show_state: true
            styles:
              card:
                - width: 100px
                - height: 100px
              grid:
                - grid-template-areas: '"i" "n" "s"'
                - grid-template-columns: 1fr
                - grid-template-rows: 1fr min-content min-content
              img_cell:
                - align-self: start
                - text-align: start
              name:
                - justify-self: start
                - padding-left: 10px
                - font-weight: bold
                - text-transform: lowercase
              state:
                - justify-self: start
                - padding-left: 10px
            state:
              - value: 'off'
                styles:
                  card:
                    - filter: opacity(50%)
                  icon:
                    - filter: grayscale(100%)
          - type: custom:button-card
            entity: switch.skylight
            name: <3 Apple
            icon: mdi:fire
            show_state: true
            styles:
              card:
                - width: 100px
                - height: 100px
              grid:
                - grid-template-areas: '"i" "n" "s"'
                - grid-template-columns: 1fr
                - grid-template-rows: 1fr min-content min-content
              img_cell:
                - align-self: start
                - text-align: start
              name:
                - justify-self: start
                - padding-left: 10px
                - font-weight: bold
                - text-transform: lowercase
              state:
                - justify-self: start
                - padding-left: 10px
            state:
              - value: 'off'
                styles:
                  card:
                    - filter: opacity(50%)
                  icon:
                    - filter: grayscale(100%)

  - title: User Requests
    cards:
      - type: custom:button-card
        template: sensor_test
        entity: input_number.test
        show_entity_picture: true
        ripple_color: rgba(255, 0, 0, 100)
        tap_action:
          action: more-info
          entity: switch.skylight
        color_type: card
        # styles:
        #   card:
        #     - background-color: black
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                name: 1/1
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                name: 2/1
                icon: mdi:lightbulb
                aspect_ratio: 2/1
              - type: custom:button-card
                name: 3/1
                icon: mdi:lightbulb
                aspect_ratio: 3/1
              - type: custom:button-card
                name: 4/1
                icon: mdi:lightbulb
                aspect_ratio: 4/1
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                name: 1/1.2
                icon: mdi:lightbulb
                aspect_ratio: 1/1.2
              - type: custom:button-card
                name: 1/1.3
                icon: mdi:lightbulb
                aspect_ratio: 1/1.3
              - type: custom:button-card
                name: 1/1.4
                icon: mdi:lightbulb
                aspect_ratio: 1/1.4
              - type: custom:button-card
                name: 1/1.5
                icon: mdi:lightbulb
                aspect_ratio: 1/1.5
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: light.test_light
                template: light_button_style
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                entity: light.test_light
                template: light_button_style
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                entity: light.test_light
                template: light_button_style
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                entity: light.test_light
                template: light_button_style
                icon: mdi:lightbulb
                aspect_ratio: 1/1

          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: light.test_light
                show_state: true
                show_name: false
                layout: icon_state
                icon: mdi:lightbulb
                aspect_ratio: 2/1
              - type: custom:button-card
                entity: light.test_light
                template: light_button_style
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                entity: light.test_light
                template: light_button_style
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                entity: light.test_light
                template: light_button_style
                icon: mdi:lightbulb
                aspect_ratio: 1/1

          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: light.test_light
                template: button_picture
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                entity: light.test_light
                template: button_picture
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                entity: light.test_light
                template: button_picture
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                color_type: blank-card

          - type: horizontal-stack
            cards:
              - type: custom:button-card
                entity: light.test_light
                template: cb_overview_counters
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                entity: light.test_light
                template: cb_overview_counters
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                entity: light.test_light
                template: cb_overview_counters
                icon: mdi:lightbulb
                aspect_ratio: 1/1
              - type: custom:button-card
                color_type: blank-card

      - type: custom:lovelace-template-card
        template: test_template
        variables:
          - entity: switch.skylight

  - title: User Requests2
    cards:
      - type: custom:button-card
        icon: mdi:fire
        entity: switch.skylight
        name: test
        styles:
          card:
            - height: 50px
            - padding: 0px
        state:
          - value: 'on'
            styles:
              card:
                - box-sizing: border-box
                - border: '3px solid var(--button-card-light-color)'
      - type: vertical-stack
        cards:
          - type: custom:button-card
            entity: timer.laundry
            show_state: true
            tap_action:
              action: call-service
              service: timer.start
              service_data:
                entity_id: entity
                duration: 60
      - type: entities
        entities:
          - timer.laundry
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: button_motion
            entity: switch.skylight
            label: asdflkjsdalkjsfd lksjdfklsdjaf
            name: asldkjasdklasjdlas
          - type: custom:button-card
            template: button_motion
            entity: switch.skylight
            label: asdflkjsdalkjsfd lksjdfklsdjaf
            name: asldkjasdklasjdlas
          - type: custom:button-card
            template: button_motion
            entity: switch.skylight
            label: asdflkjsdalkjsfd lksjdfklsdjaf
            name: asldkjasdklasjdlas
          - type: custom:button-card
            template: button_motion
            entity: switch.skylight
            label: asdflkjsdalkjsfd lksjdfklsdjaf
            name: asldkjasdklasjdlas

  - title: Custom Fields
    cards:
      - type: custom:button-card
        variables:
          test2: piou
        template: test_var
        show_label: true
        entity: sensor.sensor1
        name: '[[[ return variables.test ]]]'
        label: '[[[ return variables.test2 ]]]'
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            color_type: blank-card
          - type: custom:button-card
            color_type: blank-card
          - type: custom:button-card
            icon: mdi:lightbulb
            aspect_ratio: 1/1
            name: Nb lights on
            styles:
              grid:
                - position: relative
              custom_fields:
                notification:
                  - background-color: >
                      [[[ if (states['input_number.test'].state == 0) return "green"; return "red" ]]]
                  - border-radius: 50%
                  - position: absolute
                  - left: 60%
                  - top: 10%
                  - height: 20px
                  - width: 20px
                  - font-size: 8px
                  - line-height: 20px
            custom_fields:
              notification: >
                [[[ return Math.floor(states['input_number.test'].state / 10) ]]]
          - type: custom:button-card
            icon: >
              [[[
                if (entity.state === 'on')
                  return "mdi:fire"
                return "mdi:lightbulb"
              ]]]
            entity: switch.skylight
            tap_action:
              action: call-service
              service: >
                [[[
                  if (states['input_number.test'].state <= 20)
                    return "input_number.increment"
                  return "input_number.decrement"
                ]]]
              service_data:
                command: popup
                title: 'Weather'
                deviceID:
                  - this
                card:
                  type: custom:swipe-card
                  parameters:
                    draggable: true
                    hide: false
                    pagination:
                      type: bullets
                    scrollbar: null
                    snapOnRelease: true
                    spaceBetween: 8
                  cards:
                    - type: iframe
                      aspect_ratio: 90%
                      url: https://embed.windy.com/embed2.html?lat=41.273&lon=-96.002&zoom=5&level=surface&overlay=rain&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=true&detailLat=41.273&detailLon=-96.002&metricWind=mph&metricTemp=%C2%B0F&radarRange=-1
                    - type: weather-forecast
                      entity: weather.hourly
                    - type: weather-forecast
                      entity: weather.dark_sky
            aspect_ratio: 1/1
            show_name: false
            custom_fields:
              temperature_icon: >
                [[[
                  return `<ha-icon
                    icon="mdi:thermometer"
                    style="height: 100%; padding-bottom: 2px;">
                  </ha-icon>`
                ]]]
              temperature: >
                [[[ return states['input_number.test'].state ]]]
              my_state: >
                [[[ return `My State is: ${entity.state}` ]]]
            styles:
              grid:
                - grid-template-areas: '"i temperature_icon temperature" "my_state my_state my_state"'
                - grid-template-columns: 50% min-content min-content
                - grid-template-rows: 1fr 1fr
              custom_fields:
                temperature:
                  - font-size: 12px
                  - text-align: start
                temperature_icon:
                  - justify-self: end

      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - type: custom:button-card
                entity: switch.skylight

      - type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: 'sensor.raspi_temp'
            hold_action:
              action: more-info
              entity: sensor.raspi_temp
            icon: 'mdi:raspberry-pi'
            aspect_ratio: 1/1
            name: HassOS
            styles:
              card:
                - background-color: '#000044'
                - border-radius: 10%
                - padding: 10%
                - color: ivory
                - font-size: 10px
                - text-shadow: 0px 0px 5px black
                - text-transform: capitalize
              grid:
                - grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
                - grid-template-columns: 1fr 1fr
                - grid-template-rows: 1fr min-content min-content min-content min-content
              name:
                - font-weight: bold
                - font-size: 13px
                - color: white
                - align-self: middle
                - justify-self: start
                - padding-bottom: 4px
              img_cell:
                - justify-content: start
                - align-items: start
                - margin: none
              icon:
                - color: >
                    [[[
                      if (entity.state < 60) return 'lime';
                      if (entity.state >= 60 && entity.state < 80) return 'orange';
                      else return 'red';
                    ]]]
                - width: 70%
                - margin-top: -10%
              custom_fields:
                temp:
                  - align-self: start
                  - justify-self: end
                cpu:
                  - padding-bottom: 2px
                  - align-self: middle
                  - justify-self: start
                  - --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "red"; ]]]'
                ram:
                  - padding-bottom: 2px
                  - align-self: middle
                  - justify-self: start
                  - --text-color-sensor: '[[[ if (states["sensor.raspi_ram"].state > 80) return "red"; ]]]'
                sd:
                  - align-self: middle
                  - justify-self: start
                  - --text-color-sensor: '[[[ if (states["sensor.raspi_sd"].state > 80) return "red"; ]]]'
            custom_fields:
              temp: >
                [[[
                  return `<ha-icon
                    icon="mdi:thermometer"
                    style="width: 12px; height: 12px; color: yellow;">
                    </ha-icon><span>${entity.state}°C</span>`
                ]]]
              cpu: >
                [[[
                  return `<ha-icon
                    icon="mdi:server"
                    style="width: 12px; height: 12px; color: deepskyblue;">
                    </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
                ]]]
              ram: >
                [[[
                  return `<ha-icon
                    icon="mdi:memory"
                    style="width: 12px; height: 12px; color: deepskyblue;">
                    </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_ram'].state}%</span></span>`
                ]]]
              sd: >
                [[[
                  return `<ha-icon
                    icon="mdi:harddisk"
                    style="width: 12px; height: 12px; color: deepskyblue;">
                    </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_sd'].state}%</span></span>`
                ]]]
            #template: button_good
          - type: custom:button-card
            aspect_ratio: 1/1
            custom_fields:
              graph:
                card:
                  type: sensor
                  entity: '[[[ return entity.entity_id ]]]'
                  graph: line
                  style: |
                    ha-card {
                      box-shadow: none;
                    }
              picture:
                card:
                  type: picture-glance
                  camera_image: camera.demo_camera
                  entities: []
                  camera_view: live
            styles:
              custom_fields:
                graph:
                  - filter: opacity(50%)
                  - overflow: unset
              card:
                - overflow: unset
              grid:
                - grid-template-areas: '"i" "n" "graph" "picture"'
                - grid-template-columns: 1fr
                - grid-template-rows: 1fr min-content min-content max-content

            entity: sensor.sensor1
            hold_action:
              action: more-info
  - title: Test decluttering
    cards:
      - type: vertical-stack
        cards:
          - type: custom:decluttering-card
            template: test_default
            variables:
              - entity: switch.skylight

  - title: Test Templates Parsing
    cards:
      - type: 'custom:button-card'
        entity: switch.skylight
        show_label: true
        name: '[[[ return states["switch.skylight"].entity_id ]]]'
        label: |
          [[[ return states['switch.test'] ]]]

      - type: 'custom:button-card'
        template: test_action_template
        variables:
          test: more-info
          test1: none
        entity: switch.skylight

      - type: custom:button-card
        name: >
          [[[
            return test.value
          ]]]

        # - type: picture-elements
        #   image: '/local/cast.jpg'
        #   elements:
        #     - type: state-label
        #       entity: switch.skylight
        #       style:
        #         top: 90%
        #         left: 20%
        # - type: custom:button-card
        #   color_type: blank-card
        # - type: custom:button-card
        #   color_type: blank-card

  - title: Test Config Templates
    cards:
      - type: 'custom:button-card'
        template: test1
      - type: 'custom:button-card'
        entity: switch.skylight
        extra_styles: |
          [[[
            return `ha-card {
              background: ${states['switch.skylight'].state === 'on' ? "blue" : "red"} !important;
            }`
          ]]]
      - type: 'custom:button-card'
        extra_styles: |
          [[[
            return `ha-card {
              background: ${states['switch.skylight'].state === 'on' ? "red" : "blue"} !important;
            }`
          ]]]
        name: Test
      - type: 'custom:button-card'
        entity: switch.skylight
        show_label: true
        show_icon: false
        show_name: false
        label: >
          [[[
            return states['switch.skylight'].state
          ]]]
        aspect_ratio: 16/10
        tap_action:
          action: none
        styles:
          card:
            - color: '#DADADB'
          label:
            - font-size: 6em

      - type: custom:button-card
        entity: switch.skylight
        state_display: Default state_display
        show_state: true
        state:
          - value: 'on'
            state_display: state[].state_display
          - value: 'off'
