{% extends "base.html" %}

{% block title %}✍️ Neue Zauberfrage einreichen{% endblock %}

{% block content %}
<div class="quiz-wrapper">
    <div class="card vorschlag-card">
        <h1 class="glow-title" id="suggTitle">✍️ Neue Quiz-Frage einreichen</h1>
        <p class="subtitle" id="suggSubtitle">Bereichere PotterTrivia mit deinen eigenen Fragen zu Büchern, Filmen oder magischen Geschöpfen!</p>

        <div class="info-alert" id="suggAlert">
            ℹ️ <strong>Hinweis zur Moderation:</strong> Eingereichte Fragen werden kurz auf Richtigkeit geprüft, bevor sie im öffentlichen Quiz-Pool freigeschaltet werden.
        </div>

        <form id="suggestionForm" class="magic-form" onsubmit="submitSuggestion(event)">
            <div class="form-group">
                <label for="name" id="suggNameLabel">Dein Name / Zauberer-Alias (optional):</label>
                <input type="text" id="name" name="name" class="input-text" placeholder="z. B. Hermine Granger">
            </div>

            <div class="form-group">
                <label for="frage" id="suggFrageLabel">Deine Frage: <span class="required">*</span></label>
                <textarea id="frage" name="frage" class="textarea" rows="3" placeholder="z. B. Wie heißt der Schulleiter von Hogwarts?" required></textarea>
            </div>

            <div class="form-group">
                <label for="kategorie" id="suggCatLabel">Kategorie / Themenbereich:</label>
                <select id="kategorie" name="category" class="input-text">
                    <option value="books" id="catBooks">📖 Buchwissen (Buch-Details)</option>
                    <option value="movies" id="catMovies">🎬 Filmwissen (Kino & Drehorte)</option>
                    <option value="creatures" id="catCreatures">🐉 Magische Geschöpfe</option>
                    <option value="spells" id="catSpells">🪄 Zaubersprüche & Tränke</option>
                    <option value="characters" id="catCharacters" selected>🧙‍♂️ Charaktere & Personen</option>
                    <option value="hogwarts" id="catHogwarts">🏰 Hogwarts & Orte</option>
                    <option value="quidditch" id="catQuidditch">🧹 Quidditch & Sport</option>
                    <option value="lore" id="catLore">🔮 Artefakte & Geschichte</option>
                    <option value="general" id="catGeneral">⚡ Allgemeines Wissen</option>
                </select>
            </div>

            <div class="form-group">
                <label for="diff_select" id="suggDiffLabel">Schwierigkeitsgrad:</label>
                <select id="diff_select" name="difficulty" class="input-text">
                    <option value="easy">🟢 Leicht / Easy</option>
                    <option value="medium" selected>🟡 Mittel / Medium</option>
                    <option value="hard">🔴 Schwer / Hard</option>
                </select>
            </div>

            <div class="form-group">
                <label for="q_type" id="suggTypeLabel">Art der Frage:</label>
                <select id="q_type" name="q_type" class="input-text" onchange="toggleVorschlagType(this.value)">
                    <option value="text" selected id="optText">🔤 Freitext-Antwort (Tippen mit Fehlertoleranz)</option>
                    <option value="multiple_choice" id="optMC">🔘 Multiple Choice (Auswahl aus 4 Antwortmöglichkeiten)</option>
                </select>
            </div>

            <div class="form-group">
                <label for="antwort"><span id="antwortLabel">Richtige Antwort:</span> <span class="required">*</span></label>
                <input type="text" id="antwort" name="antwort" class="input-text" placeholder="z. B. Albus Dumbledore" required>
                <small class="field-help" id="antwortHelp">Unser System gleicht Tippfehler und Groß-/Kleinschreibung automatisch ab.</small>
            </div>

            <!-- Zusätzliche Optionen für Multiple Choice -->
            <div id="mcOptionsGroup" class="form-group hidden" style="background: rgba(255,255,255,0.03); padding: 15px; border-radius: 8px; border: 1px dashed var(--border-gold);">
                <label id="mcWrongLabel" style="color: var(--gold);">Falsche Antwortmöglichkeiten (zur Auswahl für die Spieler):</label>
                <input type="text" id="wrong1" class="input-text" placeholder="Falsche Option 1 (z. B. Severus Snape)" style="margin-bottom: 8px;">
                <input type="text" id="wrong2" class="input-text" placeholder="Falsche Option 2 (z. B. Minerva McGonagall)" style="margin-bottom: 8px;">
                <input type="text" id="wrong3" class="input-text" placeholder="Falsche Option 3 (z. B. Rubeus Hagrid)">
            </div>

            <div class="form-group">
                <label for="tipp" id="suggTippLabel">Tipp / Hinweis (optional):</label>
                <input type="text" id="tipp" name="tipp" class="input-text" placeholder="z. B. Er trägt eine Halbmondbrille.">
            </div>

            <button type="submit" id="submitBtn" class="btn btn-primary btn-large">
                📜 Vorschlag an das Ministerium senden
            </button>
        </form>

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

{% block scripts %}
<script src="/static/js/vorschlag.js?v=2.3"></script>
{% endblock %}