const cgu = `

<p>En utilisant ce site, vous consentez à l'utilisation de vos données fournis par Discord (c) afin d'assurer le bon fonctionnement de la plateforme. Vous avez la possibilité de demander la suppression de vos données à tout moment en contactant Raphix (raphixscrap). Tout acte intentionnel de dégradation du bot entraînera un bannissement du site.</p>
<br>
<p>Ce bot est destiné à un usage privé exclusivement et n'est pas conçu pour être utilisé par le grand public.</p>
<br>
<p>Toutes les musiques disponibles sur ce site sont hébergées sur les plateformes suivantes : Youtube, Soundcloud, Vimeo.</p>
<br>
<p>En utilisant Subsonics, vous bénéficiez du droit d'accès au service et de l'écoute du contenu. Cependant, veuillez noter que Raphix n'est pas tenu de fournir la provenance ni l'autorisation d'exploitation des musiques par les ayants droits. Il vous incombe donc d'obtenir les autorisations nécessaires des ayants droits pour écouter le contenu.</p>
<br>
<p>En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus illégaux, violents, haineux, discriminatoires, ou à caractère sexuel.</p>
<br>
<p>En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus à caractère politique, religieux, ou incitant à la haine.</p>
<br>
<p>En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus à caractère publicitaire ou pornographique.</p>
`


get("OOBE_CHECK").then((res) => {
    if(res) {
        loadOOBE()
    } 
})

function loadOOBE() {
    const modal = new ModalComponent({"title": "<div class='oobe-title gunship'><img class='oobe-logo' src='/images/logo-white.svg'> Bienvenue sur Subsonics WEB </div>" , "width": "50%", "closable": false})
    modal.setContent(`
        <div class="oobe-content">
            <h3>Bienvenue sur Subsonics Web</h3>
            <p>Subsonics Web est un outil pour gérer le bot Discord Subsonics.</p>
            <p>Vous pouvez créer des playlists, jouer de la musique, importer des playlists depuis YouTube, et bien plus encore.</p>
            <p>Avant de commencer à utiliser Subsonics Web, vous devez accepter les conditions d'utilisation.</p>
            <br>
            <div class="oobe-cgu">
                <h3>Conditions d'utilisation</h3>
                <p>En utilisant Subsonics Web, vous acceptez de respecter les conditions d'utilisation suivantes :</p>
                ${cgu}
            </div>
            <br>
            <div class="oobe-accept">
                <button class="btn btn-primary" id='accept-oobe'>Accepter</button>
            </div>
        </div>

    `)
    modal.show()

    document.getElementById("accept-oobe").addEventListener("click", () => {
        modal.hide()
        oobeStep2()
    })


}

