{% 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>
            {% comment %}
            DRY stat-face — see `core/_partials/_stat_face.html`. JS-
            populated; keyword ul carries id for stage-card.js's
            populateKeywords opts override (game-kit.js passes
            uprightSel/reversedSel pointing at these IDs).
            {% endcomment %}
            {% include "core/_partials/_stat_face.html" with face_modifier="upright" label_text="Emanation" keywords_ul_id="id_fan_stat_upright" %}
            {% include "core/_partials/_stat_face.html" with face_modifier="reversed" label_text="Reversal" keywords_ul_id="id_fan_stat_reversed" %}
            {% 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 %}