// === GRID VIEW ===

function renderGrid() {
    const el = document.getElementById("grid-view");
    const filtered = filterTags();

    if (!filtered.length) {
        el.innerHTML = '<div class="empty-state"><div class="empty-state-icon">:/</div><div>No se encontraron tags</div></div>';
        return;
    }

    el.innerHTML = filtered.map(tag => {
        const img = getImg(tag);
        const ref = (tag.ref || "").toUpperCase();
        const ph = ref.slice(0, 2);
        const sel = state.selected.has(tag.mrf);

        return `<div class="card ${sel ? "selected" : ""}" data-mrf="${tag.mrf}">
            <div class="card-checkbox ${state.selectionMode ? "visible" : ""} ${sel ? "checked" : ""}"></div>
            <div class="card-image">
                ${img ? `<img class="card-img" src="${img}" loading="lazy" alt="${ref}">` : `<div class="card-placeholder">${ph}</div>`}
            </div>
            <div class="card-body">
                <div class="card-ref">${ref}</div>
                <div class="card-name">${getName(tag)}</div>
            </div>
        </div>`;
    }).join("");

    el.querySelectorAll(".card").forEach(c => {
        c.onclick = () => state.selectionMode ? toggleSel(c.dataset.mrf) : showDetail(c.dataset.mrf);
    });
}