import { Theme } from "theme.slint";

export component ObjectToolPanel inherits Rectangle {
    width: 280px;
    border-color: black;
    border-width: 1px;

    VerticalLayout {
        padding: Theme.padding-md;
        spacing: Theme.spacing-md;

        HorizontalLayout {
            height: Theme.size-md;
            Text {
                font-size: Theme.font-lg;
                text: @tr("Object Tool");
                vertical-alignment: center;
            }
        }

        Rectangle {
            border-color: black;
            border-width: 1px;
            border-radius: Theme.radius-md;
            clip: true;

            VerticalLayout {
                Rectangle {
                    height: Theme.size-md;
                    border-color: black;
                    border-width: 1px;
                    HorizontalLayout {
                        padding-left: Theme.padding-md;
                        padding-right: Theme.padding-md;
                        Text {
                            font-size: Theme.font-md;
                            text: @tr("Favourites");
                            vertical-alignment: center;
                        }
                    }
                }

                VerticalLayout {
                    padding: Theme.padding-md;
                    spacing: Theme.spacing-md;

                    Rectangle {
                        border-color: black;
                        border-width: 1px;
                        border-radius: Theme.radius-md;
                        clip: true;
                        VerticalLayout {
                            Rectangle {
                                height: Theme.size-md;
                                border-color: black;
                                border-width: 1px;
                                HorizontalLayout {
                                    padding-left: Theme.padding-md;
                                    padding-right: Theme.padding-md;
                                    Text {
                                        font-size: Theme.font-md;
                                        text: "Group Name";
                                        vertical-alignment: center;
                                        horizontal-alignment: center;
                                    }
                                }
                            }

                            HorizontalLayout {
                                height: Theme.size-md;
                                padding-left: Theme.padding-md;
                                padding-right: Theme.padding-md;
                                Text {
                                    font-size: Theme.font-md;
                                    text: "Object Name";
                                    vertical-alignment: center;
                                }
                            }

                            HorizontalLayout {
                                height: Theme.size-md;
                                padding-left: Theme.padding-md;
                                padding-right: Theme.padding-md;
                                Text {
                                    font-size: Theme.font-md;
                                    text: "Object Name";
                                    vertical-alignment: center;
                                }
                            }

                            HorizontalLayout {
                                height: Theme.size-md;
                                padding-left: Theme.padding-md;
                                padding-right: Theme.padding-md;
                                Text {
                                    font-size: Theme.font-md;
                                    text: "Object Name";
                                    vertical-alignment: center;
                                }
                            }
                        }
                    }
                }

                VerticalLayout {
                    padding: Theme.padding-md;
                    spacing: Theme.spacing-md;

                    Rectangle {
                        border-color: black;
                        border-width: 1px;
                        border-radius: Theme.radius-md;
                        clip: true;
                        VerticalLayout {
                            Rectangle {
                                height: Theme.size-md;
                                border-color: black;
                                border-width: 1px;
                                HorizontalLayout {
                                    padding-left: Theme.padding-md;
                                    padding-right: Theme.padding-md;
                                    Text {
                                        font-size: Theme.font-md;
                                        text: "Group Name";
                                        vertical-alignment: center;
                                        horizontal-alignment: center;
                                    }
                                }
                            }

                            HorizontalLayout {
                                height: Theme.size-md;
                                padding-left: Theme.padding-md;
                                padding-right: Theme.padding-md;
                                Text {
                                    font-size: Theme.font-md;
                                    text: "Object Name";
                                    vertical-alignment: center;
                                }
                            }

                            HorizontalLayout {
                                height: Theme.size-md;
                                padding-left: Theme.padding-md;
                                padding-right: Theme.padding-md;
                                Text {
                                    font-size: Theme.font-md;
                                    text: "Object Name";
                                    vertical-alignment: center;
                                }
                            }

                            HorizontalLayout {
                                height: Theme.size-md;
                                padding-left: Theme.padding-md;
                                padding-right: Theme.padding-md;
                                Text {
                                    font-size: Theme.font-md;
                                    text: "Object Name";
                                    vertical-alignment: center;
                                }
                            }
                        }
                    }
                }
            }
        }

        Rectangle {
            border-color: black;
            border-width: 1px;
            border-radius: Theme.radius-md;
            clip: true;

            VerticalLayout {

                Rectangle {
                    height: Theme.size-md;
                    border-color: black;
                    border-width: 1px;
                    HorizontalLayout {
                        padding-left: Theme.padding-md;
                        padding-right: Theme.padding-md;
                        Text {
                            font-size: Theme.font-md;
                            text: @tr("Hierarchy");
                            vertical-alignment: center;
                        }
                    }
                }

                VerticalLayout {
                    padding: Theme.padding-md;
                    spacing: Theme.spacing-md;

                    HorizontalLayout {
                        spacing: Theme.spacing-md;
                        height: Theme.size-md;
                        Text {
                            font-size: Theme.font-md;
                            vertical-alignment: center;
                            text: @tr("Name:");
                        }

                        Rectangle {
                            border-color: black;
                            border-width: 1px;
                            border-radius: Theme.radius-md;

                            Text {
                                font-size: Theme.font-md;
                                vertical-alignment: center;
                                horizontal-alignment: left;
                                text: "VicHutch (-514)";
                            }
                        }

                        Rectangle {
                            border-color: black;
                            border-width: 1px;
                            border-radius: Theme.radius-md;

                            width: Theme.size-md;
                        }

                        Rectangle {
                            border-color: black;
                            border-width: 1px;
                            border-radius: Theme.radius-md;

                            width: Theme.size-md;
                        }
                    }

                    Rectangle {
                        border-color: black;
                        border-width: 1px;
                        border-radius: Theme.radius-md;
                        clip: true;

                        Text {
                            font-size: Theme.font-lg;
                            text: "INSERT TREE VIEW HERE";
                            vertical-alignment: center;
                            horizontal-alignment: center;
                        }
                    }
                }
            }
        }
    }
}