function oobeStep2() {
    const modal = new ModalComponent({"title": "<div class='oobe-title gunship'><img class='oobe-logo' src='/images/logo-white.svg'> Bienvenue sur Subsonics WEB </div>" , "width": "70%", "closable": false})
    modal.setContent(`
        <div class="oobe-content">
            <h3>Apprenons à utiliser Subsonics Web (1/4) - Player</h3>
            <p>Le player est l'élément central de Subsonics Web. C'est ici que vous pourrez contrôler la musique que vous écoutez.</p>
            <br>
            <div class="player">
            <div class="video">
                <div class="video_image"></div>
                <div class="video_title">
                    <span class="video_title_title"><p>Titre de la vidéo</p></span>
                    <span class="video_title_channel"><p>Nom de la chaine</p></span>
                </div>
            </div>
    
            <div class="controller">
                <div class="buttons">
                    <span  class="wh"><i class="icon fa fa-shuffle"></i></span>
                    <span  class="wh"><i class="icon fa fa-backward"></i></span>
                    <span  class="playicon wh"><i class="fa fa-play icon"></i></span>
                    <span  class="wh"><i class="icon fa fa-forward"></i></span>
                    <span  class="wh"><i class="icon fa fa-sync-alt"></i></span>
                </div>
                <div class="durationBar">
                    <span  class="time">-:--</span>
                    <input  type="range" value="0" max="100">
                    <span  class="time">-:--</span>
                </div>
              
            </div>
            <div class="actionbar">
                <div>
                    <span  class="wh"><i class="fa fa-microphone-lines icon"></i></span>
                    <span  class="wh"><i class="fa fa-phone-slash icon"></i></span>
                    <span  class="wh"><i class="fa fa-hand icon"></i></span>
                </div>
                <div>
              
                        
                        <span><i class="fa fa-volume-up"></i></span>
                        <span>100%</span>
                 
                    <input class='volume-oobe' type="range" value="100" max="100">
                </div>
             
            </div>
        </div>
            <br>

            <div class='oobe-line'>
                <span class="wh"><i class="fa fa-play"></i></span>
                <p>Mettre en pause ou reprendre la lecture de la musique.</p>
            </div>
            <div class='oobe-line'>
                <span class="wh"><i class="fa fa-backward"></i></span>
                <p>Revenir au début de la musique actuelle.</p>
            </div>
            <div class='oobe-line'>
                <span class="wh"><i class="fa fa-forward"></i></span>
                <p>Passer à la musique suivante.</p>
            </div>
            <div class='oobe-line'>
                <span class="wh"><i class="fa fa-sync-alt"></i></span>
                <p>Activer ou désactiver la répétition de la musique actuelle.</p>
            </div>
            <div class='oobe-line'>
                <span class="wh"><i class="fa fa-shuffle"></i></span>
                <p>Activer ou désactiver la lecture aléatoire des musiques.</p>
            </div>
            <div class='oobe-line'>
                <span class="wh"><i class="fa fa-microphone-lines"></i></span>
                <p>Afficher les paroles - Ctrl + Click pour rechercher n'importe quelles paroles.</p>
            </div>
            <div class='oobe-line'>
                <span class="wh"><i class="fa fa-phone-slash"></i></span>
                <p>Déconnecter le bot de votre salon vocal.</p>
            </div>
            <div class='oobe-line'>
                <span class="wh"><i class="fa fa-hand"></i></span>
                <p>Déplacer le bot dans votre salon vocal.</p>
            </div>
            <div class='oobe-line'>
                <span class="wh"><i class="fa fa-volume-up"></i></span>
                <p>Régler le volume de la musique.</p>
            </div>
            <div class='oobe-line'>
                <input disabled class='volume-oobe' type="range" value="100" max="100">
                <p>Régler la position de la musique.</p>
            </div>


            <br>

            <div class="oobe-accept">
                <button class="btn btn-primary" id='continue-oobe'>Continuer</button>
            </div>

        </div>

    `)

    modal.show()

    document.getElementById("continue-oobe").addEventListener("click", () => {
        modal.hide()
        oobeStep3()
    })
}

function oobeStep3() {
    const modal = new ModalComponent({"title": "<div class='oobe-title gunship'><img class='oobe-logo' src='/images/logo-white.svg'> Bienvenue sur Subsonics WEB </div>" , "width": "70%", "closable": false})
    modal.setContent(`
        <div class="oobe-content">
            <h3>Apprenons à utiliser Subsonics Web (2/4) - Liste de lecture</h3>
            <p>La liste de lecture est l'endroit où vous pouvez gérer les musiques que vous souhaitez écouter.</p>
            <br>
            <div class="oobe-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 class="selected">À suivre</p>
                            <p class="">Historique</p>
                        </div>
                        <span class="list-clear"><i class="fa fa-trash"></i></span>
                    </div>
                    
                    <a href="" target="_blank"></a>
                 
                    <div class="oobe-list-content">
                        <div class="list-video">
                            <div class="list-video-div">
                                <div class="list-video_image"><p class='oobe-list-time-code'>-:--</p></div>
                                <div class="list-video_title">
                                    <span class="list-video_title_title"><p>Titre de la vidéo</p></span>
                                    <span class="list-video_title_channel"><p>Nom de la chaine</p></span>
                                </div>
                            </div>
                            
                            <span class="oobe-list-video-elipsis"><i class="fa-solid fa-ellipsis-vertical"></i></span>
                        </div>
                        
                        <div class="list-video">
                            <div class="list-video-div">
                                <div class="list-video_image"><p class='oobe-list-time-code'>-:--</p></div>
                                <div class="list-video_title">
                                    <span class="list-video_title_title"><p>Titre de la vidéo</p></span>
                                    <span class="list-video_title_channel"><p>Nom de la chaine</p></span>
                                </div>
                            </div>
                            
                            <span class="oobe-list-video-elipsis"><i class="fa-solid fa-ellipsis-vertical"></i></span>
                        </div>

                        </div>
                    </div>
                     <br>

                     <div class='oobe-line'>
                     <div class="list-selector">
                     <p class="selected">À suivre</p>
                     <p class="">Historique</p>
                     </div>
                        <p>Passe entre la liste de lecture et l'historique.</p>

                    </div>
                    <br>
                    <div class='oobe-line'>
                        <div style='width: unset;' class="list-video-div">
                        <div class="list-video_image"><p class='oobe-list-time-code'>-:--</p></div>
                        </div>
                        <p>Déplacer des titres dans la liste de lecture en glissant et en déposant</p>
                    </div>
                    <br>
                    <div class='oobe-line'>
                        <span class="oobe-wh"><i class="fa fa-trash"></i></span>
                        <p>Efface la liste de lecture</p>
                    </div>
                    <div class='oobe-line'>
                        <span class="oobe-wh"><i class="fa-solid fa-ellipsis-vertical"></i></span>
                        <p>Affiche les options de la musique. - <span class='oobe-ctrl'>Ctrl + Click</span> Permet de supprimer la musique de la liste de lecture.</p>
                    </div>
                   

                     <br>

            <div class="oobe-accept">
                <button class="btn btn-primary" id='continue-oobe'>Continuer</button>
            </div>

        </div>

    `)

    modal.show()

    document.getElementById("continue-oobe").addEventListener("click", () => {
        modal.hide()
        oobeStep4()
 
    })


}

