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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ToggleButton?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>

<VBox fx:id="parent" alignment="CENTER" prefHeight="400.0" prefWidth="600.0" spacing="20.0" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.hdm_stuttgart.battlearena.Controller.SkinSelectionController">
   <children>
      <Label text="Player 1" />
      <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="40.0">
         <children>
            <ToggleButton contentDisplay="TOP" mnemonicParsing="false" styleClass="skinSelection" text="High Born">
               <graphic>
                  <ImageView fx:id="playerOne1" fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../textures/player/high_res/highBorn.png" />
                     </image>
                  </ImageView>
               </graphic>
               <toggleGroup>
                  <ToggleGroup fx:id="playerOne" />
               </toggleGroup>
            </ToggleButton>
            <ToggleButton contentDisplay="TOP" mnemonicParsing="false" styleClass="skinSelection" text="Human" toggleGroup="$playerOne">
               <graphic>
                  <ImageView fx:id="playerOne2" fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../textures/player/high_res/human.png" />
                     </image>
                  </ImageView>
               </graphic>
            </ToggleButton>
            <ToggleButton contentDisplay="TOP" mnemonicParsing="false" styleClass="skinSelection" text="Sentinel" toggleGroup="$playerOne">
               <graphic>
                  <ImageView fx:id="playerOne3" fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../textures/player/high_res/sentinel.png" />
                     </image>
                  </ImageView>
               </graphic>
            </ToggleButton>
         </children>
      </HBox>
      <Label text="Player 2" />
      <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="40.0">
         <children>
            <ToggleButton contentDisplay="TOP" mnemonicParsing="false" styleClass="skinSelection" text="High Born">
               <graphic>
                  <ImageView fx:id="playerTwo1" fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../textures/player/high_res/highBorn.png" />
                     </image>
                  </ImageView>
               </graphic>
               <toggleGroup>
                  <ToggleGroup fx:id="playerTwo" />
               </toggleGroup>
            </ToggleButton>
            <ToggleButton contentDisplay="TOP" mnemonicParsing="false" styleClass="skinSelection" text="Human" toggleGroup="$playerTwo">
               <graphic>
                  <ImageView fx:id="playerTwo2" fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../textures/player/high_res/human.png" />
                     </image>
                  </ImageView>
               </graphic>
            </ToggleButton>
            <ToggleButton contentDisplay="TOP" mnemonicParsing="false" styleClass="skinSelection" text="Sentinel" toggleGroup="$playerTwo">
               <graphic>
                  <ImageView fx:id="playerTwo3" fitHeight="700.0" fitWidth="700.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../textures/player/high_res/sentinel.png" />
                     </image>
                  </ImageView>
               </graphic>
            </ToggleButton>
         </children>
      </HBox>
      <Button mnemonicParsing="false" onAction="#gameScene" text="Next" />
      <Button mnemonicParsing="false" onAction="#backButton" text="Back" />
   </children>
</VBox>