<section
    id="id_wallet_shop"
    class="wallet-shop"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
    data-default-payment-method-id="{{ default_payment_method_id }}"
    data-stripe-publishable-key="{{ stripe_publishable_key }}"
>
    <h2>Shop</h2>
    <div class="shop-grid">
    {% for item in shop_items %}
        <div
            id="id_shop_{{ item.slug }}"
            class="shop-tile"
            data-shop-item-slug="{{ item.slug }}"
            data-price-cents="{{ item.price_cents }}"
            data-item-name="{{ item.name }}"
        >
            <i class="fa-solid {{ item.icon }}"></i>
            {% if item.badge_text %}
                <span class="shop-badge">{{ item.badge_text }}</span>
            {% endif %}
            <div class="tt">
                {# DRY-reuses the Tokens row's 4-slot tooltip pattern — same #}
                {# `.tt-title/.tt-description/.tt-shoptalk/.tt-expiry` SCSS  #}
                {# classes so shop + token tooltips render as the same widget.#}
                {# Price lives inside the h4 (which already has flex space-  #}
                {# between for `.token-count`-style chips) so it pins top-   #}
                {# right opposite the name — `.tt-price` styled --priGn.    #}
                <h4 class="tt-title">
                    <span>{{ item.name }}</span>
                    <span class="tt-price">{{ item.price_display }}</span>
                </h4>
                <p class="tt-description">{{ item.description }}</p>
                {% if item.shoptalk %}
                    <p class="tt-shoptalk"><em>{{ item.shoptalk }}</em></p>
                {% endif %}
                <p class="tt-expiry">{{ item.tooltip_expiry }}</p>
            </div>
            {% comment %}
            Sibling-of-.tt microtooltip — mirrors Game Kit's
            Equipped/Unequipped/In-Use mini portal pattern. wallet.js's
            tooltip handler clones this into #id_mini_tooltip_portal on
            hover; staying separate keeps the BUY-ITEM btn visually
            distinct from the main name+price card.
            {% endcomment %}
            <div class="tt-micro">
                {% if item.available %}
                    <button
                        type="button"
                        class="btn btn-primary tt-buy-btn"
                        data-shop-item-slug="{{ item.slug }}"
                        data-item-name="{{ item.name }}"
                        data-price-cents="{{ item.price_cents }}"
                    >BUY ITEM</button>
                {% else %}
                    {# Capped item — no BUY btn at all (parity w. Game Kit's   #}
                    {# 'In-Use: X' / 'Equipped' microtext pattern, which never #}
                    {# pairs status text w. a disabled action btn).            #}
                    <span class="tt-already-owned">Already owned</span>
                {% endif %}
            </div>
        </div>
    {% endfor %}
    </div>
</section>