function oobeStep4() {
    const modal = new ModalComponent({"title": "<div class='oobe-title gunship'><img class='oobe-logo' src='/images/logo-white.svg'> Bienvenue sur Subsonics WEB </div>" , "width": "70%", "closable": false})
    modal.setContent(`
        <div class="oobe-content">
            <h3>Apprenons à utiliser Subsonics Web (3/4) - Playlist</h3>
            <p>Les playlists sont un moyen pratique de regrouper vos musiques préférées. Elles peuvent provenir de Youtube, peuvent être privé comme partagé.</p>
            <br>
            <div class="oobe-playlist">
            <div style='margin-bottom: 5px;' class="wintitle">
                <p>Playlists</p>
                <button><i class="fa fa-plus"></i> Ajouter une playlist</button>
                <i class="fa fa-music"></i>
            </div>
            
                
               
                <div class="playlist-item">
                    <div class="playlist-item-tile">
                        <i class="fa fa-music"></i>
                    </div>
                    <p>Playlist Privé</p>
                </div>
            
                <div class="playlist-item">
                    <div class="playlist-item-tile">
                        <i class="fab fa-youtube"></i>
                    </div>
                    <p>Playlist importé depuis Youtube</p>
                </div>
            
           
                <div class="playlist-item">
                    <div class="playlist-item-tile">
                        <i class="fa fa-share-alt"></i>
                    </div>
                    <p>Playlist Partagé</p>
                </div>

            </div>
            <br>

            <div class="oobe-accept">
                <button class="btn btn-primary" id='continue-oobe'>Continuer</button>
            </div>
            
        `)

    modal.show()

    document.getElementById("continue-oobe").addEventListener("click", () => {
        modal.hide()
        oobeStep4b()
 
    })

}

