export component DemoWindow inherits Window {
    width: 1920px;
    height: 480px;

    callback exit;
    in property <[brush]> bar-colors;
    in property <string> window-title;
    in property <int> counter;

    VerticalLayout {
        Rectangle {
            height: 60px;
            background: #2d2d2d;

            HorizontalLayout {
                padding-right: 12px;

                HorizontalLayout {
                    horizontal-stretch: 1;
                    alignment: center;

                    Text {
                        text: window-title+" (";
                        color: #ffffff;
                        font-size: 28px;
                        font-weight: 700;
                        vertical-alignment: center;
                    }

                    Text {
                        text: counter+")";
                        color: #ffffff;
                        font-size: 28px;
                        font-weight: 700;
                        vertical-alignment: center;
                    }
                }

                VerticalLayout {
                    alignment: center;

                    Rectangle {
                        width: 70px;
                        height: 40px;
                        background: touch-area.has-hover ? #4a4a4a : #3a3a3a;
                        border-radius: 4px;

                        exit-text := Text {
                            text: "Exit";
                            color: touch-area.has-hover ? #000000 : #ffffff;
                            font-weight: 600;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }

                        touch-area := TouchArea {
                            clicked => { exit(); }
                        }
                    }
                }
            }
        }

        HorizontalLayout {
            alignment: start;
            spacing: 0px;

            for color in bar-colors: Rectangle {
                width: 60px;
                background: color;
            }
        }
    }
}