<section
    id="id_applet_wallet"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2><a href="{% url "wallet" %}" class="wallet-manage-link">My Wallet</a></h2>
    {% comment %}
    `id="id_game_kit"` lets `gameboard.js`'s `initGameKitTooltips()` scope its
    `.token` query here. `display: contents` (in `_game-kit.scss`) keeps this
    wrapper layout-invisible so the section's own grid still applies. Trinkets
    (PASS/BAND/CARTE/COIN) COPY the Game Kit applet's tooltip + DON/DOFF
    wiring so the user can equip from either surface; Free + Tithe tokens MOVE
    here from Game Kit (they aren't equippable). Writs uses the same `.token`
    + `.tt` chrome so all four item types read as one consistent inventory row.
    {% endcomment %}
    <div id="id_game_kit" class="wallet-items" data-equipped-id="{{ equipped_trinket_id|default:'' }}" data-equipped-deck-id="" data-in-use-deck-ids="">
        {% if pass_token %}
        <div id="id_wallet_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_wallet_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_wallet_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_wallet_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 free_tokens %}
        {% with free_tokens.0 as token %}
        <div id="id_wallet_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_wallet_tithe_token" class="token">
            <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 %}
        {# Writs placeholder — currency tier (NOT a Token model row). Tooltip  #}
        {# mirrors the Token-style chrome so the row reads as one inventory.   #}
        {# Count lives in the badge (Writs count > 0); empty case still renders #}
        {# the icon since Writs are the base balance unit.                    #}
        <div id="id_wallet_writs" class="token">
            <i class="fa-solid fa-ticket"></i>
            {% if user.wallet.writs > 0 %}<span class="shop-badge">{% if user.wallet.writs > 99 %}99+{% else %}{{ user.wallet.writs }}{% endif %}</span>{% endif %}
            <div class="tt">
                <h4 class="tt-title">Writs{% if user.wallet.writs > 0 %} <span class="token-count">(×{% if user.wallet.writs > 99 %}99+{% else %}{{ user.wallet.writs }}{% endif %})</span>{% endif %}</h4>
                <p class="tt-description">Base currency unit</p>
                <p class="tt-shoptalk"><em>Earned at the gate; spent in the shop.</em></p>
            </div>
        </div>
    </div>
</section>
