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

{% block title_text %}Game Kit{% endblock title_text %}
{% block header_text %}<span>Game</span><span>Kit</span>{% 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>
            {# Sprint A.7.5 — match the my_sign / sea_stage stat-block shape:  #}
            {# `.stat-face-header` w. chip + EMANATION/REVERSAL label, then    #}
            {# `.stat-face-title` + `.stat-face-arcana` (the carousel stat     #}
            {# block previously had only the keyword list; for image-mode      #}
            {# decks the stat block is the only home for textual metadata).   #}
            {# All four — chip rank, chip icon, title, arcana — populated by   #}
            {# stage-card.js's populateStatExtras on each card focus change.   #}
            <div class="stat-face stat-face--upright">
                <div class="stat-face-header">
                    <span class="stat-face-chip">
                        <span class="stat-chip-rank"></span>
                        <i class="fa-solid stat-chip-icon" style="display:none"></i>
                    </span>
                    <p class="stat-face-label">Emanation</p>
                </div>
                <p class="stat-face-title"></p>
                <p class="stat-face-arcana"></p>
                <ul class="stat-keywords" id="id_fan_stat_upright"></ul>
            </div>
            <div class="stat-face stat-face--reversed">
                <div class="stat-face-header">
                    <span class="stat-face-chip">
                        <span class="stat-chip-rank"></span>
                        <i class="fa-solid stat-chip-icon" style="display:none"></i>
                    </span>
                    <p class="stat-face-label">Reversal</p>
                </div>
                <p class="stat-face-title"></p>
                <p class="stat-face-arcana"></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>
    {# Brief.showBanner — needed for the Baltimorean Note-unlock banner the #}
    {# pronouns applet fires on first `bawlmorese` selection. #}
    <script src="{% static 'apps/dashboard/note.js' %}"></script>
    <script src="{% static 'apps/gameboard/game-kit.js' %}"></script>
{% endblock scripts %}