// Page layout component - Fixed header with scrollable content area
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";

export component PageLayout inherits Rectangle {
    in property <string> title;
    in property <bool> show-actions: false;

    @children

    background: Theme.colors.background;

    VerticalLayout {
        // Fixed header
        header := Rectangle {
            height: 48px;
            background: Theme.colors.background;

            HorizontalLayout {
                padding-left: SpacingSystem.spacing.s4;
                padding-right: SpacingSystem.spacing.s4;
                padding-top: SpacingSystem.spacing.s3;
                padding-bottom: SpacingSystem.spacing.s3;
                spacing: SpacingSystem.spacing.s4;
                alignment: space-between;

                Text {
                    text: root.title;
                    font-size: Typography.sizes.xl;
                    font-weight: Typography.weights.bold;
                    color: Theme.colors.foreground;
                    vertical-alignment: center;
                }

                // Right side actions area (inserted via @children)
                if root.show-actions: HorizontalLayout {
                    spacing: SpacingSystem.spacing.s2;
                    vertical-alignment: center;
                }
            }
        }

        // Scrollable content area
        Flickable {
            viewport-height: content-layout.preferred-height + SpacingSystem.spacing.s4 * 2;

            content-layout := VerticalLayout {
                padding: SpacingSystem.spacing.s4;
                spacing: SpacingSystem.spacing.s4;
            }
        }
    }
}