python-tdd/src/templates/apps/wallet/_partials/_applet-wallet-tokens.html

<section
    class="wallet-tokens"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2>Tokens</h2>
    <div class="token-row">
    {% if pass_token %}
        <div id="id_pass_token" class="token">
            <i class="fa-solid fa-clipboard"></i>
            <div class="tt">
                <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>
    {% elif coin %}
        <div id="id_coin_on_a_string" class="token">
            <i class="fa-solid fa-medal"></i>
            <div class="tt">
                <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_free_token" class="token">
            <i class="fa-solid fa-coins"></i>
            <div class="tt">
                <h4 class="tt-title">{{ token.tooltip_name }}{% if free_count > 1 %} <span class="token-count">(×{{ free_count }})</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 %}
    {% else %}
        <div id="id_free_token_empty" class="token token--empty">
            <i class="fa-solid fa-coins"></i>
            <div class="tt">
                <h4 class="tt-title">Free Token</h4>
                <p class="tt-description">0 owned</p>
                <p class="tt-expiry">find one around</p>
            </div>
        </div>
    {% endif %}
    {% if tithe_tokens %}
        {% with tithe_tokens.0 as token %}
        <div id="id_tithe_token" class="token">
            <i class="fa-solid fa-piggy-bank"></i>
            <div class="tt">
                <h4 class="tt-title">{{ token.tooltip_name }}{% if tithe_count > 1 %} <span class="token-count">(×{{ tithe_count }})</span>{% endif %}</h4>
                <p class="tt-description">{{ token.tooltip_description }}</p>
                <p class="tt-expiry">{{ token.tooltip_expiry }}</p>
            </div>
        </div>
        {% endwith %}
    {% else %}
        <div id="id_tithe_token_empty" class="token token--empty">
            <i class="fa-solid fa-piggy-bank"></i>
            <div class="tt">
                <h4 class="tt-title">Tithe Token</h4>
                <p class="tt-description">0 owned</p>
                <p class="tt-expiry">purchase one above</p>
            </div>
        </div>
    {% endif %}
    </div>
</section>