<div id="id_gk_sections_container">
    {% for entry in applets %}
        {% if entry.applet.slug == 'gk-trinkets' and entry.visible %}
        <section id="id_gk_trinkets" style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};">
            <h2>Trinkets</h2>
            <div class="gk-items">
                {% if pass_token %}
                <div class="gk-trinket-card" data-token-id="{{ pass_token.pk }}">
                    <i class="fa-solid fa-clipboard"></i>
                    <span>{{ pass_token.tooltip_name }}</span>
                </div>
                {% endif %}
                {% if band %}
                <div class="gk-trinket-card" data-token-id="{{ band.pk }}">
                    <i class="fa-solid fa-ring"></i>
                    <span>{{ band.tooltip_name }}</span>
                </div>
                {% endif %}
                {% if carte %}
                <div class="gk-trinket-card" data-token-id="{{ carte.pk }}">
                    <i class="fa-solid fa-money-check"></i>
                    <span>{{ carte.tooltip_name }}</span>
                </div>
                {% endif %}
                {% if coin %}
                <div class="gk-trinket-card" data-token-id="{{ coin.pk }}">
                    <i class="fa-solid fa-medal"></i>
                    <span>{{ coin.tooltip_name }}</span>
                </div>
                {% endif %}
                {% if not pass_token and not band and not carte and not coin %}
                <p class="gk-empty"><em>No trinkets yet.</em></p>
                {% endif %}
            </div>
        </section>
        {% endif %}

        {% if entry.applet.slug == 'gk-tokens' and entry.visible %}
        <section id="id_gk_tokens" style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};">
            <h2>Tokens</h2>
            <div class="gk-items">
                {% for token in free_tokens %}
                <div class="gk-token-card" data-token-id="{{ token.pk }}">
                    <i class="fa-solid fa-coins"></i>
                    <span>{{ token.tooltip_name }}</span>
                </div>
                {% endfor %}
                {% for token in tithe_tokens %}
                <div class="gk-token-card" data-token-id="{{ token.pk }}">
                    <i class="fa-solid fa-hand-holding-dollar"></i>
                    <span>{{ token.tooltip_name }}</span>
                </div>
                {% endfor %}
                {% if not free_tokens and not tithe_tokens %}
                <p class="gk-empty"><em>No tokens yet.</em></p>
                {% endif %}
            </div>
        </section>
        {% endif %}

        {% if entry.applet.slug == 'gk-decks' and entry.visible %}
        <section id="id_gk_decks" style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};">
            <h2>Card Decks</h2>
            <div class="gk-items">
                {% for deck in unlocked_decks %}
                <div class="gk-deck-card" data-deck-id="{{ deck.pk }}">
                    <i class="fa-regular fa-id-badge"></i>
                    <span>{{ deck.name }}</span>
                    <small>{{ deck.card_count }} cards</small>
                </div>
                {% empty %}
                <p class="gk-empty"><em>No decks unlocked.</em></p>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        {% if entry.applet.slug == 'gk-dice' and entry.visible %}
        <section id="id_gk_dice" style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};">
            <h2>Dice Sets</h2>
            <div class="gk-items">
                {% include "core/_partials/_forthcoming.html" %}
            </div>
        </section>
        {% endif %}

        {% if entry.applet.slug == 'pronouns' and entry.visible %}
        <section id="id_gk_pronouns" style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};">
            <h2>Pronouns</h2>
            <div class="gk-items">
                {% for opt in pronoun_options %}
                <div class="gk-pronoun-card{% if opt.active %} active{% endif %}" data-pronoun="{{ opt.key }}" data-trio="{{ opt.label }}">
                    <span class="gk-pronoun-label">{{ opt.key }}</span>
                </div>
                {% endfor %}
            </div>
        </section>
        {% endif %}
    {% endfor %}
</div>
