// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial

import { Palette, Typography } from "styling.slint";

// A container widget with a title.
export component GroupBox {
    in property <string> title <=> i-text.text;
    in property <bool> enabled: true;

    VerticalLayout {
        spacing: 4px;

        i-text := Text {
            color: Palette.on-surface;
            // FIXME after Roboto font can be loaded
            //font-family: Typography.body-small.font;
            font-size: Typography.body-large.font-size;
            font-weight: Typography.body-small.font-weight;
            overflow: elide;
            horizontal-alignment: center;
        }

        i-background := Rectangle {
            border-radius: 16px;
            border-width: 1px;
            border-color: Palette.outline;
            vertical-stretch: 1;
            background: Palette.surface;

            HorizontalLayout {
                padding: 16px;

                GridLayout {
                    @children
                }
            }
        }
    }

    states [
        disabled when !root.enabled : {
            i-background.border-color: Palette.on-surface;
            i-background.opacity: 0.38;
            i-text.opacity: 0.38;
        }
    ]
}