{# ── Macro: tabla de juegos ───────────────────────────────────────── #}
{% macro renderTabla(entradas, tableId, conPropietarios, misPuntuaciones, urlPuntuar) %}
{%- set usedVals = [] -%}
{%- for v in misPuntuaciones -%}{%- set usedVals = usedVals|merge([v]) -%}{%- endfor -%}
<div class="coleccion-tabla-wrap">
<table class="coleccion-tabla" id="{{ tableId }}">
    <thead>
        <tr>
            <th style="width:84px"></th>
            <th class="ct-sortable" data-col="nombre" data-type="text">Nombre <span class="ct-sort-icon">⇅</span></th>
            <th>Tipo</th>
            <th class="ct-sortable ct-col-num" data-col="rating" data-type="num" title="Puntuación BGG">⭐ Rating <span class="ct-sort-icon">⇅</span></th>
            <th class="ct-sortable ct-col-num" data-col="jug"    data-type="num" title="Jugadores">👥 Jug. <span class="ct-sort-icon">⇅</span></th>
            <th class="ct-sortable ct-col-num" data-col="time"   data-type="num" title="Duración">⏱ Min. <span class="ct-sort-icon">⇅</span></th>
            <th class="ct-sortable ct-col-num" data-col="age"    data-type="num" title="Edad mínima">🎂 Edad <span class="ct-sort-icon">⇅</span></th>
            <th class="ct-sortable ct-col-num" data-col="weight" data-type="num" title="Complejidad BGG">🏋️ Peso <span class="ct-sort-icon">⇅</span></th>
            {% if conPropietarios %}<th class="ct-col-owners">Tienen</th>{% endif %}
            {% if conPropietarios and urlPuntuar %}<th class="ct-col-nota" title="Tu puntuación personal">Tu nota</th>{% endif %}
        </tr>
    </thead>
    <tbody>
    {% for entrada in entradas %}
        {% set juego = entrada.juego %}

        {% if juego.isExpansion %}
            {% set tipo = 'expansion' %}
        {% elseif juego.minAge and juego.minAge > 0 and juego.minAge < 7 %}
            {% set tipo = 'infantil' %}
        {% elseif juego.avgWeight %}
            {% if juego.avgWeight < 1.5 %}
                {% set tipo = 'ligero' %}
            {% elseif juego.avgWeight < 2.5 %}
                {% set tipo = 'medio' %}
            {% else %}
                {% set tipo = 'complejo' %}
            {% endif %}
        {% else %}
            {% set tipo = '' %}
        {% endif %}

        {% if juego.puntuacionBgg %}
            {% set ratingClass = juego.puntuacionBgg >= 7.5 ? 'alto' : (juego.puntuacionBgg >= 6.0 ? 'medio' : 'bajo') %}
        {% else %}
            {% set ratingClass = '' %}
        {% endif %}

        <tr class="coleccion-row{% if tipo %} cp-{{ tipo }}{% endif %}"
            data-bgg-id="{{ juego.bggId }}"
            data-nombre="{{ juego.nombre|lower }}"
            data-designers="{{ juego.designers ? juego.designers|lower : '' }}"
            data-weight="{{ juego.avgWeight ? juego.avgWeight|number_format(2, '.', '') : '' }}"
            data-time="{{ juego.playingTime ?? '' }}"
            data-age="{{ juego.minAge ?? '' }}"
            data-rating="{{ juego.puntuacionBgg ? juego.puntuacionBgg|number_format(2, '.', '') : '' }}"
            data-min-jug="{{ juego.minJugadores ?? '' }}"
            data-max-jug="{{ juego.maxJugadores ?? '' }}"
            data-tipo="{{ tipo }}">

            <td class="ct-col-img">
                {% if juego.imagenUrl %}
                    <img src="{{ juego.imagenUrl }}" alt="{{ juego.nombre }}" loading="lazy">
                {% else %}
                    <div class="ct-sin-img">🎲</div>
                {% endif %}
            </td>

            <td class="ct-col-nombre">
                <div class="ct-nombre">
                    {{ juego.nombre }}
                    {% if conPropietarios and entrada.propietarios|length > 1 %}
                        <span class="ct-dup">×{{ entrada.propietarios|length }}</span>
                    {% endif %}
                </div>
                {% if juego.designers %}
                    <div class="ct-designers">{{ juego.designers }}</div>
                {% endif %}
                {% if juego.anoPublicacion %}
                    <div class="ct-anio">{{ juego.anoPublicacion }}</div>
                {% endif %}
            </td>

            <td class="ct-col-tipo">
                {% if tipo == 'expansion' %}<span class="ct-tag ct-tag-expansion">🧩 Expansión</span>
                {% elseif tipo == 'infantil' %}<span class="ct-tag ct-tag-infantil">👶 Infantil</span>
                {% elseif tipo == 'ligero'   %}<span class="ct-tag ct-tag-ligero">🟢 Ligero</span>
                {% elseif tipo == 'medio'    %}<span class="ct-tag ct-tag-medio">🟡 Medio</span>
                {% elseif tipo == 'complejo' %}<span class="ct-tag ct-tag-complejo">🔴 Complejo</span>
                {% endif %}
            </td>

            <td class="ct-col-num">
                {% if juego.puntuacionBgg %}
                    <span class="ct-rating {{ ratingClass }}">{{ juego.puntuacionBgg|number_format(1) }}</span>
                {% else %}<span class="ct-empty">—</span>{% endif %}
            </td>

            <td class="ct-col-num">
                {% if juego.minJugadores %}
                    {% if juego.maxJugadores and juego.maxJugadores != juego.minJugadores %}
                        {{ juego.minJugadores }}–{{ juego.maxJugadores }}
                    {% else %}{{ juego.minJugadores }}{% endif %}
                {% else %}<span class="ct-empty">—</span>{% endif %}
            </td>

            <td class="ct-col-num">
                {% if juego.playingTime %}
                    {{ juego.playingTime }}<span class="ct-unit">min</span>
                {% else %}<span class="ct-empty">—</span>{% endif %}
            </td>

            <td class="ct-col-num">
                {% if juego.minAge and juego.minAge > 0 %}
                    {{ juego.minAge }}<span class="ct-unit">+</span>
                {% else %}<span class="ct-empty">—</span>{% endif %}
            </td>

            <td class="ct-col-num">
                {% if juego.avgWeight %}
                    {{ juego.avgWeight|number_format(2) }}
                {% else %}<span class="ct-empty">—</span>{% endif %}
            </td>

            {% if conPropietarios %}
            <td class="ct-col-owners">
                {% for prop in entrada.propietarios %}
                    <span class="ct-owner-avatar" title="{{ prop.nombre }}">
                        {% if prop.avatar %}
                            <img src="{{ asset('uploads/avatars/' ~ prop.avatar) }}" alt="{{ prop.nombre }}">
                        {% else %}
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true">
                                <path d="M12 12c2.67 0 4.8-2.13 4.8-4.8S14.67 2.4 12 2.4 7.2 4.53 7.2 7.2 9.33 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
                            </svg>
                        {% endif %}
                    </span>
                {% endfor %}
            </td>
            {% endif %}
            {% if conPropietarios and urlPuntuar %}
            {% set miNota = misPuntuaciones[juego.id] is defined ? misPuntuaciones[juego.id] : null %}
            <td class="ct-col-nota">
                <form method="post" action="{{ urlPuntuar }}" class="puntuacion-mini-form">
                    <input type="hidden" name="juego_id" value="{{ juego.id }}">
                    <select name="puntuacion" class="puntuacion-select-mini" title="Tu puntuación (cada ★ solo puede usarse una vez)">
                        <option value="0"{% if miNota is null %} selected{% endif %}>—</option>
                        {% for i in 1..5 %}
                            {% if miNota == i or i not in usedVals %}
                            <option value="{{ i }}"{% if miNota == i %} selected{% endif %}>{{ i }}★</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </form>
            </td>
            {% endif %}
        </tr>
    {% endfor %}
    </tbody>
</table>
</div>
{% endmacro %}

{# ── Macro: panel de filtros ─────────────────────────────────────── #}
{% macro renderFiltros(panelId, tableId) %}
<div class="coleccion-filtros" id="{{ panelId }}">
    <div class="coleccion-filtros-top">
        <div class="coleccion-search-wrap">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
            </svg>
            <input type="search" class="coleccion-search js-col-buscar"
                   placeholder="Buscar por nombre o autor…" autocomplete="off"
                   aria-label="Buscar juego">
        </div>
        <span class="coleccion-resultado js-col-contador" aria-live="polite" style="display:none"></span>
        <button class="coleccion-limpiar js-col-limpiar" type="button" style="display:none" aria-label="Limpiar filtros">
            ✕ Limpiar
        </button>
    </div>
    <div class="coleccion-filtros-divider"></div>
    <div class="coleccion-filtros-grupos">
        <div class="coleccion-filtro-grupo">
            <span class="coleccion-filtro-label">Complejidad</span>
            <div class="coleccion-pills">
                <button class="c-pill" type="button" data-grupo="complejidad" data-complejidad="infantil">👶 Infantil</button>
                <button class="c-pill" type="button" data-grupo="complejidad" data-complejidad="ligero"   data-peso-min="0"   data-peso-max="1.4999">🟢 Ligero</button>
                <button class="c-pill" type="button" data-grupo="complejidad" data-complejidad="medio"    data-peso-min="1.5"  data-peso-max="2.4999">🟡 Medio</button>
                <button class="c-pill" type="button" data-grupo="complejidad" data-complejidad="complejo" data-peso-min="2.5"  data-peso-max="99">🔴 Complejo</button>
            </div>
        </div>
        <div class="coleccion-filtro-grupo">
            <span class="coleccion-filtro-label">Duración</span>
            <div class="coleccion-pills">
                <button class="c-pill" type="button" data-grupo="duracion" data-dur-max="29">&lt;30 min</button>
                <button class="c-pill" type="button" data-grupo="duracion" data-dur-min="30" data-dur-max="90">30–90 min</button>
                <button class="c-pill" type="button" data-grupo="duracion" data-dur-min="91">&gt;90 min</button>
            </div>
        </div>
        <div class="coleccion-filtro-grupo">
            <span class="coleccion-filtro-label">Jugadores</span>
            <div class="coleccion-pills">
                <button class="c-pill" type="button" data-grupo="jugadores" data-jug-min="1" data-jug-max="2">1–2</button>
                <button class="c-pill" type="button" data-grupo="jugadores" data-jug-min="3" data-jug-max="4">3–4</button>
                <button class="c-pill" type="button" data-grupo="jugadores" data-jug-min="5" data-jug-max="6">5–6</button>
                <button class="c-pill" type="button" data-grupo="jugadores" data-jug-min="7">7+</button>
            </div>
        </div>
    </div>
</div>
{% endmacro %}