async function generateServiceView() {

    class Service {
        name = null
        description = null
        icon = null
        url = null
        canAccess = false
        isOnline  = false
        constructor(properties) {
            this.name = properties.name
            this.description = properties.description
            this.icon = properties.icon
            this.url = properties.url
            this.canAccess = properties.canAccess
        }
    
        generateHTML() {
            return `
            <div class="sv">
                <div class='sv-info'>
                    <img class="sv-icon" src="${this.icon}" alt="${this.name}">
                    <div>
                        <h1>${this.name}</h1>
                        <p>${this.description}</p>
                        <p>Etat : <span id='${this.name}_status' class="sv-status"></span></p>
                    </div>
                </div>
                
                <div class="sv-actions">
                    ${this.canAccess ? `<a href="${this.url}" target="_blank"><button class="btn green"><span>Accéder au service</span></button></a>` : ""}
                    <button id='${this.name}_svpower' class='btn yellow'n><span>Options d'alimentation<span></button>
                </div>
            </div>
            `
    
            
        }
    
        loadScript() {
    
            return new Promise((resolve, reject) => {
                const statusSpan = getID(`${this.name}_status`)
                const request = post(`SV_GET_SERVICE_STATUS`, this.url) 
            

                request.then((answer) => {
                    if(answer.name == this.url) {
                        if(answer.answer == "ONLINE") {
                            statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
                            this.isOnline  = true
                        } else {
                            statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle red"></i> Hors ligne</span>'
                  
                        }
                        resolve("LOADED")
                    }
                
                })
    
                const powerButton = getID(`${this.name}_svpower`)
    
                // Make a popup of View to select if you want to start, stop or restart the service by doing a request
    
                powerButton.addEventListener("click", () => {
                    View.createPopup({
                        title: `<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`,
                        content: `
                        
                        <p class='sv-power-select'>${this.name}</p>
                        <p id='sv-power-info'></p>
                        <div class="sv-power">
                            <button id="${this.name}_start" class="btn green"><span>Démarrer</span></button>
                            <button id="${this.name}_restart" class="btn yellow"><span>Redémarrer</span></button>
                            <button id="${this.name}_stop" class="btn red"><span> Arrêter</span></button>
                        </div>
                        `
                    })
    
                    const startButton = getID(`${this.name}_start`)
                    const stopButton = getID(`${this.name}_stop`)
                    const restartButton = getID(`${this.name}_restart`)
                    const info = new InfoPop("sv-power-info")
                    
                    

                    if(this.isOnline) {
                        startButton.style.display = "none"
                        info.info("Verifiez que le service n'est pas utilisé par quelqu'un d'autre avant de le redémarrer ou de l'arrêter")
                    } else {
                        stopButton.style.display = "none"
                        restartButton.style.display = "none"
                        info.info("Si le service ne démarre pas, vérifiez l'intégrité du service")
                    }
    
                    startButton.addEventListener("click", () => {
                        const request = post(`SV_START_SERVICE`, this.url) 
                        

                        request.then((answer) => {
                            if(answer.answer == "OK") {
                                statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
                                View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
                                this.isOnline  = true
                            } else {
                                info.err("Impossible de démarrer le service")

                            }
                        })
    
                    })

                    stopButton.addEventListener("click", () => {
                        const request = post(`SV_STOP_SERVICE`, this.url) 
    
                        request.then((answer) => {
                            if(answer.answer == "OK") {
                                statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle red"></i> Hors ligne</span>'
                                this.isOnline  = false
                                View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
                              
                            } else {
                                info.err("Impossible d'arrêter le service")

                            }
                        
                        })
                    })

                    restartButton.addEventListener("click", () => {

                        console.log("RESTART")

                        const request = post(`SV_RESTART_SERVICE`, this.url) 
    
                        request.then((answer) => {
                            if(answer.answer == "OK") {
                                statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
                                View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
                                this.isOnline  = true
                            } else {
                                info.err("Impossible de redémarrer le service")

                            }
                            
                        })
                    })
    
    
            })
            
         })
        }
        
    }


    /**
     * CODE OF SERVICE.JS
    */

    const allServices = new Array()

    const View = new ViewWindow({
        title: '<i class="fa fa-layer-group"></i> Gestion des services',
        width: "700px",
        height: "600px"
    })

    const subsonicsService = new Service({
        name: "Subsonics",
        description: "Bot de streaming musical sur Discord",
        icon: "/images/services/subsonics.png",
        url: "https://subsonics.raphix.fr" ,
        canAccess: true
        

    })

    const giteaService = new Service({
        name: "Gitea",
        description: "Gestionnaire de dépôt Git",
        icon: "/images/services/gitea.svg",
        url: "https://git.raphix.fr" ,
        canAccess: true

    })

    const jenkinsService = new Service({
        name: "Jenkins",
        description: "Gestionnaire de pipeline",
        icon: "/images/services/jenkins.svg",
        url: "https://jenkins.raphix.fr" ,
        canAccess: true

    })

    const raphixwebsite = new Service({
        name: "Raphix.fr",
        description: "Site web de Raphix",
        icon: "/images/services/raphix.png",
        url: "https://raphix.fr",
        canAccess: true

    })

    const cvraphix = new Service({
        name: "CV Raphix",
        description: "Curriculum Vitae de Raphix",
        icon: "/images/services/cv.png",
        url: "https://cv.raphix.fr",
        canAccess: true
    })

    const lavalink = new Service({
        name: "Lavalink",
        description: "Serveur Lavalink pour Subsonics",
        icon: "/images/services/lavalink.svg",
        url: "http://omega.raphix.fr:2333",
        canAccess: false
    })
    
    allServices.push(subsonicsService.generateHTML())
    allServices.push(lavalink.generateHTML())
    allServices.push(giteaService.generateHTML())
    allServices.push(jenkinsService.generateHTML())
    allServices.push(raphixwebsite.generateHTML())
    allServices.push(cvraphix.generateHTML())

    View.setContent(`<div class='sv-list'>${allServices.join("")}</div>`)

    await subsonicsService.loadScript()
    await giteaService.loadScript()
    await jenkinsService.loadScript()
    await raphixwebsite.loadScript()
    await cvraphix.loadScript()
    await lavalink.loadScript()

}