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

<?import com.andrewlalis.perfin.view.component.AccountSelectionBox?>
<?import com.andrewlalis.perfin.view.component.PropertiesPane?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<BorderPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.andrewlalis.perfin.control.TransactionsViewController"
>
    <top>
        <HBox styleClass="std-padding,std-spacing">
            <Button text="Add Transaction" onAction="#addTransaction"/>
            <Button text="Export Transactions" onAction="#exportTransactions" disable="true"/>
        </HBox>
    </top>
    <center>
        <!-- The main page content is an HBox with a list of transactions on the
         left, and a detail panel on the right (which is hidden if no
         transaction is selected). -->
        <HBox>
            <BorderPane fx:id="transactionsListBorderPane" HBox.hgrow="ALWAYS">
                <top>
                    <VBox styleClass="padding-extra,std-spacing">
                        <TextField fx:id="searchField" promptText="Search" maxWidth="300" prefWidth="200" minWidth="100"/>
                        <PropertiesPane hgap="5" vgap="5">
                            <Label text="Filter by Account"/>
                            <AccountSelectionBox fx:id="filterByAccountComboBox" allowNone="true" showBalance="false"/>
                        </PropertiesPane>
                    </VBox>
                </top>
                <center>
                    <ScrollPane styleClass="tile-container-scroll">
                        <VBox fx:id="transactionsVBox" styleClass="tile-container"/>
                    </ScrollPane>
                </center>
            </BorderPane>

            <VBox fx:id="detailPanel"/>
        </HBox>
    </center>
</BorderPane>
