
    
function setOptional(element) {
    element.removeAttribute("required");
    element.style.backgroundColor = "var(--color-optional-input)";;
}
function setRequired(element) {
    element.setAttribute("required","");
    element.style.backgroundColor = "var(--color-text)";
}

function onDatabaseBackendChanged() {
    const backend = document.getElementById("form_db_backend").value;
    let database = document.getElementById("form_db_database");
    let host = document.getElementById("form_db_host");
    let port = document.getElementById("form_db_port");
    let user = document.getElementById("form_db_user");
    let password = document.getElementById("form_db_password");
    let url = document.getElementById("form_db_url");
   
    if (backend === "url") {
        setOptional(database);
        setOptional(host);
        setOptional(port);
        setOptional(user);
        setOptional(password);
        setRequired(url);
    } else if (backend === "sqlite") {
        setRequired(database);
        setOptional(host);
        setOptional(port);
        setOptional(user);
        setOptional(password);
        setOptional(url);
    } else if ((backend === "postgresql") || (backend === "mysql")) {
        setRequired(database);
        setRequired(host);
        setRequired(port);
        setRequired(user);
        setRequired(password);
        setOptional(url);
    }
}

function onEmailBackendChanged() {
    const backend = document.getElementById("form_email_backend").value;
    let user = document.getElementById("form_email_user");
    let passwd = document.getElementById("form_email_password");
    let host = document.getElementById("form_email_host");
    let port = document.getElementById("form_email_port");
    let path = document.getElementById("form_email_path");
    let dsn = document.getElementById("form_email_dsn");
    
    if (backend === "dsn") {
        setOptional(user);
        setOptional(passwd);
        setOptional(host);
        setOptional(port);
        setOptional(path);
        setRequired(dsn);
    } else if ((backend === "none") || (backend === "native")) {
        setOptional(user);
        setOptional(passwd);
        setOptional(host);
        setOptional(port);
        setOptional(path);
        setOptional(dsn);
    } else if (backend === "smtp") {
        setRequired(user);
        setRequired(passwd);
        setRequired(host);
        setRequired(port);
        setOptional(path);
        setOptional(dsn);
    } else if (backend === "sendmail") {
        setOptional(user);
        setOptional(passwd);
        setOptional(host);
        setOptional(port);
        setRequired(path);
        setOptional(dsn);
    }
}
    
function initializeWebrootSetupForm() {
    document.getElementById("form_db_backend").onchange = onDatabaseBackendChanged;
    onDatabaseBackendChanged();
    document.getElementById("form_email_backend").onchange = onEmailBackendChanged;
    onEmailBackendChanged();
        
    console.log("WebrootSetupForm initialized!");
}
