{% extends 'base.html' %}

{% block title %}QueryCraft Web - Gestion des Exercices{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/exercices.css') }}">
{% endblock %}

{% block header_title %}📚 Gestion des Exercices{% endblock %}

{% block header_subtitle %}Créer, modifier et organiser les exercices QueryCraft{% endblock %}

{% block header_extra %}
    <div class="db-info">
        <span>📊 Base : <strong>{{ db_type }}</strong></span>
        <span>📁 Nom : <strong>{{ db_name }}</strong></span>
    </div>
{% endblock %}

{% block nav_buttons %}
    <div class="nav-buttons">
        <a href="{{ base_path }}/{{ '?42' if is_demo else '' }}" class="nav-btn">🏠 Accueil</a>
        <a href="{{ base_path }}/config" class="nav-btn">⚙️ Configuration</a>
    </div>
{% endblock %}

{% block content %}
        <div class="content">
            <!-- Sidebar avec liste des exercices -->
            <div class="sidebar">
                <h2>📋 Exercices</h2>
                <ul class="exercice-list" id="exerciceList">
                    <!-- Chargé dynamiquement -->
                </ul>

                <div class="create-exercice">
                    <h3 style="margin-bottom: 10px;">➕ Nouvel exercice</h3>
                    <input type="text" id="newExerciceCode" placeholder="Code de l'exercice (ex: tp01)">
                    <button class="btn btn-success js-create-exercice" style="width: 100%;">
                        Créer
                    </button>
                </div>

                <div class="upload-exercice">
                    <h3 style="margin-bottom: 10px;">📤 Importer un exercice</h3>
                    <input type="file" id="uploadExerciceFile" accept=".json,application/json">
                    <input type="text" id="uploadExerciceCode" placeholder="Code (optionnel, sinon nom du fichier)">
                    <button class="btn btn-secondary js-upload-exercice" style="width: 100%;">
                        Importer
                    </button>
                </div>

                <a href="{{ base_path }}/exercices/template/download" class="btn btn-secondary template-download">
                    ⬇️ Télécharger un template vide
                </a>
            </div>

            <!-- Panel principal avec les questions -->
            <div class="main-panel">
                <div id="alertBox" class="alert"></div>

                <div id="emptyState" class="empty-state">
                    <div class="empty-state-icon">📝</div>
                    <h3>Sélectionnez un exercice</h3>
                    <p>Choisissez un exercice dans la liste de gauche ou créez-en un nouveau.</p>
                </div>

                <div id="exercicePanel" style="display: none;">
                    <div class="exercice-header">
                        <h2 id="exerciceTitle">Exercice</h2>
                        <div class="exercice-toolbar">
                            <button class="btn btn-secondary btn-small js-duplicate-exercice">📄 Dupliquer</button>
                            <button class="btn btn-secondary btn-small js-rename-exercice">🏷️ Renommer</button>
                            <button class="btn btn-secondary btn-small js-download-exercice">⬇️ Télécharger</button>
                        </div>
                    </div>

                    <div class="exercice-database">
                        <label for="exerciceDatabase">🗄️ Base de l'exercice :</label>
                        <select id="exerciceDatabase">
                            <!-- Options chargées dynamiquement -->
                        </select>
                        <p class="exercice-database-hint" id="exerciceDatabaseHint"></p>
                    </div>

                    <div class="questions-list" id="questionsList">
                        <!-- Questions chargées dynamiquement -->
                    </div>

                    <div class="add-question-section">
                        <h3 style="margin-bottom: 15px;">➕ Ajouter une question</h3>
                        <div class="question-field">
                            <label>Code de la question :</label>
                            <input type="text" id="newQuestionCode" placeholder="Ex: q1, q2, etc.">
                        </div>
                        <button class="btn btn-success js-add-question">
                            Ajouter la question
                        </button>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='script/exercices-manager.js') }}"></script>
{% endblock %}