{{ block title }}
    {{ t.final_title }}
{{ endblock }}

{{ block content }}

<div class="card shadow-sm mb-4">
    <div class="card-body text-center py-5">
        <h2 class="text-primary mb-4"><i class="bi bi-check-circle-fill"></i></h2>
        <h3 class="card-title text-primary mb-3">{{ t.final_thanks_heading }}</h3>
        
        <p class="lead text-muted mb-4">
            {{ t.final_lead }}
        </p>

        <div class="alert alert-light border d-inline-block text-start p-4" style="max-width: 700px;">
            <h5 class="fw-bold text-dark mb-3">{{ t.final_info_heading }}</h5>
            <ul class="mb-0">
                <li class="mb-2">
                    {{ t.final_li1|safe }}
                </li>
                <li class="mb-2">
                    {{ t.final_li2|safe }}
                </li>
                <li class="mb-0">
                    {{ t.final_li3|safe }}
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="text-center mb-5">
    <p class="mb-3">
        {{ t.final_rule_intro }}
    </p>
    
    <button class="btn btn-primary btn-sm mb-2" type="button" id="rule-toggle-btn" data-label-show="{{ t.final_show_rule }}" data-label-hide="{{ t.final_hide_rule }}">
    <i class="bi bi-calculator"></i> <span id="rule-btn-label">{{ t.final_show_rule }}</span>
</button>
</div>

<div id="rule-container" style="display: none;">
    <div class="card instruction-card">
        <div class="card-body">
            <h5 class="fw-bold mb-3">{{ t.final_rule_heading }}</h5>
            <p>
                {{ t.final_rule_p1|safe }}
            </p>
            
            <div class="formula-box">
                <span class="variable">Probability</span>
                <span class="operator">=</span>
                <span class="number">1</span>
                <span class="operator">&minus;</span>
                
                <div class="fraction">
                    <div class="numerator">
                        ( <span class="variable">Your Guess</span> &minus; <span class="variable">True Value</span> )<sup>2</sup>
                    </div>
                    <div class="denominator">
                        100
                    </div>
                </div>
            </div>

            <div class="mt-3">
                <p>{{ t.final_rule_how|safe }}</p>
                <ul>
                    <li>{{ t.final_rule_li1 }}</li>
                    <li>{{ t.final_rule_li2|safe }}</li>
                    <li>{{ t.final_rule_li3 }}</li>
                    <li>{{ t.final_rule_li4 }}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="text-center text-muted small mt-5">
    <p>{{ t.final_close }}</p>
</div>

{{ endblock }}

{{ block styles }}
<style>
    /* Global Container */
    .otree-body {
        max-width: 850px;
        margin: 40px auto;
        font-family: 'Inter', -apple-system, system-ui, sans-serif;
        color: #333;
        line-height: 1.6;
    }

    /* Instruction Card */
    .instruction-card {
        border: none;
        background-color: #f8f9fa;
        border-left: 5px solid #007bff;
        border-radius: 8px;
        margin-bottom: 2rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    /* Animation for the toggle */
    #rule-container {
        margin-top: 20px;
    }

    .formula-box {
        background-color: #fff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        font-family: 'Times New Roman', Times, serif;
        font-size: 1.3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
    }

    .fraction {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        vertical-align: middle;
        margin: 0 5px;
    }

    .numerator {
        border-bottom: 2px solid #333;
        padding: 0 5px 2px 5px;
        display: block;
    }

    .denominator {
        padding: 2px 5px 0 5px;
        display: block;
    }

    .variable {
        font-style: italic;
        color: #2c3e50;
    }

    .operator {
        color: #555;
        margin: 0 5px;
    }
</style>
{{ endblock }}

{{ block scripts }}
<script>
    (function () {
        var btn = document.getElementById('rule-toggle-btn');
        var container = document.getElementById('rule-container');
        var label = document.getElementById('rule-btn-label');
        var showText = btn.getAttribute('data-label-show');
        var hideText = btn.getAttribute('data-label-hide');
        if (!btn || !container || !label) return;
        btn.addEventListener('click', function () {
            if (container.style.display === 'none' || container.style.display === '') {
                container.style.display = 'block';
                container.style.opacity = 0;
                var opacity = 0;
                var timer = setInterval(function () {
                    if (opacity >= 1) clearInterval(timer);
                    container.style.opacity = opacity;
                    opacity += 0.1;
                }, 15);
                label.textContent = hideText;
                btn.classList.remove('btn-outline-primary');
                btn.classList.add('btn-primary');
            } else {
                container.style.display = 'none';
                label.textContent = showText;
                btn.classList.add('btn-outline-primary');
                btn.classList.remove('btn-primary');
            }
        });
    })();
</script>
{{ endblock }}