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

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

<!--take care about fx:ids-->

<VBox spacing="15" xmlns="http://javafx.com/javafx/20" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sbu.javafx.MusicController" style="-fx-background-color: #f5f5f5;" alignment="CENTER">

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

    <!-- عنوان -->
    <Label text="Music Player" style="-fx-font-size: 24px; -fx-font-weight: bold; -fx-text-fill: #2c3e50;"/>

    <!-- جدول آهنگ‌ها -->
    <VBox spacing="5" style="-fx-background-color: white; -fx-border-color: #dcdde1; -fx-border-width: 1;">
        <padding>
            <Insets top="10" right="10" bottom="10" left="10"/>
        </padding>

        <!-- ردیف عنوان -->
        <HBox spacing="50" style="-fx-padding: 10 0 10 0; -fx-border-width: 0 0 1 0; -fx-border-color: #bdc3c7;" alignment="CENTER">
            <Label text="Song Title" minWidth="150" style="-fx-font-weight: bold;"/>
            <Label text="Artist Name" minWidth="150" style="-fx-font-weight: bold;"/>
            <Label text="Duration" minWidth="60" style="-fx-font-weight: bold;"/>
            <Label text="Add to Playlist" minWidth="120" style="-fx-font-weight: bold;"/>
            <Label text="Play" minWidth="50" style="-fx-font-weight: bold;"/>
        </HBox>

        <!-- آهنگ 1 -->
        <HBox spacing="50" style="-fx-padding: 10 0 10 0; -fx-border-width: 0 0 1 0; -fx-border-color: #bdc3c7;" alignment="CENTER">
            <Label text="Jana" minWidth="150"/>
            <Label text="SaM" minWidth="150"/>
            <Label text="04:16" minWidth="60"/>
            <Button text="Add to Playlist" minWidth="120" onAction="#addToPlaylist" style="-fx-background-color: #27ae60; -fx-text-fill: white; -fx-background-radius: 3;"/>
            <Button text="Play" minWidth="50" onAction="#handlePlayAction" style="-fx-background-color: #3498db; -fx-text-fill: white; -fx-background-radius: 3;"/>
        </HBox>

        <!-- آهنگ 2 -->
        <HBox spacing="50" style="-fx-padding: 10 0 10 0; -fx-border-width: 0 0 1 0; -fx-border-color: #bdc3c7;" alignment="CENTER">
            <Label text="we never dated" minWidth="150"/>
            <Label text="sombr" minWidth="150"/>
            <Label text="03:16" minWidth="60"/>
            <Button text="Add to Playlist" onAction="#addToPlaylist" minWidth="120" style="-fx-background-color: #27ae60; -fx-text-fill: white; -fx-background-radius: 3;"/>
            <Button text="Play" minWidth="50" onAction="#handlePlayAction" style="-fx-background-color: #3498db; -fx-text-fill: white; -fx-background-radius: 3;"/>
        </HBox>

        <!-- آهنگ 3 -->
        <HBox spacing="50" style="-fx-padding: 10 0 10 0;" alignment="CENTER">
            <Label text="Jadoo" minWidth="150"/>
            <Label text="Pidar" minWidth="150"/>
            <Label text="03:30" minWidth="60"/>
            <Button text="Add to Playlist" minWidth="120" onAction="#addToPlaylist" style="-fx-background-color: #27ae60; -fx-text-fill: white; -fx-background-radius: 3;"/>
            <Button text="Play" minWidth="50" onAction="#handlePlayAction" style="-fx-background-color: #3498db; -fx-text-fill: white; -fx-background-radius: 3;"/>
        </HBox>
    </VBox>

    <!-- بخش پایین: Now Playing و Open Playlist -->
    <HBox alignment="CENTER_LEFT" style="-fx-background-color: #ecf0f1; -fx-padding: 15; -fx-background-radius: 8;">
        <HBox spacing="10">
            <Label text="🎵 Now Playing:" style="-fx-font-weight: bold;"/>
            <Label fx:id="nowPlayingLabel" text="-" style="-fx-text-fill: #3498db;"/>
        </HBox>
        <Region HBox.hgrow="ALWAYS"/>
        <Button text="Open Playlist" onAction="#openPlaylistWindow" style="-fx-background-color: #3498db; -fx-text-fill: white; -fx-font-weight: bold; -fx-padding: 8 20; -fx-background-radius: 5;"/>
    </HBox>

    <!--learn and use view lsit-->

</VBox>