// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { md } from "md.slint";

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

    VerticalLayout {
        padding-top: label-container.height + 16px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 16px;

        Rectangle {
            vertical-stretch: 1;
            GridLayout {
                @children
            }
        }
    }

    container := Rectangle {
        border-radius: 4px;
        border-width: 1px;
        border-color: md.sys.color.outline;
        y: label-container.y + label-container.height / 2;
        width: 100%;
        height: parent.height - label-container.height / 2;
    }

    label-container := Rectangle {
        y:0;
        x: 8px;
        width: label.width + 8px;
        height: label.height + 8px;
        background: md.sys.color.background;

        label := Text {
            x: 4px;
            y: 4px;
            color: md.sys.color.on-surface;
            // FIXME after Roboto font can be loaded
            //font-family: md.sys.typescale.body-small.font;
            font-size: md.sys.typescale.body-small.size;
            font-weight: md.sys.typescale.body-small.weight;
            overflow: elide;
        }
    }

    states [
        disabled when !root.enabled : {
            container.border-color: md.sys.color.on-surface;
            container.opacity: 0.38;
            label.opacity: 0.38;
        }
    ]
}