settings.createWindow(async () => {

    const View = new ViewWindow({
        title: `<i class="fa fa-cog"></i> Paramètres`,
        width: "500px",
        height: "620px"
    })

    View.setContent(`
        <div style='overflow-y: auto; height: 550px;'>
        <div class="category">
            <p>Options d'alimentation</p>

            <div class='st-act'>
            <button id="st-restart" class="btn yellow"><span>Redémarrer</span></button>
            <button id="st-stop" class="btn red"><span> Arrêter</span></button>
            </div>
        
        </div>
        <div class="category">
            <p>Configuration des Tokens</p>
            <p class='user-line-displayname'>Jenkins</p>
            <input class='field' type="text" id="jenkins_token" placeholder="Token Jenkins">
            <p class='user-line-displayname'> Omega </p>
            <input class='field' type="text" id="omega_token" placeholder="Token Omega">
            <button id="st-save" class="btn green"><span> Sauvegarder</span></button>
        </div>
        <div class="category">
            <p>Accès aux logs</p>
            <select id="all-logs" class="field">
                <option>Chargment en cours ...</option>
            </select>
            <button id="read-logs" class="btn green"><span>Lire</span></button>
        </div>
        </div>
    `)

    
    const allLogs = document.getElementById("all-logs")
    const readLogs = document.getElementById("read-logs")
    
    get("SERVER_GET_LOGS").then((logs) => {
        logs.reverse()
        allLogs.innerHTML = logs.map((log) => {
            return `<option value="${log}">${log}</option>`
        }).join("")
    })

    readLogs.addEventListener("click", () => {
        const log = allLogs.value
        post("SERVER_READ_LOG", log).then((logContent) => {
            const logView = new ViewWindow({
                title: `<i class="fa fa-file"></i> ${log}`,
                width: "1000px",
                height: "520px"
            })

            logContent = logContent.replaceAll("[INFO]", "<span class='blue'>[INFO]</span>")
            logContent = logContent.replaceAll("[WARN]", "<span class='yellow'>[WARN]</span>")
            logContent = logContent.replaceAll("[ERROR]", "<span class='lightred'>[ERROR]</span>")
            logContent = logContent.replaceAll("[STEP]", "<span class='green'>[STEP]</span>")

            logContent = logContent.replaceAll("[Users]", "<span style='color:#c7b8ff; '>[Users]</span>")
            logContent = logContent.replaceAll("[Web]", "<span style='color:#fffd8a; '>[Web]</span>")
            logContent = logContent.replaceAll("[Serveur]", "<span style='color:#ff7a5c; '>[Serveur]</span>")
            logContent = logContent.replaceAll("[Authentification]", "<span style='color:#d9e6ff; '>[Authentification]</span>")

            // Get every line of logs and add a set the style in blue when it's the date in []

            const logLines = logContent.split("\n")
            const newLogLines = new Array()

            logLines.forEach((line) => {
                if(line.startsWith("[") && line.includes("]")) {
                    const date = line.split("]")[0] + "]"
                    const content = line.replace(date, "")
                    newLogLines.push(`<span style='color: #a6c2f7;'>${date}</span>${content}\n`)
                } else {

                    newLogLines.push(`${line}\n`)
                }
            })

            logView.setContent(`
                <div style='overflow-y: auto; height: 450px;'>
                    <pre style='font-size: 12px'>${newLogLines.join("")}</pre>
                </div>
            `)

        })
    })

    const restartButton = document.getElementById("st-restart")
    const stopButton = document.getElementById("st-stop")
    const saveButton = document.getElementById("st-save")
    const jenkinsToken = document.getElementById("jenkins_token")
    const omegaToken = document.getElementById("omega_token")

    get("SETTINGS_GET").then((settings) => {
        jenkinsToken.value = settings.jenkins_token
        omegaToken.value = settings.omega_token
    })

    restartButton.addEventListener("click", () => {
        post("SERVER_RESTART")
    })

    stopButton.addEventListener("click", () => {
        post("SERVER_STOP")
    })

    saveButton.addEventListener("click", () => {
        post("SETTINGS_SAVE", {
            jenkins_token: jenkinsToken.value,
            omega_token: omegaToken.value
        })

        get("SETTINGS_GET").then((settings) => {
            jenkinsToken.value = settings.jenkins_token
            omegaToken.value = settings.omega_token
        })
    })
})