<?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>

   <!-- دکمه تغییر تم و open playlist -->
   <HBox alignment="CENTER_LEFT" spacing="10">

      <Button fx:id="themeToggleBtn"
              text="Dark"
              onAction="#toggleTheme"/>

      <Region HBox.hgrow="ALWAYS"/>

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

   </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"
             text="No song playing"/>

      <HBox alignment="CENTER" spacing="20">
      <!-- دکمه‌های جلو عقب -->
            <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>
</VBox>
</VBox>