function oobeStep4b() {
    const modal = new ModalComponent({"title": "<div class='oobe-title gunship'><img class='oobe-logo' src='/images/logo-white.svg'> Bienvenue sur Subsonics WEB </div>" , "width": "70%", "closable": false})
    modal.setContent(`
        <div class="oobe-content">
            <h3>Apprenons à utiliser Subsonics Web (3/4) - Playlist</h3>
            <p>Les playlists sont un moyen pratique de regrouper vos musiques préférées. Elles peuvent provenir de Youtube, peuvent être privé comme partagé.</p>
            <br>
            <div class="oobe-playlist-div">
            <div style='padding-bottom: 15px;' class='search-playlist'>
            <div class='search-playlist-info'>
                <div class='playlist-item-tile'>
                   <i class='fa fa-music'></i>
                </div>
                <div class='search-playlist-div'>
        
                    <p class='search-playlist-title'>Titre de la playlist <span><i class='search-playlist-rename fa fa-pen'></i></span></p>
                    <div>
                    <p class='search-playlist-desc'>-- titres </p>
                    </div>
                </div>
            </div>
            <div class='search-playlist-actions'>
                <span  class='wh'><i class='fa fa-add'></i></span>
                <span class='wh'><i class='fa fa-play'></i></span>
                <span  class='wh'><i class='fa fa-paper-plane'></i></span>
                <span e' class='wh'><i class='fa fa-trash'></i></span>
            </div>
           </div>
            
        

            <hr style='width: 100%;'>

            <div style='padding-bottom: 15px;' class='search-playlist'>
            <div class='search-playlist-info'>
                <div class='oobe-image'>
                 
                </div>
                <div class='search-playlist-div'>
        
                    <p  class='search-playlist-title'>Titre d'une playlist Youtube <span id='pp-rename'><i class='search-playlist-rename fa fa-pen'></i></span></p>
                    <div>
                    <p class='search-playlist-desc'>-- titres - --- vues </p>
                    <p class='search-playlist-desc'> Description de la playlist</p>
                    </div>
                    <div class='search-playlist-author'>
                    <img  class='search-playlist-author-img' src='https://cdn.discordapp.com/embed/avatars/0.png'>
                    <p class='search-playlist-author-name'>Nom de l'auteur de la playlist</p>
                    </div>
            </div>
           
           </div>
           <div class='search-playlist-actions'>
                <span  class='wh'><i class='fa fa-add'></i></span>
                <span  class='wh'><i class='fa fa-play'></i></span>
                <span  class='wh'><i class='fa fa-paper-plane'></i></span>
                <span  class='wh'><i class='fa fa-trash'></i></span>
            </div>
            </div>

            </div>

            <br>


            <div class='oobe-line'>
            <div class='search-playlist-author'>
            <img  class='search-playlist-author-img' src='https://cdn.discordapp.com/embed/avatars/0.png'>
            <p class='search-playlist-author-name'>Nom de l'auteur de la playlist</p>
            </div>
            <p>Cliquez dessus pour accéder à la chaine Youtube de l'auteur de la playlist.</p>
            </div>
            <br>
            <div class='oobe-line'>
                <div class='oobe-image-min'>
                
                </div>
                <p><span class='oobe-ctrl'>Ctrl + Click</span> pour copier le lien de la playlist</p>   
            </div>
            <br>
           
            <div class='oobe-line'>
                <span class="oobe-wh"><i class="fa fa-add"></i></span>
                <p>Ajouter la playlist à la liste de lecture.</p>
            </div>
            <div class='oobe-line'>
                <span class="oobe-wh"><i class="fa fa-play"></i></span>
                <p>Lire directement la playlist.</p>
            </div>
            <div class='oobe-line'>
                <span class="oobe-wh"><i class="fa fa-paper-plane"></i></span>
                <p>Partager la playlist.</p>
            </div>
            <div class='oobe-line'>
                <span class="oobe-wh"><i class="fa fa-trash"></i></span>
                <p>Supprimer la playlist.</p>
            </div>
            <div class='oobe-line'> 
                <span class="oobe-wh"><i class="fa fa-pen"></i></span>
                <p>Renommer la playlist.</p>
            </div>
            <br>
            

            <div class="oobe-accept">
                <button class="btn btn-primary" id='continue-oobe'>Continuer</button>
            </div>
            
        `)

    modal.show()

    document.getElementById("continue-oobe").addEventListener("click", () => {
        modal.hide()
        oobeStep5()
 
    })

}

