<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.Rectangle?>
<?import org.jackhuang.hmcl.ui.construct.AdvancedListBox?>
<?import org.jackhuang.hmcl.ui.FXUtils?>
<?import java.lang.String?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<fx:root xmlns="http://javafx.com/javafx"
         type="StackPane"
         xmlns:fx="http://javafx.com/fxml">
    <styleClass>
        <String fx:value="jfx-decorator"/>
        <String fx:value="resize-border"/>
    </styleClass>
    <BorderPane
            maxHeight="519"
            maxWidth="800">
        <center>
            <StackPane fx:id="drawerWrapper" styleClass="jfx-decorator-drawer" FXUtils.overflowHidden="true">
                <BorderPane>
                    <left>
                        <StackPane minWidth="200" maxWidth="200" styleClass="jfx-decorator-content-container">
                            <BorderPane fx:id="leftRootPane">
                                <center>
                                    <StackPane styleClass="gray-background">
                                        <AdvancedListBox fx:id="leftPane"/>
                                    </StackPane>
                                </center>
                                <right>
                                    <Rectangle height="${leftRootPane.height}" width="1" fill="gray"/>
                                </right>
                            </BorderPane>
                        </StackPane>
                    </left>
                    <center>
                        <StackPane fx:id="contentPlaceHolderRoot" styleClass="jfx-decorator-content-container" FXUtils.overflowHidden="true"
                                   VBox.vgrow="ALWAYS">
                            <StackPane fx:id="contentPlaceHolder" styleClass="jfx-decorator-content-container">
                                <!-- Node -->
                            </StackPane>
                        </StackPane>
                    </center>
                </BorderPane>
                <ImageView fx:id="welcomeView">
                    <Image url="/assets/img/welcome.png" />
                </ImageView>
            </StackPane>
        </center>
        <top>
            <BorderPane fx:id="titleContainer" minHeight="40" styleClass="jfx-tool-bar"
                        pickOnBounds="false"
                        onMouseReleased="#onMouseReleased"
                        onMouseDragged="#onMouseDragged"
                        onMouseMoved="#onMouseMoved">
                <left>
                    <BorderPane minWidth="200" maxWidth="200" fx:id="titleWrapper">
                        <center>
                            <Label fx:id="lblTitle" BorderPane.alignment="CENTER" mouseTransparent="true"
                                   style="-fx-background-color: transparent; -fx-text-fill: -fx-base-text-fill; -fx-font-size: 15px;">
                                <BorderPane.margin>
                                    <Insets left="3" />
                                </BorderPane.margin>
                            </Label>
                        </center>
                        <right>
                            <Rectangle height="${navBar.height}" width="1" fill="gray"/>
                        </right>
                    </BorderPane>
                </left>
                <center>
                    <BorderPane fx:id="navBar">
                        <left>
                            <HBox fx:id="navLeft" alignment="CENTER_LEFT" style="-fx-padding: 0 5 0 5;">
                                <JFXButton fx:id="backNavButton" onMouseClicked="#onBack"
                                           styleClass="jfx-decorator-button" ripplerFill="white" />
                                <JFXButton fx:id="closeNavButton" onMouseClicked="#onCloseNav"
                                           styleClass="jfx-decorator-button" ripplerFill="white" />
                            </HBox>
                        </left>
                        <center>
                            <VBox alignment="CENTER_LEFT"> <!-- don't know why label always be centered when using HBox -->
                                <Label fx:id="titleLabel" style="-fx-text-fill: -fx-base-text-fill; -fx-font-size: 15;"/>
                            </VBox>
                        </center>
                        <right>
                            <HBox fx:id="navRight" alignment="CENTER_LEFT">
                                <JFXButton fx:id="refreshNavButton" onMouseClicked="#onRefresh"
                                           styleClass="jfx-decorator-button" ripplerFill="white" />
                            </HBox>
                        </right>
                    </BorderPane>
                </center>
                <right>
                    <HBox fx:id="buttonsContainer" style="-fx-background-color: transparent;" alignment="CENTER_RIGHT">
                        <padding>
                            <Insets topRightBottomLeft="4.0"/>
                        </padding>
                        <Rectangle fx:id="separator" height="${navBar.height}" width="1" fill="gray"/>
                        <JFXButton fx:id="btnMin" styleClass="jfx-decorator-button" ripplerFill="white"
                                   onAction="#onMin">
                        </JFXButton>
                        <JFXButton fx:id="btnMax" styleClass="jfx-decorator-button" ripplerFill="white"
                                   onAction="#onMax">
                        </JFXButton>
                        <JFXButton fx:id="btnClose" styleClass="jfx-decorator-button" ripplerFill="white"
                                   onAction="#onClose">
                        </JFXButton>
                    </HBox>
                </right>
            </BorderPane>
        </top>
    </BorderPane>
</fx:root>