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

<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.ListView?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.HBox?>
<VBox xmlns="http://javafx.com/javafx"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="sbu.javafx.AppController"
      alignment="CENTER" spacing="20">

    <!-- TODO: Add your code here! -->

    <padding>
        <Insets top="20" right="20" bottom="20" left="10"/>
    </padding>

    <HBox alignment="CENTER" spacing="150" prefHeight="30">
        <Button fx:id="themeToggle" onAction="#toggleTheme" text="☽" prefHeight="20" prefWidth="70" styleClass="top-btn" style="-fx-font-size: 20px;"/>
        <Label text="Music Player" styleClass="title" prefWidth="200" alignment="CENTER"/>
        <Button fx:id="playlistOrTracks" onAction="#openPlaylistWindow" text="Playlist"
                styleClass="top-btn"
                style="-fx-font-size: 14px;"
                prefWidth="100" prefHeight="20"/>
    </HBox>

    <ScrollPane fitToWidth="true" prefHeight="500" styleClass="scroll-pane">
        <VBox fx:id="tracksContainer" spacing="5" alignment="CENTER" styleClass="tracks-vbox"/>
    </ScrollPane>

    <HBox alignment="CENTER" prefWidth="650" prefHeight="30" spacing="20">
        <padding>
            <Insets top="20" right="20" bottom="20" left="20"/>
        </padding>

        <Label fx:id="playingTrackName" prefWidth="250" styleClass="playing-track" style="-fx-font-weight: bold; -fx-font-size: 23"/>

        <Label fx:id="playingTrackArtistName" prefWidth="250" styleClass="playing-track" style="-fx-font-size: 19"/>

        <Label fx:id="playingTrackDuration" prefWidth="50" styleClass="playing-track" style="-fx-font-size: 19"/>
    </HBox>

</VBox>
