Vote = {
    vote_plus_id: null,
    vote_plus_nickname: null,
    vote_plus_reason: null,
    vote_moins_id: null,
    vote_moins_nickname: null,
    vote_moins_reason: null
}

load_page(0)

function load_page(id) {
    const header = document.createElement("h1");
    const buttons = document.createElement("div");

    const vote_id = document.createElement("h2");
    vote_id.textContent = "Pour qui votes-tu?"
    const vote_id_select = document.createElement("select");
    const vote_nickname = document.createElement("h2");
    vote_nickname.textContent = "As-tu un surnom à lui donner?";
    const vote_nickname_input = document.createElement("input");
    vote_nickname_input.inputMode = "text";
    const vote_reason = document.createElement("h2");
    vote_reason.textContent = "Pourquoi votes-tu pour lui?";
    const vote_reason_input = document.createElement("textarea");
    vote_reason_input.maxLength = 1000;

    if (id) {
        vote_id_select.value = Vote.vote_moins_id;
        vote_nickname_input.value = Vote.vote_moins_nickname;
        vote_reason_input.value = Vote.vote_moins_reason;
        header.textContent = "Vote -";
        let previous = document.createElement("button");
        previous.textContent = "Précédent";
        previous.addEventListener("click", () => {
            Vote.vote_moins_id = vote_id.value;
            Vote.vote_moins_nickname = vote_nickname_input.value;
            Vote.vote_moins_reason = vote_reason_input.value;
            load_page(0)});
        let submit = document.createElement("button");
        submit.textContent = "A Voté";
        buttons.append(previous, submit);
    } else {
        vote_id_select.value = Vote.vote_plus_id;
        vote_nickname_input.value = Vote.vote_plus_nickname;
        vote_reason_input.value = Vote.vote_plus_reason;
        header.textContent = "Vote +";
        let next = document.createElement("button");
        next.innerText = "Suivant";
        next.addEventListener("click", () => {
            Vote.vote_plus_id = vote_id.value;
            Vote.vote_plus_nickname = vote_nickname_input.value;
            Vote.vote_plus_reason = vote_reason_input.value;
            load_page(1)
        });
        buttons.appendChild(next);
    }

    const div = document.getElementById("app");
    div.innerHTML = "";
    div.append(header,vote_id, vote_id_select, vote_nickname, vote_nickname_input, vote_reason, vote_reason_input, buttons);
}