APP.ui.features = {};

APP.ui.features.renderFeatures = function (det) {
    const { $ } = APP.core.utils;
    const featureTable = $("#featureTable");
    const selId = $("#selId"); // Correct ID

    if (!featureTable || !selId) return;

    selId.textContent = det ? det.id : "—";
    const tbody = featureTable.querySelector("tbody");
    tbody.innerHTML = "";

    if (!det) {
        tbody.innerHTML = `<tr><td class="k">—</td><td class="mini">No target selected</td></tr>`;
        return;
    }

    const feats = det.features || {};
    const keys = Object.keys(feats);
    const show = keys.slice(0, 12);

    show.forEach(k => {
        const tr = document.createElement("tr");
        tr.innerHTML = `<td class="k">${k}</td><td>${String(feats[k])}</td>`;
        tbody.appendChild(tr);
    });

    if (show.length < 10) {
        for (let i = show.length; i < 10; i++) {
            const tr = document.createElement("tr");
            tr.innerHTML = `<td class="k">—</td><td class="mini">awaiting additional expert outputs</td>`;
            tbody.appendChild(tr);
        }
    }
};