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

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

<VBox fx:id="rootPane"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="sbu.javafx.MusicController"
      spacing="20"
      alignment="TOP_CENTER"
      prefWidth="500"
      prefHeight="700"
      style="-fx-padding: 30; -fx-background-color: #F4F4F4;">

    <Label fx:id="titleLabel" text="JavaFX Music Player"
           style="-fx-font-size: 26px; -fx-font-weight: bold; -fx-text-fill: #333;" />

    <Label fx:id="nowPlayingLabel"
           text="Now Playing: None"
           maxWidth="Infinity"
           alignment="CENTER"
           style="-fx-padding: 15; -fx-background-color: white; -fx-background-radius: 12; -fx-border-color: #DDD; -fx-border-radius: 12; -fx-font-size: 14px;" />

    <HBox spacing="15" alignment="CENTER">
        <Button fx:id="themeBtn" onAction="#handleToggleTheme" prefWidth="60" prefHeight="60" style="-fx-background-radius: 30;">
            <graphic>
                <ImageView fitWidth="28" fitHeight="28" preserveRatio="true">
                    <image>
                        <Image url="@images/theme.png"/>
                    </image>
                </ImageView>
            </graphic>
        </Button>

        <Button fx:id="playlistBtn" onAction="#handleViewPlaylist" prefWidth="60" prefHeight="60" style="-fx-background-radius: 30;">
            <graphic>
                <ImageView fitWidth="28" fitHeight="28" preserveRatio="true">
                    <image>
                        <Image url="@images/playlist.png"/>
                    </image>
                </ImageView>
            </graphic>
        </Button>
    </HBox>

    <Separator />

    <VBox spacing="15" VBox.vgrow="ALWAYS">

        <HBox fx:id="songCard1" spacing="15" alignment="CENTER_LEFT"
              style="-fx-padding: 15; -fx-background-color: white; -fx-background-radius: 10; -fx-border-color: #EEE; -fx-border-radius: 10;">
            <VBox spacing="5" HBox.hgrow="ALWAYS">
                <Label text="Careless Whisper" style="-fx-font-weight: bold; -fx-font-size: 16px;" />
                <Label text="George Michael" style="-fx-text-fill: #777;" />
            </VBox>
            <Button onAction="#handlePlay1" prefWidth="45" prefHeight="45">
                <graphic>
                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/play.png"/></image></ImageView>
                </graphic>
            </Button>
            <Button onAction="#handleAdd1" prefWidth="45" prefHeight="45">
                <graphic>
                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/add.png"/></image></ImageView>
                </graphic>
            </Button>
        </HBox>

        <HBox fx:id="songCard2" spacing="15" alignment="CENTER_LEFT"
              style="-fx-padding: 15; -fx-background-color: white; -fx-background-radius: 10; -fx-border-color: #EEE; -fx-border-radius: 10;">
            <VBox spacing="5" HBox.hgrow="ALWAYS">
                <Label text="Adore You" style="-fx-font-weight: bold; -fx-font-size: 16px;" />
                <Label text="Harry Styles" style="-fx-text-fill: #777;" />
            </VBox>
            <Button onAction="#handlePlay2" prefWidth="45" prefHeight="45">
                <graphic>
                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/play.png"/></image></ImageView>
                </graphic>
            </Button>
            <Button onAction="#handleAdd2" prefWidth="45" prefHeight="45">
                <graphic>
                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/add.png"/></image></ImageView>
                </graphic>
            </Button>
        </HBox>

        <HBox fx:id="songCard3" spacing="15" alignment="CENTER_LEFT"
              style="-fx-padding: 15; -fx-background-color: white; -fx-background-radius: 10; -fx-border-color: #EEE; -fx-border-radius: 10;">
            <VBox spacing="5" HBox.hgrow="ALWAYS">
                <Label text="Wildflower" style="-fx-font-weight: bold; -fx-font-size: 16px;" />
                <Label text="Billie Eilish" style="-fx-text-fill: #777;" />
            </VBox>
            <Button onAction="#handlePlay3" prefWidth="45" prefHeight="45">
                <graphic>
                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/play.png"/></image></ImageView>
                </graphic>
            </Button>
            <Button onAction="#handleAdd3" prefWidth="45" prefHeight="45">
                <graphic>
                    <ImageView fitWidth="20" fitHeight="20"><image><Image url="@images/add.png"/></image></ImageView>
                </graphic>
            </Button>
        </HBox>

    </VBox>

    <Label text="SBU JavaFX Project - 2024" style="-fx-text-fill: #AAA; -fx-font-size: 10px;" />

</VBox>