<div class="kit-bag-section">
    <span class="kit-bag-label">Deck</span>
    <div class="kit-bag-row">
        {% if equipped_deck %}
        <div class="kit-bag-deck" data-deck-id="{{ equipped_deck.pk }}">
            {% include "apps/gameboard/_partials/_deck_stack_icon.html" with deck=equipped_deck %}
            <div class="tt">
                <h4 class="tt-title">{{ equipped_deck.name }}{% if equipped_deck.is_default %} <span class="token-count">(Default)</span>{% endif %}</h4>
                <p class="tt-description">{{ equipped_deck.card_count }}-card Tarot deck{% if equipped_deck.is_polarized %} <span class="tt-x2">(×2)</span>{% endif %}</p>
                {% if equipped_deck.description %}<p class="tt-shoptalk"><em>{{ equipped_deck.description }}</em></p>{% endif %}
                <p class="tt-shoptalk">Stock version <span class="tt-subcounter">(0 substitutions)</span></p>
            </div>
        </div>
        {% else %}
        <div class="kit-bag-placeholder">
            {% include "apps/gameboard/_partials/_deck_stack_icon.html" %}
        </div>
        {% endif %}
    </div>
</div>

<div class="kit-bag-section">
    <span class="kit-bag-label">Dice</span>
    <div class="kit-bag-row">
        <div class="kit-bag-placeholder">
            <i class="fa-solid fa-dice"></i>
        </div>
    </div>
</div>

<div class="kit-bag-section kit-bag-section--trinket">
    <span class="kit-bag-label">Trinket</span>
    <div class="kit-bag-row">
        {% if equipped_trinket %}
        {% with token=equipped_trinket %}
        <div
            class="token"
            draggable="true"
            data-token-id="{{ token.id }}"
            data-token-type="{{ token.token_type }}"
        >
            {% if token.token_type == "coin" %}
                <i class="fa-solid fa-medal"></i>
            {% elif token.token_type == "carte" %}
                <i class="fa-solid fa-money-check"></i>
            {% elif token.token_type == "band" %}
                <i class="fa-solid fa-ring"></i>
            {% else %}
                <i class="fa-solid fa-clipboard"></i>
            {% endif %}
            <div class="tt">
                <h4 class="tt-title">{{ token.tooltip_name }}</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>
                {% with room_html=token.tooltip_room_html %}
                    {% if room_html %}{{ room_html|safe }}{% endif %}
                {% endwith %}
            </div>
        </div>
        {% endwith %}
        {% else %}
        <div class="kit-bag-placeholder">
            <i class="fa-solid fa-medal"></i>
        </div>
        {% endif %}
    </div>
</div>

<div class="kit-bag-section kit-bag-section--tokens">
    <span class="kit-bag-label">Tokens</span>
    <div class="kit-bag-row kit-bag-row--scroll">
        {% if free_token %}
        <div
            class="token"
            draggable="true"
            data-token-id="{{ free_token.id }}"
            data-token-type="{{ free_token.token_type }}"
        >
            <i class="fa-solid fa-coins"></i>
            <div class="tt">
                <h4 class="tt-title">{{ free_token.tooltip_name }}{% if free_count > 1 %} <span class="token-count">(×{{ free_count }})</span>{% endif %}</h4>
                <p class="tt-description">{{ free_token.tooltip_description }}</p>
                {% if free_token.tooltip_shoptalk %}
                    <p class="tt-shoptalk"><em>{{ free_token.tooltip_shoptalk }}</em></p>
                {% endif %}
                <p class="tt-expiry">{{ free_token.tooltip_expiry }}</p>
            </div>
        </div>
        {% endif %}
        {% if tithe_token %}
        <div
            class="token"
            draggable="true"
            data-token-id="{{ tithe_token.id }}"
            data-token-type="{{ tithe_token.token_type }}"
        >
            <i class="fa-solid fa-piggy-bank"></i>
            <div class="tt">
                <h4 class="tt-title">{{ tithe_token.tooltip_name }}{% if tithe_count > 1 %} <span class="token-count">(×{{ tithe_count }})</span>{% endif %}</h4>
                <p class="tt-description">{{ tithe_token.tooltip_description }}</p>
                <p class="tt-expiry">{{ tithe_token.tooltip_expiry }}</p>
            </div>
        </div>
        {% endif %}
        {% if not free_token and not tithe_token %}
        <div class="kit-bag-placeholder">
            <i class="fa-solid fa-coins"></i>
        </div>
        {% endif %}
    </div>
</div>
