<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🔓 Unlock Correction - mkdocs-quiz</title>
    <link rel="stylesheet" href="assets/quiz/unlock-page.css">
</head>
<body>
    <div class="unlock-container">
        <h1 id="page-title-heading">🔓 Unlock Correction</h1>
        
        <!-- Informations sur la demande -->
        <div class="unlock-info">
            <p><strong id="label-type">Type:</strong> <span id="unlock-type">-</span></p>
            <p><strong id="label-page">Page:</strong> <span id="page-title">-</span></p>
            <p id="exercise-info" style="display:none;">
                <strong id="label-exercise">Exercise:</strong> <span id="exercise-title">-</span>
            </p>
            <p id="question-info" style="display:none;">
                <strong id="label-question">Question:</strong> <span id="question-text">-</span>
            </p>
        </div>
        
        <!-- Formulaire enseignant -->
        <form id="teacher-form">
            <label for="teacher-master-code" id="label-teacher-code">Master teacher code:</label>
            <input type="password" 
                   id="teacher-master-code" 
                   placeholder="Your master code"
                   autocomplete="off"
                   required>
            <button type="submit" id="btn-generate">Generate unlock code</button>
        </form>
        
        <!-- Code généré (caché par défaut) -->
        <div id="generated-code-section" style="display:none;">
            <h2 id="label-unlock-code">✅ Unlock code:</h2>
            <div class="unlock-code-display" id="unlock-code-value">-</div>
            <p class="instruction" id="label-instruction">Communicate this code to the student orally</p>
            <button onclick="copyCode(event)" id="btn-copy">📋 Copy code</button>
        </div>
        
        <!-- Erreur -->
        <div id="error-message" class="error" style="display:none;"></div>
    </div>
    
    <script>
        // // Inject teacher code hash (replaced at build time)        
        // // Inject i18n translations (replaced at build time)

        window.QUIZ_CONFIG = window.QUIZ_CONFIG || {};
        window.QUIZ_CONFIG.teacher_code_hash = '{{TEACHER_CODE_HASH}}';
        window.QUIZ_CONFIG.i18n = {{I18N_TRANSLATIONS}};

        // // Update UI text with translations after DOM loads
        // document.addEventListener('DOMContentLoaded', function() {
        //     // Update static text elements
        //     document.getElementById('page-title-heading').textContent = '🔓 ' + t('unlock_title', 'Unlock Correction');
        //     document.getElementById('label-type').textContent = t('unlock_type_label', 'Type') + ':';
        //     document.getElementById('label-page').textContent = t('unlock_page_label', 'Page') + ':';
        //     document.getElementById('label-exercise').textContent = t('unlock_exercise_label', 'Exercise') + ':';
        //     document.getElementById('label-question').textContent = t('unlock_question_label', 'Question') + ':';
        //     document.getElementById('label-teacher-code').textContent = t('teacher_code_label', 'Master teacher code') + ':';
        //     document.getElementById('teacher-master-code').placeholder = t('teacher_code_placeholder', 'Your master code');
        //     document.getElementById('btn-generate').textContent = t('generate_unlock_code', 'Generate unlock code');
        //     document.getElementById('label-unlock-code').textContent = '✅ ' + t('unlock_generated', 'Unlock code') + ':';
        //     document.getElementById('label-instruction').textContent = t('unlock_instruction', 'Communicate this code to the student orally');
        //     document.getElementById('btn-copy').textContent = '📋 ' + t('copy_code', 'Copy code');
        // });

        document.addEventListener('DOMContentLoaded', function() {
            // Update static text elements
            document.getElementById('page-title-heading').textContent = '🔓 ' + t('ui.unlock_title', 'Unlock Correction');
            document.getElementById('label-type').textContent = t('ui.unlock_type_label', 'Type') + ':';
            document.getElementById('label-page').textContent = t('ui.unlock_page_label', 'Page') + ':';
            document.getElementById('label-exercise').textContent = t('ui.unlock_exercise_label', 'Exercise') + ':';
            document.getElementById('label-question').textContent = t('ui.unlock_question_label', 'Question') + ':';
            document.getElementById('label-teacher-code').textContent = t('ui.teacher_code_label', 'Master teacher code') + ':';
            document.getElementById('teacher-master-code').placeholder = t('ui.teacher_code_placeholder', 'Your master code');
            document.getElementById('btn-generate').textContent = t('ui.generate_unlock_code', 'Generate unlock code');
            document.getElementById('label-unlock-code').textContent = '✅ ' + t('ui.unlock_generated', 'Unlock code') + ':';
            document.getElementById('label-instruction').textContent = t('ui.unlock_instruction', 'Communicate this code to the student orally');
            document.getElementById('btn-copy').textContent = '📋 ' + t('ui.copy_code', 'Copy code');
        });
    </script>
    <script src="assets/quiz/quiz-unlock.js"></script>
</body>
</html>