{% load static i18n %}
<table id="table-{{ widget.attrs.id }}">
    <thead>
    <tr>
        <th>{% blocktrans %}key{% endblocktrans %}</th>
        <th>{% blocktrans %}value{% endblocktrans %}</th>
    </tr>
    </thead>
    <tbody id="json-fields-{{ widget.attrs.id }}" data-name="{{ widget.name }}">
    {% for idx, item in widget.value.items %}
        <tr data-row-index="{{ forloop.counter0 }}">
            <td><label>
                <input type="text" name="{{ widget.name }}[{{ forloop.counter0 }}][key]" value="{{ item.0 }}">
            </label></td>
            <td>
                {% if item.1 is list %}
                    <label>
                        <input type="text" name="{{ widget.name }}[{{ forloop.counter0 }}][value]" value="{{ item.1|join:', ' }}">
                    </label>
                {% else %}
                    <label>
                        <input type="text" name="{{ widget.name }}[{{ forloop.counter0 }}][value]" value="{{ item.1 }}">
                    </label>
                {% endif %}
            </td>
        </tr>
    {% endfor %}
    <tr data-row-index="{{ widget.value.items|length|default_if_none:0|default:0 }}">
        <td><label>
            <input type="text" name="{{ widget.name }}[{{ widget.value.items|length|default_if_none:0|default:0 }}][key]">
        </label></td>
        <td><label>
            <input type="text" name="{{ widget.name }}[{{ widget.value.items|length|default_if_none:0|default:0 }}][value]">
        </label></td>
    </tr>
    </tbody>
</table>

<button type="button" class="add-row-button" data-table-id="json-fields-{{ widget.attrs.id }}">
    Add Row
</button>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".add-row-button").forEach(function (button) {
            button.removeEventListener("click", addRow);
            button.addEventListener("click", addRow);
        });
    });

    function addRow(event) {
        const tableBodyId = event.target.getAttribute("data-table-id");
        const tbody = document.getElementById(tableBodyId);
        if (!tbody) return;

        const lastRow = tbody.querySelector("tr:last-child");
        const lastIndex = lastRow ? parseInt(lastRow.getAttribute("data-row-index"), 10) : -1;
        const rowIndex = Number.isFinite(lastIndex) ? lastIndex + 1 : 0;

        const namePrefix = tbody.getAttribute("data-name");
        if (!namePrefix) return;

        const tr = document.createElement("tr");
        tr.setAttribute("data-row-index", String(rowIndex));

        const tdKey = document.createElement("td");
        const labelKey = document.createElement("label");
        const inputKey = document.createElement("input");
        inputKey.type = "text";
        inputKey.name = `${namePrefix}[${rowIndex}][key]`;
        labelKey.appendChild(inputKey);
        tdKey.appendChild(labelKey);

        const tdVal = document.createElement("td");
        const labelVal = document.createElement("label");
        const inputVal = document.createElement("input");
        inputVal.type = "text";
        inputVal.name = `${namePrefix}[${rowIndex}][value]`;
        labelVal.appendChild(inputVal);
        tdVal.appendChild(labelVal);

        tr.appendChild(tdKey);
        tr.appendChild(tdVal);
        tbody.appendChild(tr);
    }
</script>