<div id="id_gk_sections_container">
    {% comment %}
    `#id_game_kit` wraps every section so `gameboard.js`'s `initGameKitTooltips
    ()` finds ALL `.token` elements (trinkets + tokens + decks) under one
    scope. Data attrs feed `buildMiniContent()` for the Equipped / Not
    Equipped / In-Use status text.
    {% endcomment %}
    <div id="id_game_kit" data-equipped-id="{{ equipped_trinket_id|default:'' }}" data-equipped-deck-id="{{ equipped_deck_id|default:'' }}" data-in-use-deck-ids="{% for d in deck_variants %}{% if d.in_use_room_name %}{{ d.pk }},{% endif %}{% endfor %}">
    {% for entry in applets %}
        {% if entry.applet.slug == 'gk-trinkets' and entry.visible %}
        <section id="id_gk_trinkets" style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};">
            <h2>Trinkets</h2>
            <div class="gk-items">
                {% if pass_token %}
                <div id="id_kit_pass" class="token" data-token-id="{{ pass_token.pk }}">
                    <i class="fa-solid fa-clipboard"></i>
                    <div class="tt">
                        <div class="tt-equip-btns">
                            {% if pass_token.pk == equipped_trinket_id %}<button class="btn btn-equip btn-disabled" data-token-id="{{ pass_token.pk }}">×</button><button class="btn btn-unequip" data-token-id="{{ pass_token.pk }}">DOFF</button>{% else %}<button class="btn btn-equip" data-token-id="{{ pass_token.pk }}">DON</button><button class="btn btn-unequip btn-disabled" data-token-id="{{ pass_token.pk }}">×</button>{% endif %}
                        </div>
                        <h4 class="tt-title">{{ pass_token.tooltip_name }}</h4>
                        <p class="tt-description">{{ pass_token.tooltip_description }}</p>
                        {% if pass_token.tooltip_shoptalk %}<p class="tt-shoptalk"><em>{{ pass_token.tooltip_shoptalk }}</em></p>{% endif %}
                        <p class="tt-expiry">{{ pass_token.tooltip_expiry }}</p>
                    </div>
                </div>
                {% endif %}
                {% if band %}
                <div id="id_kit_wristband" class="token" data-token-id="{{ band.pk }}">
                    <i class="fa-solid fa-ring"></i>
                    <div class="tt">
                        <div class="tt-equip-btns">
                            {% if band.pk == equipped_trinket_id %}<button class="btn btn-equip btn-disabled" data-token-id="{{ band.pk }}">×</button><button class="btn btn-unequip" data-token-id="{{ band.pk }}">DOFF</button>{% else %}<button class="btn btn-equip" data-token-id="{{ band.pk }}">DON</button><button class="btn btn-unequip btn-disabled" data-token-id="{{ band.pk }}">×</button>{% endif %}
                        </div>
                        <h4 class="tt-title">{{ band.tooltip_name }}</h4>
                        <p class="tt-description">{{ band.tooltip_description }}</p>
                        {% if band.tooltip_shoptalk %}<p class="tt-shoptalk"><em>{{ band.tooltip_shoptalk }}</em></p>{% endif %}
                        <p class="tt-expiry">{{ band.tooltip_expiry }}</p>
                    </div>
                </div>
                {% endif %}
                {% if carte %}
                <div id="id_kit_carte_blanche" class="token" data-token-id="{{ carte.pk }}" data-current-room-name="{{ carte.current_room.name|default:'' }}">
                    <i class="fa-solid fa-money-check"></i>
                    <div class="tt">
                        <div class="tt-equip-btns">
                            {% if carte.current_room %}<button class="btn btn-equip btn-disabled" data-token-id="{{ carte.pk }}">×</button><button class="btn btn-unequip btn-disabled" data-token-id="{{ carte.pk }}">×</button>{% elif carte.pk == equipped_trinket_id %}<button class="btn btn-equip btn-disabled" data-token-id="{{ carte.pk }}">×</button><button class="btn btn-unequip" data-token-id="{{ carte.pk }}">DOFF</button>{% else %}<button class="btn btn-equip" data-token-id="{{ carte.pk }}">DON</button><button class="btn btn-unequip btn-disabled" data-token-id="{{ carte.pk }}">×</button>{% endif %}
                        </div>
                        <h4 class="tt-title">{{ carte.tooltip_name }}</h4>
                        <p class="tt-description">{{ carte.tooltip_description }}</p>
                        {% if carte.tooltip_shoptalk %}<p class="tt-shoptalk"><em>{{ carte.tooltip_shoptalk }}</em></p>{% endif %}
                        <p class="tt-expiry">{{ carte.tooltip_expiry }}</p>
                    </div>
                </div>
                {% endif %}
                {% if coin %}
                <div id="id_kit_coin_on_a_string" class="token" data-token-id="{{ coin.pk }}" data-current-room-name="{{ coin.current_room.name|default:'' }}">
                    <i class="fa-solid fa-medal"></i>
                    <div class="tt">
                        <div class="tt-equip-btns">
                            {% if coin.current_room %}<button class="btn btn-equip btn-disabled" data-token-id="{{ coin.pk }}">×</button><button class="btn btn-unequip btn-disabled" data-token-id="{{ coin.pk }}">×</button>{% elif coin.pk == equipped_trinket_id %}<button class="btn btn-equip btn-disabled" data-token-id="{{ coin.pk }}">×</button><button class="btn btn-unequip" data-token-id="{{ coin.pk }}">DOFF</button>{% else %}<button class="btn btn-equip" data-token-id="{{ coin.pk }}">DON</button><button class="btn btn-unequip btn-disabled" data-token-id="{{ coin.pk }}">×</button>{% endif %}
                        </div>
                        <h4 class="tt-title">{{ coin.tooltip_name }}</h4>
                        <p class="tt-description">{{ coin.tooltip_description }}</p>
                        {% if coin.tooltip_shoptalk %}<p class="tt-shoptalk"><em>{{ coin.tooltip_shoptalk }}</em></p>{% endif %}
                        <p class="tt-expiry">{{ coin.tooltip_expiry }}</p>
                    </div>
                </div>
                {% endif %}
                {% if not pass_token and not band and not carte and not coin %}
                <p class="gk-empty"><em>No trinkets yet.</em></p>
                {% endif %}
            </div>
        </section>
        {% endif %}

        {% if entry.applet.slug == 'gk-tokens' and entry.visible %}
        <section id="id_gk_tokens" style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};">
            <h2>Tokens</h2>
            {% comment %}
            Free + Tithe tokens stack to ONE icon per type — the count
            renders both in the .tt-title (×N chip) and on the icon itself
            via `.shop-badge` (parity w. wallet.html's Tithe Bundle badge).
            Single-token case OMITS the badge (user spec). Cap at "99+" so
            a runaway count can't overflow the 1.5rem badge circle.
            {% endcomment %}
            <div class="gk-items">
                {% if free_tokens %}
                {% with free_tokens.0 as token %}
                <div id="id_kit_free_token" class="token">
                    <i class="fa-solid fa-coins"></i>
                    {% if free_count > 1 %}<span class="shop-badge">{% if free_count > 99 %}99+{% else %}{{ free_count }}{% endif %}</span>{% endif %}
                    <div class="tt">
                        <h4 class="tt-title">{{ token.tooltip_name }}{% if free_count > 1 %} <span class="token-count">(×{% if free_count > 99 %}99+{% else %}{{ free_count }}{% endif %})</span>{% endif %}</h4>
                        <p class="tt-description">{{ token.tooltip_description }}</p>
                        {% if token.tooltip_shoptalk %}<p class="tt-shoptalk"><em>{{ token.tooltip_shoptalk }}</em></p>{% endif %}
                        <p class="tt-expiry">{{ token.tooltip_expiry }}</p>
                    </div>
                </div>
                {% endwith %}
                {% endif %}
                {% if tithe_tokens %}
                {% with tithe_tokens.0 as token %}
                <div id="id_kit_tithe_token" class="token">
                    {# `fa-piggy-bank` is the canonical tithe-token glyph —    #}
                    {# matches wallet (_applet-wallet-tokens.html), kit bag    #}
                    {# (_kit_bag_panel.html), shop seed (0009_seed_shop_items) #}
                    {# + FTs. The pre-rewrite version of this template used    #}
                    {# `fa-hand-holding-dollar` — sole outlier, now aligned.   #}
                    <i class="fa-solid fa-piggy-bank"></i>
                    {% if tithe_count > 1 %}<span class="shop-badge">{% if tithe_count > 99 %}99+{% else %}{{ tithe_count }}{% endif %}</span>{% endif %}
                    <div class="tt">
                        <h4 class="tt-title">{{ token.tooltip_name }}{% if tithe_count > 1 %} <span class="token-count">(×{% if tithe_count > 99 %}99+{% else %}{{ tithe_count }}{% endif %})</span>{% endif %}</h4>
                        <p class="tt-description">{{ token.tooltip_description }}</p>
                        <p class="tt-expiry">{{ token.tooltip_expiry }}</p>
                    </div>
                </div>
                {% endwith %}
                {% endif %}
                {% if not free_tokens and not tithe_tokens %}
                <p class="gk-empty"><em>No tokens yet.</em></p>
                {% endif %}
            </div>
        </section>
        {% endif %}

        {% if entry.applet.slug == 'gk-decks' and entry.visible %}
        <section id="id_gk_decks" style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};">
            <h2>Card Decks</h2>
            <div class="gk-items">
                {% for deck in deck_variants %}
                <div id="id_kit_{{ deck.short_key }}_deck" class="gk-deck-card token deck-variant" data-deck-id="{{ deck.pk }}" data-in-use-room-name="{{ deck.in_use_room_name|default:'' }}">
                    {% include "apps/gameboard/_partials/_deck_stack_icon.html" %}
                    <div class="tt">
                        <div class="tt-equip-btns">
                            {% if deck.in_use_room_name %}<button class="btn btn-equip btn-disabled" data-deck-id="{{ deck.pk }}">×</button><button class="btn btn-unequip btn-disabled" data-deck-id="{{ deck.pk }}">×</button>{% elif deck.pk == equipped_deck_id %}<button class="btn btn-equip btn-disabled" data-deck-id="{{ deck.pk }}">×</button><button class="btn btn-unequip" data-deck-id="{{ deck.pk }}">DOFF</button>{% else %}<button class="btn btn-equip" data-deck-id="{{ deck.pk }}">DON</button><button class="btn btn-unequip btn-disabled" data-deck-id="{{ deck.pk }}">×</button>{% endif %}
                        </div>
                        <h4 class="tt-title">{{ deck.name }}{% if deck.is_default %} <span class="token-count">(Default)</span>{% endif %}</h4>
                        <p class="tt-description">{{ deck.card_count }}-card Tarot deck{% if deck.is_polarized %} <span class="tt-x2">(×2)</span>{% endif %}</p>
                        {% if deck.description %}<p class="tt-shoptalk"><em>{{ deck.description }}</em></p>{% endif %}
                        <p class="tt-shoptalk">Stock version <span class="tt-subcounter">(0 substitutions)</span></p>
                    </div>
                </div>
                {% empty %}
                <p class="gk-empty"><em>No decks unlocked.</em></p>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        {% if entry.applet.slug == 'gk-dice' and entry.visible %}
        <section id="id_gk_dice" style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};">
            <h2>Dice Sets</h2>
            <div class="gk-items">
                {% include "core/_partials/_forthcoming.html" %}
            </div>
        </section>
        {% endif %}

        {% if entry.applet.slug == 'pronouns' and entry.visible %}
        <section id="id_gk_pronouns" style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};">
            <h2>Pronouns</h2>
            <div class="gk-items">
                {% for opt in pronoun_options %}
                <div class="gk-pronoun-card{% if opt.active %} active{% endif %}" data-pronoun="{{ opt.key }}" data-trio="{{ opt.label }}">
                    <span class="gk-pronoun-label">{{ opt.key }}</span>
                </div>
                {% endfor %}
            </div>
        </section>
        {% endif %}
    {% endfor %}
    </div>
</div>
