{% extends "base.html" %}

{% block title %}✨ Magisches Harry-Potter-Escape-Quiz ✨{% endblock %}

{% block content %}
<div class="quiz-wrapper">
    <header class="quiz-header">
        <h1 class="glow-title">✨ Magisches Hogwarts-Escape-Quiz ✨</h1>
        <p class="subtitle">15 knifflige Rätsel aus der Zauberwelt warten auf dich</p>
    </header>

    <!-- Brief-Intro / Startmaske -->
    <div id="introCard" class="card intro-card">
        <div class="intro-envelope" id="envelope">
            <div class="envelope-body">
                <div class="envelope-flap"></div>
                <div class="wax-seal">H</div>
                <div class="letter-preview">
                    <p class="letter-text">Hogwarts-Schule für Hexerei und Zauberei</p>
                </div>
            </div>
        </div>
        <div class="intro-content">
            <p class="intro-text">
                Ein verzauberter Brief aus Hogwarts schwebt vor dir in der Luft.<br>
                Bist du bereit, die Prüfungen abzulegen und deine Hauspunkte zu sichern?
            </p>
            <button id="startBtn" class="btn btn-primary btn-large" onclick="startGame()">
                📜 Siegel brechen & Brief öffnen
            </button>
        </div>
    </div>

    <!-- Spielbereich (initial versteckt) -->
    <div id="gameCard" class="game-area hidden">
        <!-- Fortschritt & Punkte -->
        <div class="status-panel">
            <div class="progress-info">
                <span id="questionCounter">Frage 1 von {{ question_count }}</span>
                <span id="pointsCounter" class="points-badge">🏆 Hauspunkte: 0</span>
            </div>
            <div class="progress-container">
                <div id="progressBar" class="progress-bar"></div>
            </div>
        </div>

        <!-- Frage-Container -->
        <div id="frageBox" class="card question-card">
            <div class="question-meta">
                <span id="badgeCategory" class="badge">⚡ Harry Potter</span>
                <span id="attemptBadge" class="attempt-badge">Versuch 1 von 3</span>
            </div>

            <h2 id="frageText" class="question-text">Lade verzauberte Schriftrollen...</h2>

            <!-- Freitext-Eingabe (wenn question_type == 'text') -->
            <div id="textAnswerGroup" class="answer-form">
                <input type="text" id="answerInput" class="input-answer" placeholder="Deine Antwort hier eingeben..." autocomplete="off">
                
                <div class="btn-group">
                    <button id="checkBtn" class="btn btn-primary" onclick="checkAnswer()">
                        ✨ Zauber prüfen
                    </button>
                    <button id="hintBtn" class="btn btn-secondary" onclick="requestHint()">
                        💡 Zaubertipp
                    </button>
                </div>
            </div>

            <!-- Multiple-Choice-Auswahl (wenn question_type == 'multiple_choice') -->
            <div id="choiceAnswerGroup" class="choice-group hidden">
                <div id="choiceOptionsContainer" class="choice-grid"></div>
                <div class="btn-group" style="margin-top: 15px;">
                    <button id="hintBtnMC" class="btn btn-secondary" onclick="requestHint()">
                        💡 Zaubertipp
                    </button>
                </div>
            </div>

            <div id="hintBox" class="hint-box hidden">
                <strong>📜 Notiz aus der verbotenen Abteilung:</strong>
                <p id="hintText"></p>
            </div>

            <div id="feedbackBox" class="feedback-box"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/quiz.js"></script>
{% endblock %}