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

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<VBox fx:id="root" spacing="10" xmlns="http://javafx.com/javafx/17.0.12" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sbu.javafx.MusicController">
   <padding>
      <Insets bottom="10" left="10" right="10" top="10" />
   </padding>

   <!-- دکمه تغییر تم -->
   <HBox alignment="CENTER_LEFT" spacing="10">
      <Button fx:id="themeToggleBtn" text=" Dark" onAction="#toggleTheme"
              style="-fx-background-color: #555; -fx-text-fill: white; -fx-background-radius: 10px; -fx-padding: 5 10;" />
      <Region HBox.hgrow="ALWAYS" /> <!-- این فضا رو پر میکنه تا دکمه سمت چپ بمونه -->
   </HBox>

   <Label fx:id="messageLabel"
          textFill="green"
          visible="false"/>

   <!--آهنگ های موجود -->
   <ListView fx:id="musicsListView" VBox.vgrow="ALWAYS"/>

   <!-- آهنگ های پلی لیست-->
   <ListView fx:id="playlistListView"
             visible="false"
             managed="false"
             VBox.vgrow="ALWAYS"/>

   <!-- باکس آهنگ در حال پخش -->
   <VBox alignment="CENTER" spacing="5">

      <!-- اسم آهنگ در حال پخش -->
      <Label fx:id="nowPlayingLabel" style="-fx-font-weight: bold; -fx-font-size: 14px;" text="No song playing" />

      <!-- دکمه‌های جلو عقب -->
      <BorderPane>

      <center>
         <HBox alignment="CENTER" spacing="20">
         <padding>
            <Insets top="0" right="0" bottom="0" left="65"/>
         </padding>

            <!-- دکمه‌های اصلی -->
            <Button fx:id="audioBtn"
                 onAction="#mute"
                 styleClass="circle-button">

            <graphic>
               <ImageView fitWidth="35" fitHeight="35">
                  <Image url="/image/icons8-audio-64.png" />
               </ImageView>
            </graphic>
         </Button>

         <Button fx:id="preveBtn"
                 styleClass="circle-button">

            <graphic>
               <ImageView fitWidth="35" fitHeight="35">
                  <Image url="/image/icons8-skip-to-start-64.png" />
               </ImageView>
            </graphic>
         </Button>


         <Button fx:id="playPauseBtn"
                 onAction="#playPause"
                 styleClass="circle-button">

            <graphic>
               <ImageView fitWidth="35" fitHeight="35">
                  <Image url="/image/pause.png" />
               </ImageView>
            </graphic>
         </Button>


         <Button fx:id="nextBtn"
                 styleClass="circle-button">

            <graphic>
               <ImageView fitWidth="35" fitHeight="35">
                  <Image url="/image/icons8-end-64.png" />
               </ImageView>
            </graphic>
         </Button>

         <Button fx:id="repeat"
                 styleClass="circle-button">

            <graphic>
               <ImageView fitWidth="35" fitHeight="35">
                  <Image url="/image/icons8-synchronize-64.png" />
               </ImageView>
            </graphic>
         </Button>
         </HBox>
      </center>

      <right>

         <Button fx:id="openPlaylistBtn"
                 onAction="#openPlaylistWindow"
                 text="Open Playlist"
                 style="-fx-background-radius: 15px;" />
      </right>
   </BorderPane>

</VBox>
</VBox>