python-tdd/src/templates/apps/gameboard/_partials/_applet-game-kit.html

<section
    id="id_applet_game_kit"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2>Game Kit</h2>
    <div id="id_game_kit">
        {% if coin %}
            <div id="id_kit_coin_on_a_string" class="token">
                <i class="fa-solid fa-clover"></i>
                <div class="token-tooltip">
                    <h4>{{ coin.tooltip_name }}</h4>
                    <p>
                        {{ coin.tooltip_description }}
                    </p>
                    {% if coin.tooltip_shoptalk %}
                        <small><em>{{ coin.tooltip_shoptalk }}</em></small>
                    {% endif %}
                    <p class="expiry">{{ coin.tooltip_expiry }}</p>
                </div>
            </div>
        {% endif %}
        {% for token in free_tokens %}
            <div id="id_kit_free_token_{{ forloop.counter0 }}" class="token">
                <i class="fa-solid fa-coins"></i>
                <div class="token-tooltip">
                    <h4>{{ token.tooltip_name }}</h4>
                    <p>
                        {{ token.tooltip_description }}
                    </p>
                    {% if token.tooltip_shoptalk %}
                        <small><em>{{ token.tooltip_shoptalk }}</em></small>
                    {% endif %}
                    <p class="expiry">{{ token.tooltip_expiry }}</p>
                </div>
            </div>
        {% endfor %}
        <div id="id_kit_card_deck" class="kit-item"><i class="fa-regular fa-id-badge"></i></div>
        <div id="id_kit_dice_set" class="kit-item"><i class="fa-solid fa-dice"></i></div>
    </div>
</section>