{% load i18n %}
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>

<!-- Encoded data payload and decoder -->
<script type="application/json" id="{{data_element_id}}">{{encoded_mapping|safe}}</script>
<script type="text/javascript">{{obf_decoder|safe}}</script>

<div class="gamesxblock gamesxblock-flashcards">
    <!-- Header -->
    <div class="flashcards-header">
        <h1 class="flashcards-title">{{title}}</h1>
    </div>

    <div class="flashcards-start-screen">
        <h1 class="flashcards-start-title">{% trans "Click each card to reveal the definition" %}</h1>
        <button class="flashcards-start-button" {% if list_length <= 0 %}disabled{% endif %}>{% trans "Start" %}</button>
    </div>

    <!-- Main Card Area -->
    <div class="flashcards-card-wrapper">
        <div class="flashcard-block" id="flashcard-card" draggable="false" tabindex="0" role="button" aria-pressed="false">
            <div class="flashcard-inner">
                <div class="flashcard-face flashcard-front">
                    <div class="flashcard-front-content">
                        <img id="flashcard-term-image" class="image" alt="Flashcard term" />
                        <div class="flashcard-text" id="flashcard-term">&nbsp;</div>
                    </div>
                </div>
                <div class="flashcard-face flashcard-back">
                    <div class="flashcard-back-content">
                        <img id="flashcard-definition-image" class="image" alt="Flashcard definition" />
                        <div class="flashcard-text" id="flashcard-definition">&nbsp;</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer Navigation -->
    <div class="flashcard-footer">
        <div></div>
        <div class="flashcard-navigation">
            <button type="button" class="flashcard-left-button" id="flashcard-prev" aria-label="{% trans 'Previous card' %}" title="{% trans 'Previous card' %}">
                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12" fill="none">
                    <path d="M6.00016 12L7.41016 10.59L2.83016 6L7.41016 1.41L6.00016 -1.23266e-07L0.000155973 6L6.00016 12Z" fill="#00262B"/>
                </svg>
            </button>
            <div class="flashcard-navigation-text"><span id="flashcard-progress">1</span>/{{list_length}}</div>
            <button type="button" class="flashcard-right-button" id="flashcard-next" aria-label="{% trans 'Next card' %}" title="{% trans 'Next card' %}">
                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12" fill="none">
                    <path d="M1.41 0L0 1.41L4.58 6L0 10.59L1.41 12L7.41 6L1.41 0Z" fill="#00262B"/>
                </svg>
            </button>
        </div>
        <div class="flashcard-help-wrapper">
            <div class="flashcard-help-icon" id="flashcard-help" aria-label="{% trans 'Help' %}" role="button" tabindex="0">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M9 16H11V14H9V16ZM10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM10 4C7.79 4 6 5.79 6 8H8C8 6.9 8.9 6 10 6C11.1 6 12 6.9 12 8C12 10 9 9.75 9 13H11C11 10.75 14 10.5 14 8C14 5.79 12.21 4 10 4Z" fill="#00262B"/>
                </svg>
            </div>
            <div class="help-popover">
                <div class="help-popover-content">
                    {% trans "Click each card to reveal the definition" %}
                </div>
                <div class="help-popover-arrow"></div>
            </div>
        </div>
    </div>
</div>