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

<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.Button?>
<VBox xmlns="http://javafx.com/fxml" xmlns:fx ="http://javafx.com/fxml" fx:controller="sbu.javafx.MusicController" alignment="TOP_CENTER" spacing="10" style="-fx-padding: 60">

    <Label text="Music Player" style="-fx-font-size: 40px; -fx-font-weight: bold;"/>
    <Separator/>

    <!--songs-->
    <VBox spacing="5" alignment="CENTER" style="-fx-padding: 0 0 5 0;">
        <HBox spacing="20" alignment="CENTER">
            <Label text="Song Title" style="-fx-font-weight: bold; -fx-pref-width: 290; -fx-font-size: 20px"/>
            <Label text="Artist Name" style="-fx-font-weight: bold; -fx-pref-width: 150; -fx-font-size: 20px;"/>
            <Label text="Duration" style="-fx-font-weight: bold; -fx-pref-width: 90; -fx-font-size: 20px"/>
            <Label alignment="CENTER" text="Add to Playlist" style="-fx-font-weight: bold; -fx-pref-width: 150; -fx-font-size: 20px"/>
            <Label alignment="CENTER" text="Play" style="-fx-font-weight: bold; -fx-pref-width: 120; -fx-font-size: 20px"/>
        </HBox>

        <Separator/>

        <!--song1-->
        <HBox spacing="20" alignment="CENTER">
            <Label text="The Comfort of a Laugh Track" style="-fx-pref-width: 290; -fx-font-size: 20px;"/>
            <Label text="Roar" style="-fx-pref-width: 150; -fx-font-size: 20px;"/>
            <Label text="04:52" style="-fx-pref-width: 90; -fx-font-size: 20px;"/>
            <Button fx:id="add1" text="Add to Playlist" style="-fx-pref-width: 150; -fx-font-size: 19px;" onAction="#addToPlaylist"/>
            <Button fx:id="playBtn1" text="Play" style="-fx-pref-width: 120; -fx-font-size: 20px;" onAction="#handlePlayAction"/>
        </HBox>

        <!--song2-->
        <HBox spacing="20" alignment="CENTER">
            <Label text="Perfect Day" style="-fx-pref-width: 290; -fx-font-size: 20px;"/>
            <Label text="Lou Reed" style="-fx-pref-width: 150; -fx-font-size: 20px;"/>
            <Label text="03:44" style="-fx-pref-width: 90; -fx-font-size: 20px;"/>
            <Button fx:id="add2" text="Add to Playlist" style="-fx-pref-width: 150; -fx-font-size: 19px;" onAction="#addToPlaylist"/>
            <Button fx:id="playBtn2" text="Play" style="-fx-pref-width: 120; -fx-font-size: 20px;" onAction="#handlePlayAction"/>
        </HBox>

        <!--song3-->
        <HBox spacing="20" alignment="CENTER">
            <Label text="Wish You Were Here" style="-fx-pref-width: 290; -fx-font-size: 20px;"/>
            <Label text="Pink Floyd" style="-fx-pref-width: 150; -fx-font-size: 20px;"/>
            <Label text="05:34" style="-fx-pref-width: 90; -fx-font-size: 20px;"/>
            <Button fx:id="add3" text="Add to Playlist" style="-fx-pref-width: 150; -fx-font-size: 19px;" onAction="#addToPlaylist"/>
            <Button fx:id="playBtn3" text="Play" style="-fx-pref-width: 120; -fx-font-size: 20px;" onAction="#handlePlayAction"/>
        </HBox>

        <!--song4-->
        <HBox spacing="20" alignment="CENTER">
            <Label text="No Surprises" style="-fx-pref-width: 290; -fx-font-size: 20px;"/>
            <Label text="Radiohead" style="-fx-pref-width: 150; -fx-font-size: 20px;"/>
            <Label text="03:49" style="-fx-pref-width: 90; -fx-font-size: 20px;"/>
            <Button fx:id="add4" text="Add to Playlist" style="-fx-pref-width: 150; -fx-font-size: 19px;" onAction="#addToPlaylist"/>
            <Button fx:id="playBtn4" text="Play" style="-fx-pref-width: 120; -fx-font-size: 20px;" onAction="#handlePlayAction"/>
        </HBox>

    </VBox>

    <Separator/>
    <HBox style="-fx-border-color: lightBlue; -fx-border-width: 5; -fx-padding: 10; -fx-pref-width: 400;" spacing="10" alignment="CENTER_LEFT">
        <HBox>
            <Label text="Now Playing: " style="-fx-font-weight: bold; -fx-font-size: 20px;"/>
            <Label fx:id="nowPlayingSong" text="-" style="-fx-font-weight: bold; -fx-font-size: 20px;"/>
        </HBox>

        <HBox alignment="CENTER_RIGHT" HBox.hgrow="ALWAYS">
            <Button text="Open Playlist" style="-fx-pref-width: 120; -fx-font-size: 15px;" onAction="#openPlaylistWindow"/>
        </HBox>
    </HBox>


</VBox>
