{% extends "base.html" %}

{% block title %}{% if lang == 'en' %}🎉 The Grand Finale – Magical Quiz{% else %}🎉 Das große Finale – Magisches Quiz{% endif %}{% endblock %}

{% block content %}
<div class="quiz-wrapper">
    <div class="card finale-card">
        <div class="finale-header">
            <span class="sparkle-icon">✨</span>
            <h1 class="glow-title" id="finaleTitle">🎉 Happy Birthday Schatz! 🎉</h1>
            <span class="sparkle-icon">✨</span>
        </div>

        <div class="score-banner">
            <p class="score-highlight" id="finaleScoreText">
                {% if lang == 'en' %}
                You secured <span class="gold-text">{{ score }}</span> out of <span class="gold-text">{{ total }}</span> possible House Points for your House!
                {% else %}
                Du hast <span class="gold-text">{{ score }}</span> von <span class="gold-text">{{ total }}</span> möglichen Hauspunkten für dein Haus gesichert!
                {% endif %}
            </p>
        </div>

        <div class="reward-box">
            <h2 id="rewardTitle">
                {% if lang == 'en' %}
                💛 Your Magical Reward: An Unforgettable Evening at Home 💛
                {% else %}
                💛 Dein magischer Gewinn: Ein unvergesslicher Abend Zuhause 💛
                {% endif %}
            </h2>
            <p class="reward-description" id="rewardDesc">
                {% if lang == 'en' %}
                We'll order delicious food and make ourselves totally comfortable: relax, laugh, and enjoy quality time together.<br><br>
                Plus, we'll play a brand new <strong>Online Escape Game</strong> of your choice!
                {% else %}
                Wir holen uns lecker Essen und machen es uns so richtig gemütlich: entspannen, lachen und die gemeinsame Zeit genießen.<br><br>
                Dazu spielen wir ein brandneues <strong>Online Escape Game</strong> deiner Wahl!
                {% endif %}
            </p>
            <p class="love-note" id="loveNote">
                {% if lang == 'en' %}
                I'm so excited for our wonderful evening together! 💫
                {% else %}
                Ich freue mich riesig auf unseren gemeinsamen Abend! 💫
                {% endif %}
            </p>
        </div>

        <div class="btn-group finale-actions">
            <a href="/" class="btn btn-primary" id="playAgainBtn">
                {% if lang == 'en' %}🔄 Play Again{% else %}🔄 Erneut spielen{% endif %}
            </a>
            <a href="/vorschlag" class="btn btn-secondary" id="suggestBtn">
                {% if lang == 'en' %}✍️ Suggest Your Own Question{% else %}✍️ Eigene Frage vorschlagen{% endif %}
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const finaleScore = {{ score }};
    const finaleTotal = {{ total }};

    function onLanguageChange(lang) {
        const isDe = lang === "de";
        const title = document.getElementById("finaleTitle");
        const scoreText = document.getElementById("finaleScoreText");
        const rewardTitle = document.getElementById("rewardTitle");
        const rewardDesc = document.getElementById("rewardDesc");
        const loveNote = document.getElementById("loveNote");
        const playAgain = document.getElementById("playAgainBtn");
        const suggest = document.getElementById("suggestBtn");

        if (title) title.innerText = isDe ? "🎉 Happy Birthday Schatz! 🎉" : "🎉 Happy Birthday Darling! 🎉";
        if (scoreText) {
            scoreText.innerHTML = isDe
                ? `Du hast <span class="gold-text">${finaleScore}</span> von <span class="gold-text">${finaleTotal}</span> möglichen Hauspunkten für dein Haus gesichert!`
                : `You secured <span class="gold-text">${finaleScore}</span> out of <span class="gold-text">${finaleTotal}</span> possible House Points for your House!`;
        }
        if (rewardTitle) {
            rewardTitle.innerText = isDe
                ? "💛 Dein magischer Gewinn: Ein unvergesslicher Abend Zuhause 💛"
                : "💛 Your Magical Reward: An Unforgettable Evening at Home 💛";
        }
        if (rewardDesc) {
            rewardDesc.innerHTML = isDe
                ? "Wir holen uns lecker Essen und machen es uns so richtig gemütlich: entspannen, lachen und die gemeinsame Zeit genießen.<br><br>Dazu spielen wir ein brandneues <strong>Online Escape Game</strong> deiner Wahl!"
                : "We'll order delicious food and make ourselves totally comfortable: relax, laugh, and enjoy quality time together.<br><br>Plus, we'll play a brand new <strong>Online Escape Game</strong> of your choice!";
        }
        if (loveNote) {
            loveNote.innerText = isDe
                ? "Ich freue mich riesig auf unseren gemeinsamen Abend! 💫"
                : "I'm so excited for our wonderful evening together! 💫";
        }
        if (playAgain) playAgain.innerText = isDe ? "🔄 Erneut spielen" : "🔄 Play Again";
        if (suggest) suggest.innerText = isDe ? "✍️ Eigene Frage vorschlagen" : "✍️ Suggest Your Own Question";
    }

    document.addEventListener("DOMContentLoaded", () => {
        onLanguageChange(currentLang);
    });
</script>
{% endblock %}