document.getElementById("theme-toggle").onclick = () => {
    document.documentElement.dataset.theme =
        document.documentElement.dataset.theme === "dark" ? "light" : "dark";
};

const bind = (input, preview) => {
    input.addEventListener("input", () => {
        preview.textContent = input.value;
    });
};

bind(nameInput = document.getElementById("name-input"),
     document.getElementById("preview-name"));

bind(document.getElementById("role-input"),
     document.getElementById("preview-role"));

bind(document.getElementById("email-input"),
     document.getElementById("preview-email"));

bind(document.getElementById("phone-input"),
     document.getElementById("preview-phone"));

bind(document.getElementById("location-input"),
     document.getElementById("preview-location"));

bind(document.getElementById("about-input"),
     document.getElementById("preview-about"));

bind(document.getElementById("exp-input"),
     document.getElementById("preview-exp"));

bind(document.getElementById("edu-input"),
     document.getElementById("preview-edu"));

document.getElementById("photo-input").addEventListener("change", e => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = () => {
        const img = document.getElementById("preview-photo");
        img.src = reader.result;
        img.style.display = "block";
    };
    reader.readAsDataURL(file);
});

document.getElementById("add-section").onclick = () => {
    const id = Date.now();

    const editor = document.createElement("div");
    editor.className = "custom-block";
    editor.innerHTML = `
        <input placeholder="Section Title">
        <textarea placeholder="Content"></textarea>
        <button>Remove</button>
    `;

    const preview = document.createElement("div");
    preview.className = "section";
    preview.innerHTML = `<h3></h3><p></p>`;

    const [title, text, remove] = editor.children;

    title.oninput = () => preview.querySelector("h3").textContent = title.value;
    text.oninput  = () => preview.querySelector("p").textContent = text.value;

    remove.onclick = () => {
        editor.remove();
        preview.remove();
    };

    document.getElementById("custom-editor").appendChild(editor);
    document.getElementById("preview-content").appendChild(preview);
};