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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<?import javafx.scene.text.TextFlow?>

<BorderPane maxHeight="470.0" maxWidth="724.0" minHeight="470.0" minWidth="724.0" prefHeight="470.0" prefWidth="724.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.zhaw.gartenverwaltung.TutorialController">
   <bottom>
      <HBox alignment="CENTER" prefHeight="0.0" prefWidth="724.0" BorderPane.alignment="CENTER">
         <children>
            <CheckBox mnemonicParsing="false" text="Don't show again" />
            <Separator prefWidth="50.0" visible="false" HBox.hgrow="ALWAYS" />
            <ButtonBar prefHeight="40.0" prefWidth="200.0">
              <buttons>
                  <Button cancelButton="true" contentDisplay="CENTER" graphicTextGap="5.0" mnemonicParsing="false" onAction="#closeTutorial" styleClass="button-class" text="Close" />
                <Button fx:id="previousPageButton" mnemonicParsing="false" onAction="#viewPreviousPage" styleClass="button-class" text="Previous" />
                  <Button fx:id="nextPageButton" defaultButton="true" mnemonicParsing="false" onAction="#viewNextPage" styleClass="button-class" text="Next" />
              </buttons>
            </ButtonBar>
         </children>
         <padding>
            <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
         </padding>
      </HBox>
   </bottom>
   <center>
      <StackPane fx:id="tourPages" prefHeight="150.0" prefWidth="200.0" BorderPane.alignment="CENTER">
         <children>
            <VBox layoutX="30.0" layoutY="26.0" opacity="0.0" prefHeight="200.0" prefWidth="100.0">
               <children>
                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Adding Crops">
                     <font>
                        <Font size="24.0" />
                     </font>
                  </Text>
                  <Separator prefWidth="200.0">
                     <VBox.margin>
                        <Insets bottom="15.0" top="10.0" />
                     </VBox.margin>
                  </Separator>
                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="In the &quot;My Garden&quot; tab, you can see all of the plants you're planning on growing.">
                     <VBox.margin>
                        <Insets bottom="20.0" />
                     </VBox.margin>
                  </Text>
                  <HBox prefHeight="100.0" prefWidth="200.0">
                     <children>
                        <TextFlow lineSpacing="4.0" prefHeight="90.0" prefWidth="500.0">
                           <children>
                              <Text strokeType="OUTSIDE" strokeWidth="0.0" text="To get started, click on the &quot;Add new Plant&quot; button in the bottom left. This will open a list of all the plants you can grow.&#10;Use the search bar at the top, the filters on the left, or simply browse the list until you've found a plant you want to grow in your garden." wrappingWidth="345.80316162109375" />
                           </children>
                           <HBox.margin>
                              <Insets bottom="20.0" />
                           </HBox.margin>
                        </TextFlow>
                        <Separator prefWidth="200.0" visible="false" HBox.hgrow="ALWAYS" />
                        <ImageView fx:id="imgAddNewPlant" fitHeight="98.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" />
                     </children>
                  </HBox>
                  <HBox prefHeight="100.0" prefWidth="200.0">
                     <children>
                        <TextFlow lineSpacing="4.0" prefHeight="200.0" prefWidth="500.0">
                           <children>
                              <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Once you've found what you're looking for, click the &quot;Select Sow/Harvest Date&quot; button at the bottom of the window.&#10;In the subsequently shown dialog, you can select the date you'd like to sow or harvest the crop. The date selector shows possible dates in green. Confirm your selection with the &quot;Save&quot; button." />
                           </children>
                        </TextFlow>
                        <Separator prefWidth="200.0" visible="false" HBox.hgrow="ALWAYS" />
                        <ImageView fx:id="imgSelectDate" fitHeight="150.0" fitWidth="400.0" pickOnBounds="true" preserveRatio="true" />
                     </children>
                  </HBox>
               </children>
               <opaqueInsets>
                  <Insets />
               </opaqueInsets>
            </VBox>
            <VBox layoutX="30.0" layoutY="30.0" prefHeight="200.0" prefWidth="100.0">
               <children>
                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Managing Your Crops">
                     <font>
                        <Font size="24.0" />
                     </font>
                  </Text>
                  <Separator prefWidth="200.0">
                     <VBox.margin>
                        <Insets bottom="15.0" top="10.0" />
                     </VBox.margin>
                  </Separator>
                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Once you've added a crop to your garden, it will be displayed in the &quot;My Garden&quot; tab.">
                     <VBox.margin>
                        <Insets bottom="20.0" />
                     </VBox.margin>
                  </Text>
                  <HBox prefHeight="100.0" prefWidth="200.0">
                     <children>
                        <TextFlow lineSpacing="4.0" prefHeight="200.0" prefWidth="500.0">
                           <children>
                              <Text strokeType="OUTSIDE" strokeWidth="0.0" text="On the right hand side of the listing, you'll see two buttons.&#10;&#10;Button with the &quot;trash can&quot; icon lets you remove a crop from your garden plan. This will also delete all associated tasks.&#10;&#10;The button on the left will display the details of the crop in a new window." />
                           </children>
                        </TextFlow>
                        <Separator prefWidth="200.0" visible="false" HBox.hgrow="ALWAYS" />
                        <ImageView fitHeight="70.0" fitWidth="100.0" pickOnBounds="true" preserveRatio="true" fx:id="imgDetailDeleteButtons"/>
                     </children></HBox>
                  <HBox layoutX="10.0" layoutY="105.0" prefHeight="100.0" prefWidth="200.0">
                     <children>
                        <TextFlow lineSpacing="4.0" prefHeight="200.0" prefWidth="500.0">
                           <children>
                              <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Here, you can also add your own custom tasks, by clicking the &quot;Add Task&quot; button.&#10;In the subsequently shown dialog, you can enter the corresponding details.&#10;&#10;Note: If you want to make a task recurring, you need to set both an interval (in days) AND an end date, so the task won't repeat for all eternity." />
                           </children>
                        </TextFlow>
                        <Separator prefWidth="200.0" visible="false" HBox.hgrow="ALWAYS" />
                        <ImageView fitHeight="150.0" fitWidth="400.0" pickOnBounds="true" preserveRatio="true" fx:id="imgAddTaskButton"/>
                     </children>
                  </HBox>
               </children>
               <opaqueInsets>
                  <Insets />
               </opaqueInsets>
            </VBox>
            <VBox opacity="0.0" prefHeight="200.0" prefWidth="100.0">
               <children>
                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Managing Your Tasks">
                     <font>
                        <Font size="24.0" />
                     </font>
                  </Text>
                  <Separator prefWidth="200.0">
                     <VBox.margin>
                        <Insets bottom="15.0" top="10.0" />
                     </VBox.margin>
                  </Separator>
                  <Text strokeType="OUTSIDE" strokeWidth="0.0" text="In the &quot;My Schedule&quot; tab, you can see all of the tasks you need to complete for a successful harvest.">
                     <VBox.margin>
                        <Insets bottom="20.0" />
                     </VBox.margin>
                  </Text>
                  <HBox prefHeight="100.0" prefWidth="200.0">
                     <children>
                        <TextFlow lineSpacing="4.0" prefHeight="90.0" prefWidth="500.0">
                           <children>
                              <Text strokeType="OUTSIDE" strokeWidth="0.0" text="You can view the tasks for a specific crop by selecting it from the left sidebar.&#10;To see all tasks again, click the &quot;Clear Filter&quot; button at the bottom." wrappingWidth="345.80316162109375" />
                           </children>
                           <HBox.margin>
                              <Insets bottom="20.0" />
                           </HBox.margin>
                        </TextFlow>
                        <Separator prefWidth="200.0" visible="false" HBox.hgrow="ALWAYS" />
                        <ImageView fx:id="imgTaskList" fitHeight="200.0" fitWidth="400.0" pickOnBounds="true" preserveRatio="true" />
                     </children>
                  </HBox>
               </children>
               <opaqueInsets>
                  <Insets />
               </opaqueInsets>
            </VBox>
         </children>
         <BorderPane.margin>
            <Insets />
         </BorderPane.margin>
         <padding>
            <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
         </padding>
      </StackPane>
   </center>
</BorderPane>
