<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subsonics - Web</title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
    <section class="global">
    <div class="content">
        <div class="navbar">
            <div class="title">
                <img class="title_image" src="/images/logo-svg.png">
                <p class="title_text">Subsonics</p>
            </div>
            <div class="homeselector">
                <div id="search_btn" class="homeselector_div">
                    <span id="search_icon" class="homeselector_icon"><i class="fa fa-search"></i></span>
                    <span class="homeselector_text">Recherche</span>
                </div>
                <div id="settings_btn" class="homeselector_div">
                    <span id='settings_icon' class="homeselector_icon"><i class="fa fa-cog"></i></span>
                    <span class="homeselector_text">Paramètres</span>
                </div>
                <!-- <div id="soundboard_btn" class="homeselector_div">
                    <span id="soundboard_icon" class="homeselector_icon"><i class="fa fa-th"></i></span>
                    <span class="homeselector_text">Soundboard</span>
                </div> -->
            </div>
            <div class="playlist">
                <div class="wintitle">
                    <p>Playlists</p>
                   
                    <i class="fa fa-music"></i>
                </div>
                
                <div class="playlist-container">
                    <div id="playlist-list" class="playlist-list">
                    
                    </div>
                </div>
                <button class="playlist-add-btn" id="playlist-add"><i class="fa fa-plus"></i> Ajouter une playlist</button>
            </div>
            <div class="usercard">
                <div class="usercard_div">
                    <img id="user-img" class="usercard_image" src="/images/default.jpg"></img>
                    <div class="usercard_text">
                        <p id="user-name" class="usercard_text_name">Nom de l'utilisateur</p>
                        <p id="user-id" class="usercard_text_id">ID de l'utilisateur</p>
                    </div>
                </div>
                <a href="/internal/logout"><span class="icon red"><img src="/images/signout.svg"></span></a>
            </div>
        </div>
        <div class="view">
            <div class="view-edit" id="view-edit">
                
            </div>
            <div class="view-other">
                
                <div class="list">
                    <div class="wintitle">
                        <p >Liste de lecture</p>
                        <i class="fa fa-list-ol"></i>
                    </div>
                    <div class="list-options">
                        <div class="list-selector">
                            <p id="list-next" class="selected">À suivre</p>
                            <p id="list-previous" class="">Historique</p>
                        </div>
                        <span id="list-clear" class="list-clear"><i class="fa fa-trash"></i></span>
                    </div>
                    
                    <a href="" target="_blank"></a>
                    <div class="list-container">
                        <div class="list-content" id="list-div">
                           
                            
                        </div>

                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <div class="player">
        <div class="video">
            <div id="video_img" class="video_image"></div>
            <div class="video_title">
                <span id='video_title' class="video_title_title"><p>Titre de la vidéo</p></span>
                <span id="video_artist" class="video_title_channel"><p>Nom de la chaine</p></span>
            </div>
        </div>

        <div class="controller">
            <div class="buttons">
                <span id="shuffle" class="wh"><i class="icon fa fa-shuffle"></i></span>
                <span id="backward" class="wh"><i class="icon fa fa-backward"></i></span>
                <span id="play" class="playicon wh"><i class="fa fa-play icon"></i></span>
                <span id="forward" class="wh"><i class="icon fa fa-forward"></i></span>
                <span id="loop" class="wh"><i class="icon fa fa-sync-alt"></i></span>
            </div>
            <div class="durationBar">
                <span id="time_act" class="time">-:--</span>
                <input id="duration" type="range" value="0" max="100">
                <span id="time_total" class="time">-:--</span>
            </div>
          
        </div>
        <div class="actionbar">
            <div>
                <span id="lyrics" class="wh"><i class="fa fa-microphone-lines icon"></i></span>
                <span id="disconnect" class="wh"><i class="fa fa-phone-slash icon"></i></span>
                <span id="moveout" class="wh"><i class="fa fa-hand icon"></i></span>
            </div>
            <div>
          
                    
                    <span id="volIcon"><i class="fa fa-volume-up"></i></span>
                    <span id="volTxt"></span>
             
                <input id="volume" type="range" value="100" max="100">
            </div>
         
        </div>
    </div>
    </section>
    <!-- Scripts -->


    
    <script src="/socket.io/socket.io.js"></script>
    <script src="/javascript/IO.js"></script>
    <script src="/javascript/basics.js"></script>
    <script src="/javascript/index.js"></script>
    <script src="/javascript/queue.js"></script>
    <script src="/javascript/player.js"></script>
    <script src="/javascript/search.js"></script>
    <script src="/javascript/playlist.js"></script>
    <script src="/javascript/settings.js"></script>
    <script src="/javascript/view.js"></script>
    <script src="/javascript/oobe.js"></script>
  

    <script defer="" src="https://use.fontawesome.com/releases/v6.4.2/js/all.js" crossorigin="anonymous"></script>
</body>
</html>