function oobeStep5() {
    const modal = new ModalComponent({"title": "<div class='oobe-title gunship'><img class='oobe-logo' src='/images/logo-white.svg'> Bienvenue sur Subsonics WEB </div>" , "width": "70%", "closable": false})
    modal.setContent(`
        <div class="oobe-content">
            <h3>Apprenons à utiliser Subsonics Web (4/4) - Recherche</h3>
            <p>La recherche est un outil puissant pour trouver des musiques depuis Vimeo, Soundcloud et Youtube. Vous pouvez aussi rechercher des playlists sur Youtube.</p>
            <br>

            <div class="oobe-search">   
            <div class="search-find">
            <i class="fa fa-magnifying-glass"></i>
            <input disabled autocomplete="off" type="text" placeholder="Insérez des mots-clés ou un lien">
            </div>

                <div class="oobe-search-list">
                    <div class="search-list-item">
                            <div class="search-list-item-image">
                                <span class="search-action">
                                <span  class="search-circle"><i class="fa fa-add"></i></span>
                                    <span class="search-circle"><i class="fa fa-play"></i></span>
                                    <span class="search-circle"><i class="fa fa-save"></i></span>
                                </span>
                                <p class='search-time-code'>-:--</p>        
                            </div>
                            <div class="search-list-item-text">
                                <p class="search-list-item-text-title">Titre de la vidéo</p>
                                <p class="search-list-item-text-channel">Nom de la chaine<p>
                            </div>  
                        </div>
                        <div class="search-list-item">
                        <div class="search-list-item-image">
                            <span class="search-action">
                            <span  class="search-circle"><i class="fa fa-add"></i></span>
                                <span class="search-circle"><i class="fa fa-play"></i></span>
                                <span class="search-circle"><i class="fa fa-save"></i></span>
                            </span>
                            <p class='search-time-code'>-:--</p>        
                        </div>
                        <div class="search-list-item-text">
                            <p class="search-list-item-text-title">Titre de la vidéo</p>
                            <p class="search-list-item-text-channel">Nom de la chaine<p>
                        </div>  
                    </div>
                    <div class="search-list-item">
                    <div class="search-list-item-image">
                        <span class="search-action">
                        <span  class="search-circle"><i class="fa fa-add"></i></span>
                            <span class="search-circle"><i class="fa fa-play"></i></span>
                            <span class="search-circle"><i class="fa fa-save"></i></span>
                        </span>
                        <p class='search-time-code'>-:--</p>        
                    </div>
                    <div class="search-list-item-text">
                        <p class="search-list-item-text-title">Titre de la vidéo</p>
                        <p class="search-list-item-text-channel">Nom de la chaine<p>
                    </div>  
                </div>
                <div class="search-list-item">
                <div class="search-list-item-image">
                    <span class="search-action">
                    <span  class="search-circle"><i class="fa fa-add"></i></span>
                        <span class="search-circle"><i class="fa fa-play"></i></span>
                        <span class="search-circle"><i class="fa fa-save"></i></span>
                    </span>
                    <p class='search-time-code'>-:--</p>        
                </div>
                <div class="search-list-item-text">
                    <p class="search-list-item-text-title">Titre de la vidéo</p>
                    <p class="search-list-item-text-channel">Nom de la chaine<p>
                </div>  
            </div>
                </div> 
            </div>

            </div>
            
            <br>

            
            <div class='oobe-line'>
                <div style='padding-bottom:0px !important;' class="search-find">
                <i class="fa fa-magnifying-glass"></i>
                <input disabled autocomplete="off" type="text" placeholder="Insérez des mots-clés ou un lien">
                </div>
                <p>Trouver des musiques sur Youtube, Soundcloud et Vimeo.</p>
            </div>
            <div class='oobe-line'>
                <span class="search-circle"><i class="fa fa-add"></i></span>
                <p>Ajouter la musique à la liste de lecture.</p>
            </div>
            <div class='oobe-line'>
                <span class="search-circle"><i class="fa fa-play"></i></span>
                <p>Lire directement la musique.</p>
            </div>
            <div class='oobe-line'>
                <span class="search-circle"><i class="fa fa-save"></i></span>
                <p>Sauvegarder la musique dans une playlist.</p>
            </div>


            <br>

            <div class="oobe-accept">
                <button class="btn btn-primary" id='continue-oobe'>Continuer</button>
            </div>
            
        `)

    modal.show()

    document.getElementById("continue-oobe").addEventListener("click", () => {
        modal.hide()
        oobeStep6()

 
    })
}   

function oobeStep6() {
    const modal = new ModalComponent({"title": "<div class='oobe-title gunship'><img class='oobe-logo' src='/images/logo-white.svg'> Bienvenue sur Subsonics WEB </div>" , "width": "70%", "closable": false})
    modal.setContent(`
        <div class="oobe-content">
            <h3>Vous êtes prêt à utiliser Subsonics Web</h3>
            <p>Vous avez maintenant appris les bases de Subsonics Web. Vous pouvez maintenant commencer à utiliser le site.</p>
            <p>Mais avant de commencer, n'oubliez pas ces quelques conseils :</p>

            <ul>
                <li>Avant de commencer à lancez de la musique, assurez-vous que personne ne l'écoute déjà.</li>
                <li>Si vous avez des questions, n'hésitez pas à demander à Raphix (raphixscrap) sur Discord.</li>
                <li>Si vous rencontrez un bug ou que vous avez des suggestions, n'hésitez pas à le signaler en utilisant /report ou en utilisant le formulaire disponible dans Paramèters</li>
                <li>Si vous avez des questions sur les commandes, n'hésitez pas à consulter l'aide disponible en faisant /help</li>
                <li>Vérifiez que vous entrez des commandes dans le bon salon textuel (#bots).</li>
            </ul>
            <h3>Amusez-vous bien !</h3>

            <div class="oobe-accept">
                <button class="btn btn-primary" id='continue-oobe'>Terminer</button>
            </div>
            
        `)

    modal.show()

    document.getElementById("continue-oobe").addEventListener("click", () => {
        modal.hide()
        get("OOBE_VALID")
 
    })

}