const form = `
<form class="contact-form" id="contact-form">
    <label for="key">Ključ:</label>
    <input type="text" id="key" name="key" class="page-input" required>
    <label for="type">Tip vnosa:</label>
    <select id="type" name="type" class="page-input" required>
        <option value="samostalnik, moški spol">Samostalnik; Moški spol</option>
        <option value="samostalnik, ženski spol">Samostalnik; Ženski spol</option>
        <option value="samostalnik, srednji spol">Samostalnik; Srednji spol</option>
        <option value="pridevnik, moški spol">Pridevnik; Moški spol</option>
        <option value="pridevnik, ženski spol">Pridevnik; Ženski spol</option>
        <option value="pridevnik, srednji spol">Pridevnik; Srednji spol</option>
        <option value="glagol">Glagol</option>
        <option value="frazem">Frazem</option>
    </select>
    <label for="content">Definicija:</label>
    <textarea id="content" name="content" rows="5" class="page-input" required></textarea>
    <label for="examples">Primeri (neobvezno):</label>
    <textarea id="examples" name="examples" rows="5" class="page-input"></textarea>
    <button type="submit" class="page-btn">Dodaj vnos</button>
    <br>
    <p>Pomoč:</p>
    <ul class="page-unordered-list">
        <li><strong>Ključ</strong> je sama beseda, oz. vnos. Npr. "raca".</li>
        <li><strong>Definicija</strong> je vsebina vašega vnosa.</li>
    </ul>
    <p><strong>Definicijo morate specifično spisati!</strong> Morate uporabiti specifične <em>indentifikatorje</em>, tako da bo sistem pravilno pokazal vašo definicijo.</p>
    <ul class="page-unordered-list">
        <li><strong>Vsako posamezno definicijo</strong> morate vnesti med &lt;def&gt; in &lt;/def&gt;. Primer: <em>&lt;def&gt;1. srednje velika domača ali divja ptica s ploščatim kljunom in krajšim vratom&lt;/def&gt;</em></li>
    </ul>
    <p><strong>Primeri</strong> so neobvezni, vendar zelo priporočeni.</em></p>
    <p><em>Vaš vnos bo javno vezan na vaš račun.</em></p>
</form>`;

document.getElementById("confirm-add").addEventListener("click", () => {
    document.getElementById("new-entry-form-modal").style.display = "none";

    const url = "https://ssnj.dcrubro.com/api/nov-vnos";
    let content = document.getElementById("content").value;
    const key = document.getElementById("key").value;
    const examples = document.getElementById("examples").value ? "Primer: " + document.getElementById("examples").value : "Ni podanih primerov.";
    const type = document.getElementById("type").value;

    content = content.replace("<def>", "<p class=\"entry-meaning\">");
    content = content.replace("</def>", "</p>");

    fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({ "token": document.cookie.split(";").find(cookie => cookie.trim().startsWith("token=")).split("=")[1], "content": content, "key": key, "examples": examples, "type": type })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("Network response was not ok");
        }
        return response.json();
    })
    .then(data => {
        console.log("Success:", data);
        document.getElementById("contact-form").innerHTML = `<p class="page-paragraph-success">Hvala za vaš vnos!</p>`;
    })
    .catch((error) => {
        console.error("Error:", error);
        document.getElementById("contact-form").innerHTML = `<p class="page-paragraph-error">Prišlo je do napake pri dodajanju vnosa. Prosimo, poskusite znova pozneje.</p>`;
    });
    setTimeout(() => {
        window.location.href = "/";
    }, 3000);
});

document.getElementById("cancel-add").addEventListener("click", () => {
    document.getElementById("new-entry-form-modal").style.visibility = "hidden";
});

document.getElementById("close-modal").addEventListener("click", () => {
    document.getElementById("new-entry-form-modal").style.visibility = "hidden";
});

document.addEventListener("DOMContentLoaded", () => {
    const contactFormContainer = document.getElementById("entry-form-container");
    // Najdi cookie "token" v cookies
    const isLoggedIn = document.cookie.split(";").some(cookie => cookie.trim().startsWith("token="));
    if (contactFormContainer && isLoggedIn) {
        contactFormContainer.innerHTML = form;

        document.getElementById("contact-form").addEventListener("submit", (e) => {
            e.preventDefault();
            document.getElementById("new-entry-form-modal").style.visibility = "visible";

            // TODO: Popravi margin pri success in error textu da ne bo offsetan

        });
    } else if (contactFormContainer) {
        contactFormContainer.innerHTML = `<p class="page-paragraph">Za dodajanje vnosov se morate prijaviti.</p>`;
    }
});