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

{% block title_text %}Game Kit{% endblock title_text %}
{% block header_text %}<span>Game</span>Kit{% endblock header_text %}

{% block content %}
<div class="gameboard-page">
    {% include "apps/applets/_partials/_gear.html" with menu_id="id_game_kit_menu" %}
    {% include "apps/gameboard/_partials/_game_kit_applet_menu.html" %}
    <div id="id_game_kit_applets_container">
        {% include "apps/gameboard/_partials/_game_kit_sections.html" %}
    </div>
</div>

<dialog id="id_tarot_fan_dialog">
    <div class="tarot-fan-wrap">
        <button id="id_fan_prev" class="fan-nav fan-nav--prev" aria-label="Previous card">&#8249;</button>
        <div id="id_fan_content" class="tarot-fan"></div>
        <button id="id_fan_flip" class="btn btn-reveal fan-flip-btn" type="button">FLIP</button>
        <div class="fan-stage-block sig-stat-block" id="id_fan_stage_block">
            <button class="btn btn-reverse spin-btn" type="button">SPIN</button>
            <button class="btn btn-info fyi-btn" type="button">FYI</button>
            <div class="stat-face stat-face--upright">
                <p class="stat-face-label">Emanation</p>
                <ul class="stat-keywords" id="id_fan_stat_upright"></ul>
            </div>
            <div class="stat-face stat-face--reversed">
                <p class="stat-face-label">Reversal</p>
                <ul class="stat-keywords" id="id_fan_stat_reversed"></ul>
            </div>
            {% include "apps/gameboard/_partials/_sig_fyi_panel.html" with panel_id="id_fan_fyi_panel" panel_extra_attrs='style="display:none"' %}
        </div>
        <button id="id_fan_next" class="fan-nav fan-nav--next" aria-label="Next card">&#8250;</button>
    </div>
</dialog>
{% endblock content %}

{% block scripts %}
    <script src="{% static 'apps/epic/stage-card.js' %}"></script>
    <script src="{% static 'apps/gameboard/game-kit.js' %}"></script>
{% endblock scripts %}