{% extends 'base.html' %}

{% block title %}QueryCraft Web - Configuration{% endblock %}

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

{% block header_title %}Configuration{% endblock %}

{% block header_subtitle %}Gestion des paramètres de l'application{% endblock %}

{% block header_extra %}
<div class="db-info">
    <span>👤 Instance : <strong>{{ 'démo' if tenant_code == 'demo' else tenant_code }}</strong>{% if tenant_name %} ({{ tenant_name }}){% endif %}</span>
    {% if tenant_referent %}
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;🎓 Enseignant référent : <strong>{{ tenant_referent }}</strong></span>
    {% endif %}
</div>
{% endblock %}


{% block content %}
<div class="content">
    <div class="alert" id="alertBox"></div>

    <!-- Vue d'ensemble -->
    <div class="overview">
        <button type="button" class="stat" onclick="qcJump('sectionBD')">
            <div class="stat-top"><span class="stat-label">Base de données</span><span class="dot pending" id="dbOverviewDot"></span></div>
            <span class="stat-value" id="dbOverviewValue">{{ {'sqlite': 'SQLite', 'pgsql': 'PostgreSQL', 'mysql': 'MySQL/MariaDB'}.get(config.Database.type, config.Database.type) }}</span>
            <span class="stat-meta" id="dbOverviewMeta">{{ config.Database.database or '—' }} · vérification…</span>
        </button>
        <button type="button" class="stat" onclick="qcJump('sectionIA')">
            <div class="stat-top"><span class="stat-label">Intelligence artificielle</span><span class="dot pending" id="iaOverviewDot"></span></div>
            <span class="stat-value" id="iaOverviewValue">{{ config.IA.service }}</span>
            <span class="stat-meta" id="iaOverviewMeta">{{ config.IA.modele or '—' }} · vérification…</span>
        </button>
        <button type="button" class="stat" onclick="qcJump('sectionIA')">
            <div class="stat-top"><span class="stat-label">Feedback renforcé</span><span class="dot {{ 'ok' if config.IA['feedback-renforce'] == 'on' else 'off' }}" id="feedbackOverviewDot"></span></div>
            <span class="stat-value" id="feedbackOverviewValue">{{ 'Activé' if config.IA['feedback-renforce'] == 'on' else 'Désactivé' }}</span>
            <span class="stat-meta" id="feedbackOverviewMeta">{{ config.IA['feedback-renforce-taille'] ~ ' tentatives conservées' if config.IA['feedback-renforce'] == 'on' else 'historique non envoyé' }}</span>
        </button>
        <button type="button" class="stat" onclick="qcJump('sectionAutres')">
            <div class="stat-top"><span class="stat-label">Cache</span><span class="dot {{ 'ok' if config.Autre.cache == 'on' else 'off' }}" id="cacheOverviewDot"></span></div>
            <span class="stat-value" id="cacheOverviewValue">{{ 'Activé' if config.Autre.cache == 'on' else 'Désactivé' }}</span>
            <span class="stat-meta" id="cacheOverviewMeta">{{ 'purge automatique après ' ~ config.Autre['duree-cache'] ~ ' j' if config.Autre.cache == 'on' else 'aucune mise en cache' }}</span>
        </button>
        <button type="button" class="stat" onclick="qcJump('sectionTraces')">
            <div class="stat-top"><span class="stat-label">Traçage pédagogique</span><span class="dot {{ 'ok' if config.Traces.mode == 'on' else 'off' }}" id="tracesOverviewDot"></span></div>
            <span class="stat-value" id="tracesOverviewValue">{{ 'Activé' if config.Traces.mode == 'on' else 'Désactivé' }}</span>
            <span class="stat-meta" id="tracesOverviewMeta">{{ 'conservation ' ~ config.Traces['retention-jours'] ~ ' j' if config.Traces.mode == 'on' else 'aucune tentative journalisée' }}</span>
        </button>
    </div>

    <div class="config-shell">
        <!-- Navigation latérale -->
        <aside class="rail">
            <div class="rail-search">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
                <input type="text" id="filterInput" placeholder="Filtrer les réglages…">
            </div>
            <nav class="railnav" id="railnav">
                <a href="#sectionBD" data-target="sectionBD">🗄️ Base de données</a>
                <a href="#sectionIA" data-target="sectionIA">🤖 Intelligence artificielle</a>
                <a href="#sectionTraces" data-target="sectionTraces">📈 Traces <span class="n" id="railTracesBadge">nouveau</span></a>
                <a href="#sectionAutres" data-target="sectionAutres">🔧 Autres paramètres</a>
            </nav>
            <div class="rail-hint"><strong>Besoin d'aide ?</strong> Chaque champ a une courte explication ; les avertissements légaux (RGPD) sont repliés sous « ⚠ » pour ne pas encombrer la page.</div>
        </aside>

        <form id="configForm">
        <main class="config-main">
            <!-- Section Database -->
            <div class="section">
                <div id="sectionBD" class="section-header js-toggle-section">
                    <span class="section-icon">🗄️</span>
                    <div class="section-titles">
                        <h2>Base de données</h2>
                        <p>Choisissez le SGBD utilisé pour exécuter les requêtes</p>
                    </div>
                    <svg class="toggle" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="m6 9 6 6 6-6"/></svg>
                </div>
                <div class="section-content">
                    <div class="form-group" data-kw="type sgbd sqlite postgresql mysql">
                        <label>Type de base de données</label>
                        <div class="segmented" role="radiogroup" aria-label="Type de base de données">
                            <label class="seg-opt">
                                <input type="radio" name="Database.type" value="sqlite" class="js-toggle-db-selector" {{ 'checked' if config.Database.type == 'sqlite' }}>
                                <span class="seg-ic">🗃️</span>
                                <span><span class="seg-t">SQLite</span><br><span class="seg-d">fichier local</span></span>
                            </label>
                            <label class="seg-opt">
                                <input type="radio" name="Database.type" value="pgsql" class="js-toggle-db-selector" {{ 'checked' if config.Database.type == 'pgsql' }}>
                                <span class="seg-ic">🐘</span>
                                <span><span class="seg-t">PostgreSQL</span><br><span class="seg-d">serveur distant</span></span>
                            </label>
                            <label class="seg-opt">
                                <input type="radio" name="Database.type" value="mysql" class="js-toggle-db-selector" {{ 'checked' if config.Database.type == 'mysql' }}>
                                <span class="seg-ic">🐬</span>
                                <span><span class="seg-t">MySQL/MariaDB</span><br><span class="seg-d">serveur distant</span></span>
                            </label>
                        </div>
                    </div>

                    <div class="status-row" data-kw="connexion état connectée">
                        <div class="status-indicator state-pending" id="dbStatus">
                            <span class="status-dot pending"></span>
                            <div class="status-text">
                                <span class="status-label">Vérification…</span>
                                <span class="status-meta">Test automatique de connexion</span>
                            </div>
                        </div>
                        <button type="button" class="status-recheck" id="dbRecheck" title="Revérifier maintenant">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 3v6h-6"/></svg>
                        </button>
                        <span style="flex:1"></span>
                        <button type="button" class="btn btn-danger js-purge-sbs-cache" style="padding:9px 14px;font-size:.85rem;">🗑 Purger le cache du pas-à-pas</button>
                    </div>
                    <div class="alert" id="alertBoxBD"></div>

                    <div id="sqlite-selector">
                        <div class="form-group">
                            <label for="db_selector">Base de données (choisir dans la liste)</label>
                            <select id="db_selector" class="form-control">
                                <option value="" {{ 'selected' if config.Database.database not in available_databases }}>-- Choisir une base --</option>
                                {% for db_file in available_databases %}
                                <option value="{{ db_file }}" {{ 'selected' if db_file == config.Database.database }}>
                                    {{ db_file }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <div id="sqlite-upload">
                            <div class="divider-note">Importer une nouvelle base</div>

                            <div class="dropzone" id="dbDropzone">
                                <span class="dz-ic">⬆️</span>
                                <span class="dz-t">Glissez un fichier .db ici, ou cliquez pour parcourir</span>
                                <span class="dz-s">.db · .sqlite · .sqlite3 — ajouté à vos bases disponibles</span>
                                <input type="file" id="db_upload" accept=".db,.sqlite,.sqlite3" style="display:none;">
                            </div>

                            <details class="legal">
                                <summary><span>Avant de téléverser — sécurité, RGPD et conservation des données</span><svg class="details-chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="m6 9 6 6 6-6"/></svg></summary>
                                <ul>
                                    <li><strong>Sécurité limitée :</strong> le niveau de protection de cette instance est minimal. Toute personne
                                        connaissant le numéro de l'instance est susceptible de consulter les bases de données qui y sont déposées.
                                    </li>
                                    <li><strong>Aucune donnée sensible ou personnelle :</strong> les bases téléversées ne doivent contenir aucune
                                        donnée à caractère personnel ni aucune donnée sensible, conformément au règlement général sur la protection
                                        des données (RGPD, règlement (UE) 2016/679) et au règlement européen sur l'intelligence artificielle (IA Act,
                                        règlement (UE) 2024/1689). Veuillez utiliser exclusivement des données anonymisées, ouvertes (OpenData... ; en
                                        respectant la licence) ou fictives.
                                    </li>
                                    <li><strong>Conservation non garantie :</strong> la pérennité des bases de données et des exercices déposés n'est
                                        pas garantie. Il vous appartient d'en conserver une copie de sauvegarde.
                                    </li>
                                </ul>
                            </details>

                            <label for="db_upload_ack" style="display:flex;align-items:flex-start;gap:0.5em;font-size:0.85em;font-weight:normal;cursor:pointer;">
                                <input type="checkbox" id="db_upload_ack"
                                       style="width:16px;min-width:16px;height:16px;flex:0 0 auto;padding:0;border:2px solid #ddd;margin:0.15em 0 0;">
                                <span style="flex:1;">J'ai pris connaissance des avertissements et je certifie
                                    que mes données sont anonymisées, ouvertes ou fictives.</span>
                            </label>

                            <div>
                                <button type="button" class="btn btn-info js-upload-db" disabled>⬆️ Téléverser</button>
                            </div>
                            <div class="alert" id="alertBoxUpload"></div>
                        </div>
                    </div>

                    <div id="pgsql-mysql-fields">
                        <input type="hidden" id="db_database" name="Database.database" value="{{ config.Database.database }}">

                        <div class="form-row" id="db-network-params">
                            <div class="form-group">
                                <label for="db_username">Nom d'utilisateur</label>
                                <input type="text" id="db_username" name="Database.username"
                                       value="{{ config.Database.username }}" placeholder="postgres" autocomplete="off">
                            </div>

                            <div class="form-group field-with-chip">
                                <label for="db_password">Mot de passe</label>
                                <span class="help-text">{{ 'Déjà défini — laisser vide pour le conserver' if config.Database.password not in ('None', None, '') else '' }}</span>
                                <input type="password" id="db_password" name="Database.password"
                                       value="" placeholder="••••••••" autocomplete="new-password">
                                {% if config.Database.password not in ('None', None, '') %}
                                <span class="saved-chip">enregistré</span>
                                {% endif %}
                                <button type="button" class="pw-toggle" data-target="db_password" title="Afficher/masquer">👁</button>
                            </div>
                        </div>

                        <div class="form-row" id="db-network-params-host">
                            <div class="form-group">
                                <label for="db_host">Hôte</label>
                                <input type="text" id="db_host" name="Database.host"
                                       value="{{ '' if config.Database.host in ('None', None) else config.Database.host }}"
                                       placeholder="localhost">
                            </div>

                            <div class="form-group">
                                <label for="db_port">Port</label>
                                <input type="text" id="db_port" name="Database.port"
                                       value="{{ '' if config.Database.port in ('0', 0, None) else config.Database.port }}"
                                       placeholder="5432">
                            </div>
                        </div>

                        <div class="form-group" id="db-name-selector">
                            <label for="db_name_selector" id="db-names-label">Base de données</label>
                            <span class="help-text">Liste des bases accessibles avec ces identifiants ; remplie automatiquement une fois hôte, port et utilisateur renseignés</span>
                            <select id="db_name_selector" class="form-control" disabled>
                                <option value="" selected>-- Choisir une base --</option>
                            </select>
                            <span id="db-name-selector-message" class="model-status-message"></span>
                        </div>

                        <details class="legal" id="db-server-warning">
                            <summary><span>Avant toute utilisation — installation, sécurité et RGPD</span><svg class="details-chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="m6 9 6 6 6-6"/></svg></summary>
                            <ul>
                                <li><strong>Installation par l'administrateur :</strong> l'utilisation d'un serveur PostgreSQL ou MySQL/MariaDB suppose que
                                    celui-ci soit installé et accessible depuis cette instance. Veuillez contacter l'administrateur du site pour
                                    demander son installation, la création de votre base et l'ouverture des accès réseau nécessaires.
                                </li>
                                <li><strong>Sécurité limitée :</strong> le niveau de protection de cette instance est minimal. Toute personne
                                    connaissant le numéro de l'instance est susceptible de consulter les bases de données qui y sont configurées,
                                    ainsi que les paramètres de connexion saisis ici (nom d'utilisateur, mot de passe).
                                </li>
                                <li><strong>Aucune donnée sensible ou personnelle :</strong> les bases utilisées ne doivent contenir aucune donnée
                                    à caractère personnel ni aucune donnée sensible, conformément au règlement général sur la protection des données
                                    (RGPD, règlement (UE) 2016/679) et au règlement européen sur l'intelligence artificielle (IA Act, règlement (UE)
                                    2024/1689). Veuillez utiliser exclusivement des données anonymisées, ouvertes (OpenData... ; en respectant la
                                    licence) ou fictives.
                                </li>
                                <li><strong>Conservation non garantie :</strong> la pérennité des bases de données et des exercices n'est pas
                                    garantie. Il vous appartient d'en conserver une copie de sauvegarde.
                                </li>
                            </ul>
                        </details>
                    </div>
                </div>
            </div>

            <!-- Section IA -->
            <div class="section">
                <div id="sectionIA" class="section-header js-toggle-section">
                    <span class="section-icon">🤖</span>
                    <div class="section-titles">
                        <h2>Intelligence artificielle</h2>
                        <p>Aide automatique sur les erreurs et la correction des requêtes</p>
                    </div>
                    <svg class="toggle" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="m6 9 6 6 6-6"/></svg>
                </div>
                <div class="section-content">
                    <div class="switchline" data-kw="mode ia activer désactiver">
                        <div class="txt">
                            <label for="ia_mode">Mode IA</label>
                            <span class="help-text">Active l'aide automatique lors des erreurs et de la correction</span>
                        </div>
                        <input type="hidden" name="IA.mode" value="off">
                        <input type="checkbox" class="switch" id="ia_mode" name="IA.mode" value="on" {{ 'checked' if config.IA.mode == 'on' }}>
                    </div>

                    <div class="form-row" data-kw="service anthropic openai google ollama modèle">
                        <div class="form-group">
                            <label for="ia_service">Service IA</label>
                            <span class="help-text">✅ accessible · ⚠️ clé requise · ❌ indisponible</span>
                            <select id="ia_service" name="IA.service" class="js-toggle-ia-selector">
                                <option value="albert" {{ 'selected' if config.IA.service == 'albert' }}>Albert (DINUM)</option>
                                <option value="anthropic" {{ 'selected' if config.IA.service == 'anthropic' }}>Anthropic</option>
                                <option value="generic" {{ 'selected' if config.IA.service == 'generic' }}>Générique</option>
                                <option value="google" {{ 'selected' if config.IA.service == 'google' }}>Google Gemini</option>
                                <option value="ilaas" {{ 'selected' if config.IA.service == 'ilaas' }}>ILaaS</option>
                                <option value="lms" {{ 'selected' if config.IA.service == 'lms' }}>LM Studio</option>
                                <option value="ollama_cloud" {{ 'selected' if config.IA.service == 'ollama_cloud' }}>Ollama (cloud)</option>
                                <option value="ollama" {{ 'selected' if config.IA.service == 'ollama' }}>Ollama (local)</option>
                                <option value="openai" {{ 'selected' if config.IA.service == 'openai' }}>OpenAI</option>
                                <option value="poe" {{ 'selected' if config.IA.service == 'poe' }}>Poe</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="ia_modele">Modèle</label>
                            <span class="help-text">Sélectionné dans la liste ci-dessous, ou saisi librement</span>
                            <input type="text" id="ia_modele" name="IA.modele" value="{{ config.IA.modele }}" placeholder="codellama:7b">
                        </div>
                    </div>

                    <div class="status-row">
                        <div class="status-indicator state-pending" id="iaStatus">
                            <span class="status-dot pending"></span>
                            <div class="status-text">
                                <span class="status-label">Vérification…</span>
                                <span class="status-meta">Test automatique du service</span>
                            </div>
                        </div>
                        <button type="button" class="status-recheck" id="iaRecheck" title="Revérifier maintenant">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 3v6h-6"/></svg>
                        </button>
                    </div>

                    <div id="ollama-selector">
                        <label for="ollama_selector" id="models-label">Modèles disponibles ({{ config.IA.service }})</label>
                        <span class="help-text">Sélectionnez un modèle parmi ceux disponibles pour ce service</span>
                        <select id="ollama_selector" class="form-control" {{ 'disabled' if ia_models_status != 'ok' }}>
                            <option value="" selected>-- Choisir un modèle --</option>
                            {% for m in available_models|sort %}
                            {% if m == config.IA.modele %}
                            <option value="{{ m }}" selected>{{ m }}</option>
                            {% else %}
                            <option value="{{ m }}">{{ m }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                        <span id="ollama-selector-message" class="model-status-message model-status-{{ ia_models_status }}">{{ ia_models_message }}</span>
                    </div>

                    <div class="form-row">
                        <div class="form-group field-with-chip">
                            <label for="ia_apikey">Clé API</label>
                            <span class="help-text">
                                {{ 'Déjà définie — laisser vide pour la conserver' if config.IA['api-key'] not in ('None', None, '') else "Laisser vide pour utiliser les variables d'environnement" }}
                            </span>
                            <input type="password" id="ia_apikey" name="IA.api-key" value="" placeholder="••••••••" autocomplete="new-password">
                            {% if config.IA['api-key'] not in ('None', None, '') %}
                            <span class="saved-chip">enregistrée</span>
                            {% endif %}
                            <button type="button" class="pw-toggle" data-target="ia_apikey" title="Afficher/masquer">👁</button>
                        </div>

                        <div class="form-group">
                            <label for="ia_url">URL personnalisée</label>
                            <span class="help-text" id="ia_url_help">Utilisée uniquement pour le service « Générique »</span>
                            <input type="text" id="ia_url" name="IA.url" value="{{ config.IA.url }}" placeholder="None"
                                   {{ 'disabled' if config.IA.service != 'generic' }}>
                        </div>
                    </div>

                    <div class="divider-note">Feedback renforcé</div>

                    <div class="switchline" data-kw="feedback renforcé historique tentatives">
                        <div class="txt">
                            <label for="ia_feedback_renforce">Historique des tentatives</label>
                            <span class="help-text">Envoie à l'IA les tentatives précédentes de l'élève sur la même question, pour éviter de répéter le même conseil</span>
                        </div>
                        <input type="hidden" name="IA.feedback-renforce" value="off">
                        <input type="checkbox" class="switch js-toggle-reveal" data-reveal="feedback-count"
                               id="ia_feedback_renforce" name="IA.feedback-renforce" value="on"
                               {{ 'checked' if config.IA['feedback-renforce'] == 'on' }}>
                    </div>
                    <div class="form-group" id="feedback-count">
                        <label for="ia_feedback_renforce_taille">Nombre de tentatives conservées</label>
                        <span class="help-text">Historique conservé côté navigateur de l'élève, envoyé à l'IA à chaque nouvelle tentative</span>
                        <div class="stepper">
                            <button type="button" class="js-step" data-target="ia_feedback_renforce_taille" data-delta="-1">−</button>
                            <input type="number" id="ia_feedback_renforce_taille" name="IA.feedback-renforce-taille"
                                   value="{{ config.IA['feedback-renforce-taille'] }}" min="1" max="20">
                            <button type="button" class="js-step" data-target="ia_feedback_renforce_taille" data-delta="1">+</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Section Traces -->
            <div class="section">
                <div id="sectionTraces" class="section-header js-toggle-section">
                    <span class="section-icon">📈</span>
                    <div class="section-titles">
                        <h2>Traces <span class="badge-new">nouveau</span></h2>
                        <p>Journal pédagogique des tentatives de requêtes SQL des élèves</p>
                    </div>
                    <svg class="toggle" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="m6 9 6 6 6-6"/></svg>
                </div>
                <div class="section-content">
                    <div class="switchline" data-kw="traçage pédagogique traces">
                        <div class="txt">
                            <label for="traces_mode">Traçage pédagogique</label>
                            <span class="help-text">Enregistre chaque tentative (requête, résultat, durée) dans un journal local à cette instance, pour analyse pédagogique</span>
                        </div>
                        <input type="hidden" name="Traces.mode" value="off">
                        <input type="checkbox" class="switch js-toggle-reveal" data-reveal="traces-retention"
                               id="traces_mode" name="Traces.mode" value="on" {{ 'checked' if config.Traces.mode == 'on' }}>
                    </div>

                    <details class="info" data-kw="rgpd pseudonyme cookie consentement export csv">
                        <summary><span>Ce que le traçage enregistre, et ce qu'il n'enregistre pas</span><svg class="details-chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="m6 9 6 6 6-6"/></svg></summary>
                        <p>Chaque tentative est associée à un <strong>pseudonyme de session</strong> (cookie technique), sans lien avec l'identité
                            réelle de l'élève. Aucune sollicitation de consentement n'est affichée aux élèves : activer le traçage est une décision
                            pédagogique de l'enseignant pour sa classe.</p>
                        <p>Les données restent <strong>locales à cette instance</strong> (aucun envoi réseau) et sont purgées automatiquement selon
                            la durée de conservation choisie ci-dessous.</p>
                        <p>L'export CSV (anonymisable) est disponible via la commande d'administration <code>tenant-sbs</code> ; aucune interface
                            web de consultation n'est proposée pour l'instant.</p>
                    </details>

                    <div class="form-group" id="traces-retention">
                        <label for="traces_retention">Durée de conservation (jours)</label>
                        <span class="help-text">Les tentatives plus anciennes sont supprimées automatiquement</span>
                        <div class="stepper">
                            <button type="button" class="js-step" data-target="traces_retention" data-delta="-10">−</button>
                            <input type="number" id="traces_retention" name="Traces.retention-jours"
                                   value="{{ config.Traces['retention-jours'] }}" min="0">
                            <button type="button" class="js-step" data-target="traces_retention" data-delta="10">+</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Section Autre -->
            <div class="section">
                <div id="sectionAutres" class="section-header js-toggle-section">
                    <span class="section-icon">🔧</span>
                    <div class="section-titles">
                        <h2>Autres paramètres</h2>
                        <p>Cache et présentation des exercices</p>
                    </div>
                    <svg class="toggle" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="m6 9 6 6 6-6"/></svg>
                </div>
                <div class="section-content">
                    <div class="form-row" style="display:none;">
                        <div class="form-group">
                            <label for="autre_debug">Mode Debug</label>
                            <select id="autre_debug" name="Autre.debug">
                                <option value="True" {{ 'selected' if config.Autre.debug == 'True' }}>Activé</option>
                                <option value="False" {{ 'selected' if config.Autre.debug == 'False' }}>Désactivé</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="autre_verbose">Mode verbose</label>
                            <select id="autre_verbose" name="Autre.verbose">
                                <option value="True" {{ 'selected' if config.Autre.verbose == 'True' }}>Activé</option>
                                <option value="False" {{ 'selected' if config.Autre.verbose == 'False' }}>Désactivé</option>
                            </select>
                        </div>
                    </div>

                    <div class="switchline" data-kw="cache ia générative pas à pas">
                        <div class="txt">
                            <label for="autre_cache">Cache IA générative et pas-à-pas</label>
                            <span class="help-text">Évite de refaire des appels IA/BD identiques</span>
                        </div>
                        <input type="hidden" name="Autre.cache" value="off">
                        <input type="checkbox" class="switch js-toggle-reveal" data-reveal="cache-duree"
                               id="autre_cache" name="Autre.cache" value="on" {{ 'checked' if config.Autre.cache == 'on' }}>
                    </div>
                    <div class="form-group" id="cache-duree">
                        <label for="autre_duree_cache">Durée cache (jours)</label>
                        <div class="stepper">
                            <button type="button" class="js-step" data-target="autre_duree_cache" data-delta="-5">−</button>
                            <input type="number" id="autre_duree_cache" name="Autre.duree-cache"
                                   value="{{ config.Autre['duree-cache'] }}" min="0" placeholder="60">
                            <button type="button" class="js-step" data-target="autre_duree_cache" data-delta="5">+</button>
                        </div>
                    </div>

                    <div class="switchline" data-kw="présentation exercices">
                        <div class="txt">
                            <label for="autre_exos">Présentation des exercices</label>
                            <span class="help-text">Affiche un fil d'exercices guidés aux élèves</span>
                        </div>
                        <input type="hidden" name="Autre.exos" value="off">
                        <input type="checkbox" class="switch js-toggle-reveal" data-reveal="aide_prf"
                               id="autre_exos" name="Autre.exos" value="on" {{ 'checked' if config.Autre.exos == 'on' }}>
                    </div>
                    <div id="aide_prf" class="switchline" data-kw="aide enseignant">
                        <div class="txt">
                            <label for="autre_aide">Aide enseignant</label>
                            <span class="help-text">Affiche des indications supplémentaires réservées à l'enseignant pendant la correction</span>
                        </div>
                        <input type="hidden" name="Autre.aide" value="off">
                        <input type="checkbox" class="switch" id="autre_aide" name="Autre.aide" value="on" {{ 'checked' if config.Autre.aide == 'on' }}>
                    </div>
                </div>
            </div>

            {% if tenant_referent %}
            <p class="referent-note" style="font-size:0.75em;color:#999;">
                Le nom de l'enseignant référent affiché ci-dessus est une donnée à caractère
                personnelle, utilisée uniquement pour faciliter le contact concernant cette
                instance. Conformément au règlement général sur la protection des données
                (RGPD, règlement (UE) 2016/679), vous disposez d'un droit d'accès, de
                rectification et d'effacement de cette information. Pour l'exercer, ou pour
                toute question relative à son traitement, veuillez contacter l'administrateur
                du site.
            </p>
            {% endif %}
        </main>
        </form>
    </div>

    <div class="loading" id="loading">
        <div class="spinner"></div>
        <p style="margin-top: 10px;">Analyse des paramètres BD/IA et sauvegarde en cours...</p>
    </div>
</div>

<div class="actionbar">
    <div class="actionbar-inner">
        <div class="dirty-indicator" id="dirtyIndicator"><span class="dd"></span><span id="dirtyLabel">Aucune modification</span></div>
        <div class="action-btns">
            <a href="#" class="btn btn-cancel js-reset-form">🔄 Réinitialiser</a>
            <a href="{{ base_path }}/{{ '?42' if is_demo else '' }}" class="btn btn-nav">🏠 Retour à l'accueil</a>
            <button type="submit" form="configForm" class="btn btn-primary">💾 Enregistrer la configuration</button>
        </div>
    </div>
</div>
{% endblock %}

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