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

<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>

<VBox alignment="CENTER" spacing="10" xmlns:fx="http://javafx.com/fxml" fx:controller="sbu.javafx.MusicController">
    <padding>
        <Insets topRightBottomLeft="10"/>
    </padding>

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

    <HBox alignment="CENTER" spacing="25" HBox.hgrow="ALWAYS" styleClass="main-box">

        <VBox prefWidth="125" styleClass="column">
            <Label text="Song Title" styleClass="title"/>
            <Label text="Sing" styleClass="info"/>
            <Label text="Akhare Ghesse" styleClass="info"/>
            <Label text="Married Life" styleClass="info"/>
        </VBox>

        <VBox prefWidth="150" styleClass="column">
            <Label text="Artist Name" styleClass="title"/>
            <Label text="Travis" styleClass="info"/>
            <Label text="Dang Show" styleClass="info"/>
            <Label text="Michael Giacchino" styleClass="info"/>
        </VBox>

        <VBox prefWidth="75" styleClass="column">
            <Label text="Duration" styleClass="title"/>
            <Label text="3:48" styleClass="info"/>
            <Label text="3:18" styleClass="info"/>
            <Label text="4:10" styleClass="info"/>
        </VBox>

        <VBox prefWidth="75" styleClass="column">
            <Label text="Play" styleClass="title"/>
            <Button text="Play" onAction="#handlePlayAction" fx:id="song01" styleClass="play-btn"/>
            <Button text="Play" onAction="#handlePlayAction" fx:id="song02" styleClass="play-btn"/>
            <Button text="Play" onAction="#handlePlayAction" fx:id="song03" styleClass="play-btn"/>
        </VBox>

        <VBox prefWidth="125" styleClass="column">
            <Label text="Add to Playlist" styleClass="title"/>
            <Button text="Add to Playlist" fx:id="song01P" styleClass="add-btn"/>
            <Button text="Add to Playlist" fx:id="song02P" styleClass="add-btn"/>
            <Button text="Add to Playlist" fx:id="song03P" styleClass="add-btn"/>
        </VBox>

    </HBox>

    <HBox spacing="15" alignment="CENTER" HBox.hgrow="ALWAYS" styleClass="play-box">
        <Label text="Now Playing:" styleClass="title0"/>
        <Label text="" fx:id="nowPlayingLabel" styleClass="nowPlaying" HBox.hgrow="ALWAYS" maxWidth="Infinity"/>
        <Button text="Open Playlist" onAction="#openPlaylistWindow" styleClass="openP-btn"/>
    </HBox>

</VBox>
