createPanel({
        id: "demo-panel",
        title: "I'm a demo panel",
        icon: "fas fa-check",
        draggable: true,
        closable: true,
        items: [

            {
                type: "text",
                label: "First name",
                placeholder: "Enter your first name",
                events: {
                    onchange: () => publish("DATA_HAS_CHANGED")
                }                
            },

            {
                type: "text",
                label: "Last name",
                value: "SMITH (just a default value)",
                events: {
                    onchange: () => publish("DATA_HAS_CHANGED")
                }                
            },

            {
                type: "date",
                label: "Today is...",
            },

            {
                type: "select",
                label: "Your favorite addictions",
                multiple: true,
                options: [{
                        value: "Angularing",
                        color: "#00aaee"
                    },
                    {
                        value: "Reacting",
                        color: "#3bc48c"
                    },
                    {
                        value: "Vueing",
                        color: "#cc3300"
                    },
                    {
                        value: "Kissing",
                        color: "#ff9955"
                    }
                ],
                events: {
                    onchange: () => publish("DATA_HAS_CHANGED")
                }                
            },

            {
                type: "checkbox",
                label: "Random text",
                shape: "switch",
                iconColorOn: "#00aaee",
                events: {
                    onchange: function() {
                        let dumbHtml = $("dumb-text")
                        let dumbText = kiss.db.faker("description")
    
                        if (this.getValue() == true) {
                            dumbHtml.setValue(dumbText)
                            dumbHtml.setAnimation("zoomIn").show()
                        }
                        else dumbHtml.hide()

                        publish("DATA_HAS_CHANGED")
                    }
                }
            },

            {
                id: "dumb-text",
                type: "html",
                hidden: true
            },

            {
                id: "data",
                type: "textarea",
                label: "Form data",
                rows: 10,
                subscriptions: {
                    DATA_HAS_CHANGED: function() {
                        const formData = $(id).getData(true)
                        delete formData.data
                        const formDataAsString = JSON.stringify(formData, null, 4)
                        this.setValue(formDataAsString)
                    }
                }
            },

            // Block of 3 buttons aligned horizontally
            {
                type: "block",
                display: "flex",
                flexFlow: "row",

                // This config applies to the container's items
                defaultConfig: {
                    flex: 1,
                    margin: "5px",
                    borderRadius: "32px",
                    color: "#ffffff",
                    iconColor: "#ffffff",
                    iconSize: "14px",
                    padding: "8px 10px 8px 10px"
                },
                
                items: [
                    {
                        type: "button",
                        text: "Click to swing!",
                        backgroundColor: "#2e1d80",
                        backgroundColorHover: "#4e3da0",
                        icon: "fas fa-sync-alt",
                        events: {
                            onclick: () => {
                                const demoPanel = $("demo-panel")
                                demoPanel.setAnimation("swing")
                            }
                        }
                    },

                    {
                        type: "button",
                        text: "Click to shake!!",
                        backgroundColor: "#8c4bff",
                        backgroundColorHover: "#bc7bff",
                        icon: "fas fa-arrows-alt-h",
                        iconSize: "1vw",
                        events: {
                            onclick: () => {
                                $("demo-panel").setAnimation("shakeX")
                            }
                        }                 
                    },

                    {
                        type: "button",
                        text: "Squeeze that code",
                        backgroundColor: "#00aaee",
                        backgroundColorHover: "#30dafe",
                        icon: "fas fa-star",
                        events: {
                            onclick: () => {
                                $("code-example").scrollIntoView({behavior: "smooth"})
                                $("code-example").setAnimation({name: "jello", speed: "fast"})
                            }
                        }
                    }
                ]
            }
        ]
    })