<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>

<StackPane xmlns:fx="http://javafx.com/fxml"
           fx:controller="sbu.javafx.MusicController"
           style="-fx-background-color: #1e1e2e;"
           prefWidth="400" prefHeight="650">

    <VBox style="-fx-background-image: url('frozen_bg.jpg');
                  -fx-background-size: cover;
                  -fx-background-position: center;"/>

    <VBox alignment="CENTER" spacing="25" style="-fx-padding: 30;">

        <Label fx:id="statusLabel" text="آماده پخش..."
               wrapText="true"
               maxWidth="350"
               style="-fx-text-fill: white;
                      -fx-font-size: 16px;
                      -fx-font-weight: bold;
                      -fx-background-color: rgba(0,0,0,0.5);
                      -fx-padding: 10;
                      -fx-background-radius: 15;
                      -fx-alignment: center;
                      -fx-text-alignment: center;"/>

        <VBox spacing="15" alignment="CENTER"
              style="-fx-background-color: rgba(255, 255, 255, 0.75);
                     -fx-padding: 20;
                     -fx-background-radius: 25;
                     -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.3), 10, 0, 0, 0);">

            <HBox spacing="10" alignment="CENTER_LEFT">
                <Label text="❄️ آهنگ اول" style="-fx-text-fill: #004d40; -fx-font-weight: bold; -fx-font-size: 14px;"/>
                <Region HBox.hgrow="ALWAYS"/>
                <Button text="Play" userData="آهنگ اول" onAction="#handlePlayAction"/>
                <Button text="Add" userData="آهنگ اول" onAction="#handleAddAction"/>
            </HBox>

            <HBox spacing="10" alignment="CENTER_LEFT">
                <Label text="❄️ آهنگ دوم" style="-fx-text-fill: #004d40; -fx-font-weight: bold; -fx-font-size: 14px;"/>
                <Region HBox.hgrow="ALWAYS"/>
                <Button text="Play" userData="آهنگ دوم" onAction="#handlePlayAction"/>
                <Button text="Add" userData="آهنگ دوم" onAction="#handleAddAction"/>
            </HBox>

            <HBox spacing="10" alignment="CENTER_LEFT">
                <Label text="❄️ آهنگ سوم" style="-fx-text-fill: #004d40; -fx-font-weight: bold; -fx-font-size: 14px;"/>
                <Region HBox.hgrow="ALWAYS"/>
                <Button text="Play" userData="آهنگ سوم" onAction="#handlePlayAction"/>
                <Button text="Add" userData="آهنگ سوم" onAction="#handleAddAction"/>
            </HBox>
        </VBox>

        <Button text="مشاهده لیست پخش" onAction="#openPlaylistWindow"
                style="-fx-background-color: linear-gradient(to right, #0288d1, #ec407a);
                       -fx-text-fill: white; -fx-font-size: 15px; -fx-font-weight: bold;
                       -fx-padding: 12 35; -fx-background-radius: 25;
                       -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.4), 5, 0, 0, 0); -fx-cursor: hand;"/>
    </VBox>
</StackPane>