LibrePCB

import { Spinner } from "spinner.slint";
import { Data } from "../api.slint";

export component PanelHeader inherits Rectangle {
    in property <length> spacing-top;
    in property <string> title;
    in property <string> note;
    in property <bool> show-spinner: false;
    in property <bool> highlight: false;
    out property <int> max-buttons: floor(self.width / self.height) - 1;
    property <length> content-height: 24px;

    height: spacing-top + content-height + 2px;
    background: Data.theme.window;

    // Accessibility
    accessible-role: text;
    accessible-label: title;

    VerticalLayout {
        padding-top: spacing-top;

        Rectangle {
            height: 1px;
            background: Data.theme.base-border;
        }

        HorizontalLayout {
            height: content-height;
            padding-left: 5px;
            padding-right: 1px;
            spacing: 3px;

            title-txt := Text {
                y: 2px;
                font-weight: 700;
                overflow: elide;
                vertical-alignment: center;
                color: Data.theme.base-text;
                text: title;
                accessible-role: none;
            }

            if !note.is-empty: note-txt := Text {
                y: 2px;
                horizontal-stretch: 1;
                font-size: 11px;
                font-italic: true;
                vertical-alignment: center;
                overflow: elide;
                color: Data.theme.base-text;
                text: note;
            }

            HorizontalLayout {
                if show-spinner: spinner := Spinner {
                    indeterminate: true;
                    width: content-height - 8px;
                    height: content-height;
                }

                @children
            }
        }

        Rectangle {
            height: 1px;
            background: {
                if highlight {
                    @linear-gradient(90deg, Data.theme.accent 0%, Data.theme.base-border 100%)
                } else {
                    Data.theme.base-border
                }
            };
        }
    }
}