<section
    id="id_applet_game_kit"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2><a href="{% url 'game_kit' %}">Game Kit</a></h2>
    <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 %}">
        {% 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 %}
        {# Free Tokens REMOVED from Game Kit applet — they're not equippable. #}
        {# Now displayed in the My Wallet applet (`_applet-wallet.html` on    #}
        {# /dashboard/) alongside Tithe Tokens + Writs (user spec 2026-05-25  #}
        {# PM). Only equippables (PASS/BAND/CARTE/COIN trinkets, decks, dice) #}
        {# belong in Game Kit since this is the equip surface.                 #}
        {% for deck in deck_variants %}
        <div id="id_kit_{{ deck.short_key }}_deck" class="token deck-variant" data-deck-id="{{ deck.pk }}" data-in-use-room-name="{{ deck.in_use_room_name|default:'' }}">
            {# Sprint A.4 — card-deck stack icon replaces the old fa-id-badge. #}
            {# 3 stacked card-back rects (5° rest tilt); the .token:hover/:active #}
            {# /:focus pseudo-classes drive the fan-out + tooltip portal in lockstep. #}
            {% 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 %}
        <div id="id_kit_card_deck" class="kit-item">{% include "apps/gameboard/_partials/_deck_stack_icon.html" %}</div>
        {% endfor %}
        <div id="id_kit_dice_set" class="kit-item"><i class="fa-solid fa-dice"></i></div>
    </div>
</section>
