{% extends "core/base.html" %}

{% block title_text %}Gameboard{% endblock title_text %}
{% block header_text %}Gameboard{% endblock header_text %}

{% block content %}
    <div class="gameboard-page">
        <section id="id_applet_my_games">
            <h2>My Games</h2>
        </section>

        <section id="id_applet_new_game">
            <h2>New Game</h2>
        </section>

        <div id="id_game_gear"></div>
        <button
            id="id_game_kit_btn"
            onclick="document.getElementById('id_game_kit').style.display='block'"
        >
            Game Kit
        </button>
        <div id="id_game_kit" style="display:none;">
            {% if coin %}
                <div id="id_kit_coin_on_a_string" class="token">
                    <i class="fa-solid fa-clover"></i>
                    <span class="token-tooltip">{{ coin.tooltip_text }}</span>
                </div>
            {% endif %}
            {% for token in free_tokens %}
                <div id="id_kit_free_token_{{ forloop.counter0 }}" class="token">
                    <i class="fa-solid fa-coins"></i>
                    <span class="token-tooltip">{{ token.tooltip_text }}</span>
                </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>
    </div>
{% endblock content %}