{% extends 'base.html.twig' %}

{% block title %}Moodia - Paramètres{% endblock %}

{% block meta_description %}Configurez vos paramètres Moodia : connectez votre plateforme Moodle, gérez votre token d'API et personnalisez votre expérience.{% endblock %}

{% block body %}
<div class="settings-container" data-controller="shared--settings-tabs">
    <div class="settings-header">
        <div>
            <h1 class="settings-title">Paramètres</h1>
            <p class="settings-subtitle">Gérez votre compte et vos intégrations</p>
        </div>
        {% include '_components/stateMoodle.html.twig' with {'moodleStatus': moodleStatus} %}
    </div>

    {# Navigation par onglets #}
    <div class="settings-tabs" role="tablist">
        <button
            class="settings-tab {{ activeTab == 'account' ? 'active' : '' }}"
            role="tab"
            aria-selected="{{ activeTab == 'account' ? 'true' : 'false' }}"
            aria-controls="tab-account"
            data-action="click->shared--settings-tabs#switchTab"
            data-tab-name="account"
        >
            <span class="settings-tab__icon">
                {% include '_components/icons/user.html.twig' %}
            </span>
            <span class="settings-tab__text">Compte</span>
        </button>
        <button
            class="settings-tab {{ activeTab == 'moodle' ? 'active' : '' }}"
            role="tab"
            aria-selected="{{ activeTab == 'moodle' ? 'true' : 'false' }}"
            aria-controls="tab-moodle"
            data-action="click->shared--settings-tabs#switchTab"
            data-tab-name="moodle"
        >
            <span class="settings-tab__icon">
                {% include '_components/icons/moodia.html.twig' %}
            </span>
            <span class="settings-tab__text">Moodia</span>
        </button>
        <button
            class="settings-tab {{ activeTab == 'serenia' ? 'active' : '' }}"
            role="tab"
            aria-selected="{{ activeTab == 'serenia' ? 'true' : 'false' }}"
            aria-controls="tab-serenia"
            data-action="click->shared--settings-tabs#switchTab"
            data-tab-name="serenia"
        >
            <span class="settings-tab__icon">
                {% include '_components/icons/seren_ia.html.twig' %}
            </span>
            <span class="settings-tab__text">Serenia</span>
        </button>
        <button
            class="settings-tab {{ activeTab == 'slidia' ? 'active' : '' }}"
            role="tab"
            aria-selected="{{ activeTab == 'slidia' ? 'true' : 'false' }}"
            aria-controls="tab-slidia"
            data-action="click->shared--settings-tabs#switchTab"
            data-tab-name="slidia"
        >
            <span class="settings-tab__icon">
                {% include '_components/icons/slidia.html.twig' %}
            </span>
            <span class="settings-tab__text">Slidia</span>
        </button>
    </div>

    {# Contenu des onglets #}
    <div class="settings-content">
        {# Onglet Compte #}
        <div
            id="tab-account"
            class="settings-panel {{ activeTab == 'account' ? 'active' : '' }}"
            role="tabpanel"
            data-shared--settings-tabs-target="panel"
            data-tab="account"
        >
            <div class="settings-card">
                <div class="settings-card__header">
                    <h2 class="settings-card__title">Informations du compte</h2>
                    <p class="settings-card__description">Modifiez vos informations personnelles et votre mot de passe</p>
                </div>

                <div class="settings-card__body">
                    {# SECTION 1 : Informations personnelles #}
                    {{ form_start(identityForm, {'attr': {'class': 'settings-form', 'data-turbo': 'false'}}) }}
                        <div class="form-section">
                            <h3 class="form-section__title">Informations personnelles</h3>
                            {{ form_row(identityForm.firstName) }}
                            {{ form_row(identityForm.lastName) }}

                            {# Email (non modifiable) #}
                            <div class="form-group">
                                <label class="label">Adresse email</label>
                                <div class="input-with-badge">
                                    <input type="email" class="input" value="{{ user.email }}" disabled>
                                    <span class="settings-badge settings-badge--success">
                                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M10 3L4.5 8.5L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        Vérifié
                                    </span>
                                </div>
                                <small class="input-help">L'email ne peut pas être modifié pour des raisons de sécurité</small>
                            </div>
                        </div>

                        <button type="submit" class="btn btn--primary">
                            Sauvegarder
                        </button>
                        
                    {{ form_end(identityForm) }}

                    {# SECTION 2 : Changement de mot de passe #}
                    {{ form_start(passwordForm, {'attr': {'class': 'settings-form', 'data-turbo': 'false'}}) }}
                        <div class="form-section">
                            <h3 class="form-section__title">Changer le mot de passe</h3>
                            <p class="form-section__description">Renseignez les champs ci-dessous pour modifier votre mot de passe</p>
                            {{ form_row(passwordForm.currentPassword) }}
                            {{ form_row(passwordForm.newPassword) }}
                            {{ form_row(passwordForm.newPasswordConfirm) }}
                        </div>

                        <button type="submit" class="btn btn--primary">
                            Changer le mot de passe
                        </button>
                    {{ form_end(passwordForm) }}
                </div>
            </div>
        </div>

        {# Onglet Moodle #}
        <div
            id="tab-moodle"
            class="settings-panel {{ activeTab == 'moodle' ? 'active' : '' }}"
            role="tabpanel"
            data-shared--settings-tabs-target="panel"
            data-tab="moodle"
        >
            <div class="settings-card">
                <div class="settings-card__header">
                    <h2 class="settings-card__title">Configuration Moodle</h2>
                    <p class="settings-card__description">Connectez votre plateforme Moodle pour déployer vos cours automatiquement</p>
                </div>

                <div class="settings-card__body">
                    {# SECTION : Prérequis Moodle #}
                    <div class="settings-warning-box">
                        <div class="settings-warning-box__icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 9v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="settings-warning-box__content">
                            <h3 class="settings-warning-box__title">Configuration préalable requise</h3>
                            <p class="settings-warning-box__text">Avant de commencer à créer des cours, vous devez configurer les services web Moodle et installer les plugins nécessaires.</p>
                        </div>
                    </div>

                    {# SECTION : Plugins requis #}
                    <div class="form-section">
                        <h3 class="form-section__title">1. Installer les plugins requis</h3>
                        <p class="form-section__description">Téléchargez et installez ces 2 plugins nécessaires au fonctionnement de Moodia</p>

                        <div class="settings-plugins-list">
                            <div class="settings-plugin-item">
                                <div class="settings-plugin-info">
                                    <strong>bubul_activity</strong>
                                    <span class="settings-plugin-desc">Bubul Activity Creator - Plugin pour créer des activités Moodle</span>
                                </div>
                                <a href="{{ path('app_download_plugin', {plugin: 'bubul_activity'}) }}" class="btn btn--secondary btn--small" download>
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M14 10v2.667A1.333 1.333 0 0112.667 14H3.333A1.333 1.333 0 012 12.667V10M8 10.667V2M8 10.667L5.333 8M8 10.667L10.667 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    Télécharger
                                </a>
                            </div>
                            <div class="settings-plugin-item">
                                <div class="settings-plugin-info">
                                    <strong>local_wsmanagesections</strong>
                                    <span class="settings-plugin-desc">WS Manage Sections - Plugin pour créer des sections dans les cours</span>
                                </div>
                                <a href="https://moodle.org/plugins/local_wsmanagesections" target="_blank" rel="noopener" class="btn btn--secondary btn--small">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 8.667v4A1.333 1.333 0 0110.667 14H3.333A1.333 1.333 0 012 12.667V5.333A1.333 1.333 0 013.333 4h4M10 2h4v4M6.667 9.333L14 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    Télécharger
                                </a>
                            </div>
                        </div>

                        <div class="settings-help-text">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8 14A6 6 0 108 2a6 6 0 000 12z" stroke="currentColor" stroke-width="1.5"/>
                                <path d="M8 11.333V8M8 5.333h.007" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                            </svg>
                            Installation : <strong>Administration du site → Plugins → Installer des plugins</strong> puis uploadez le fichier ZIP téléchargé
                        </div>
                    </div>

                    {# SECTION : Services web requis #}
                    <div class="form-section">
                        <h3 class="form-section__title">2. Sélectionner les fonctions dans les services web</h3>
                        <p class="form-section__description">Dans <strong>Administration du site → Plugins → Services web → Services externes → Services personnalisés</strong>, sélectionnez ces 9 fonctions :</p>

                        <div class="settings-webservices-list">
                            <div class="settings-webservice-item">
                                <div class="settings-webservice-badge">Core</div>
                                <div class="settings-webservice-name">core_course_create_courses</div>
                                <div class="settings-webservice-desc">Créer de nouveaux cours</div>
                            </div>
                            <div class="settings-webservice-item">
                                <div class="settings-webservice-badge">Core</div>
                                <div class="settings-webservice-name">core_course_get_courses_by_field</div>
                                <div class="settings-webservice-desc">Obtenir les cours correspondant à un champ spécifique</div>
                            </div>
                            <div class="settings-webservice-item">
                                <div class="settings-webservice-badge">Core</div>
                                <div class="settings-webservice-name">core_enrol_get_potential_users</div>
                                <div class="settings-webservice-desc">Obtenir la liste des utilisateurs potentiels à inscrire</div>
                            </div>
                            <div class="settings-webservice-item">
                                <div class="settings-webservice-badge">Core</div>
                                <div class="settings-webservice-name">core_user_get_users_by_field</div>
                                <div class="settings-webservice-desc">Rechercher un utilisateur par email, username ou ID</div>
                            </div>
                            <div class="settings-webservice-item">
                                <div class="settings-webservice-badge">Core</div>
                                <div class="settings-webservice-name">core_update_inplace_editable</div>
                                <div class="settings-webservice-desc">Service générique pour mettre à jour les titres</div>
                            </div>
                            <div class="settings-webservice-item">
                                <div class="settings-webservice-badge">Core</div>
                                <div class="settings-webservice-name">core_webservice_get_site_info</div>
                                <div class="settings-webservice-desc">Retourner les informations du site et de l'utilisateur</div>
                            </div>
                            <div class="settings-webservice-item">
                                <div class="settings-webservice-badge">Enrol</div>
                                <div class="settings-webservice-name">enrol_manual_enrol_users</div>
                                <div class="settings-webservice-desc">Inscrire manuellement des utilisateurs</div>
                            </div>
                            <div class="settings-webservice-item">
                                <div class="settings-webservice-badge">Plugin</div>
                                <div class="settings-webservice-name">local_bubul_create_activity</div>
                                <div class="settings-webservice-desc">Créer une nouvelle activité dans une section de cours</div>
                            </div>
                            <div class="settings-webservice-item">
                                <div class="settings-webservice-badge">Plugin</div>
                                <div class="settings-webservice-name">local_wsmanagesections_create_sections</div>
                                <div class="settings-webservice-desc">Créer des sections à une position donnée</div>
                            </div>
                        </div>
                    </div>

                    {# SECTION : Configuration #}
                    <div class="form-section">
                        <h3 class="form-section__title">3. Configurer la connexion</h3>
                        <p class="form-section__description">Renseignez les informations de connexion à votre plateforme Moodle</p>
                    </div>

                    {% if isBetaTester %}
                    {# Message pour les beta testeurs #}
                    <div class="settings-info-box settings-info-box--beta">
                        <div class="settings-info-box__icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 15v-3m0-3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div class="settings-info-box__content">
                            <h4 class="settings-info-box__title">Configuration verrouillée pendant la bêta</h4>
                            <p class="settings-info-box__text">Durant la phase de bêta, nous avons configuré un accès Moodle partagé pour faciliter vos tests. Vous pourrez configurer votre propre instance Moodle une fois la bêta terminée.</p>
                        </div>
                    </div>

                    {# Champs en lecture seule pour les beta testeurs #}
                    <div class="settings-form">
                        <div class="form-group">
                            <label class="label">URL de votre plateforme Moodle</label>
                            <div class="input-with-badge">
                                <input type="text" class="input" value="https://lms.bubul.app/" disabled readonly>
                                <span class="settings-badge settings-badge--info">
                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M6 11A5 5 0 106 1a5 5 0 000 10z" stroke="currentColor" stroke-width="1.5"/>
                                        <path d="M6 8V6M6 4h.005" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                                    </svg>
                                    Bêta
                                </span>
                            </div>
                            <small class="input-help">URL configurée automatiquement pendant la bêta</small>
                        </div>

                        <div class="form-group">
                            <label class="label">Token d'API Moodle</label>
                            <div class="input-with-badge">
                                <input type="password" class="input" value="••••••••••••••••••••••••••••••••" disabled readonly>
                                <span class="settings-badge settings-badge--success">
                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M10 3L4.5 8.5L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    Configuré
                                </span>
                            </div>
                            <small class="input-help">Token configuré automatiquement pendant la bêta</small>
                        </div>

                        <div class="form-group">
                            <label class="label">Identifiant utilisateur Moodle</label>
                            <div class="input-with-badge">
                                <input type="text" class="input" value="{{ betaMoodleUserId }}" disabled readonly>
                                <span class="settings-badge settings-badge--success">
                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M10 3L4.5 8.5L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    Configuré
                                </span>
                            </div>
                            <small class="input-help">Votre identifiant Moodle de test (créé automatiquement)</small>
                        </div>
                    </div>

                    {% else %}
                    {# Formulaire complet pour les utilisateurs normaux #}
                    {{ form_start(moodleForm, {'attr': {'class': 'settings-form', 'data-turbo': 'false'}}) }}
                        {# Utilisation du form theme avec paramètres de badge #}
                        {{ form_row(moodleForm.moodleUrl, {
                            'label': 'URL de votre plateforme Moodle',
                            'attr': {'placeholder': 'https://moodle.example.com'},
                            'help': 'L\'URL complète de votre instance Moodle'
                        }) }}

                        {{ form_row(moodleForm.moodleToken, {
                            'label': 'Token d\'API Moodle',
                            'attr': {'placeholder': 'Votre token API Moodle'},
                            'badge_show': hasToken,
                            'badge_text': 'Configuré',
                            'badge_variant': 'success',
                            'help': 'Pour obtenir votre token : <strong>Administration du site → Plugins → Services web → Gérer les tokens</strong>'
                        }) }}

                        {{ form_row(moodleForm.moodleUserId, {
                            'label': 'Identifiant utilisateur Moodle',
                            'attr': {'placeholder': 'Ex: p.nom, email@example.com ou id-123456'},
                            'badge_show': moodleUserFound is not null,
                            'badge_text': moodleUserFound ? 'Utilisateur trouvé' : 'Utilisateur non trouvé',
                            'badge_variant': moodleUserFound ? 'success' : 'error',
                            'badge_url': moodleUserFound ? moodleProfileUrl : null,
                            'help': 'Votre identifiant sur Moodle pour être automatiquement assigné comme enseignant sur les cours créés'
                        }) }}

                        <div class="settings-actions settings-actions--center">
                            <button type="submit" class="btn btn--primary btn--large btn--enhanced">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.333 4L6 11.333L2.667 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                Enregistrer la configuration
                            </button>
                        </div>
                    {{ form_end(moodleForm) }}
                    {% endif %}
                </div>
            </div>
        </div>

        {# Onglet Serenia #}
        <div
            id="tab-serenia"
            class="settings-panel {{ activeTab == 'serenia' ? 'active' : '' }}"
            role="tabpanel"
            data-shared--settings-tabs-target="panel"
            data-tab="serenia"
        >
            <div class="settings-card">
                <div class="settings-card__header">
                    <h2 class="settings-card__title">Configuration Serenia</h2>
                    <p class="settings-card__description">Personnalisez votre assistant IA selon vos préférences</p>
                </div>

                <div class="settings-card__body">
                    <div class="settings-coming-soon">
                        <div class="settings-coming-soon__icon">
                            {% include '_components/icons/seren_ia.html.twig' %}
                        </div>
                        <h3 class="settings-coming-soon__title">Paramètres à venir</h3>
                        <p class="settings-coming-soon__text">
                            Des options de personnalisation seront bientôt disponibles pour customiser votre IA comme vous le souhaitez :
                        </p>
                        <ul class="settings-coming-soon__list">
                            <li>Ton de communication (formel, casual, technique)</li>
                            <li>Longueur des réponses (court, détaillé)</li>
                            <li>Domaines d'expertise préférés</li>
                            <li>Langue par défaut</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        {# Onglet Slidia #}
        <div
            id="tab-slidia"
            class="settings-panel {{ activeTab == 'slidia' ? 'active' : '' }}"
            role="tabpanel"
            data-shared--settings-tabs-target="panel"
            data-tab="slidia"
        >
            <div class="settings-card">
                <div class="settings-card__header">
                    <h2 class="settings-card__title">Configuration Slidia</h2>
                    <p class="settings-card__description">Personnalisez vos présentations PowerPoint générées par IA</p>
                </div>

                <div class="settings-card__body">
                    {# Section Paramètres de génération #}
                    <div class="slidia-settings-section" data-controller="slidia--settings" data-slidia--settings-text-density-value="{{ slidiaSettings.textDensity }}" data-slidia--settings-content-fidelity-value="{{ slidiaSettings.contentFidelity }}">
                        <div class="slidia-settings-section__header">
                            <div class="slidia-settings-section__icon">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="3"/>
                                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
                                </svg>
                            </div>
                            <div class="slidia-settings-section__text">
                                <h4 class="slidia-settings-section__title">Paramètres de génération</h4>
                                <p class="slidia-settings-section__desc">Options par défaut pour vos présentations</p>
                            </div>
                        </div>
                        <div class="slidia-settings-section__content">
                            {# Densité du texte #}
                            <div class="slidia-settings-group">
                                <label class="slidia-settings-group__label">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <line x1="21" y1="6" x2="3" y2="6"/>
                                        <line x1="17" y1="12" x2="3" y2="12"/>
                                        <line x1="19" y1="18" x2="3" y2="18"/>
                                    </svg>
                                    Densité du texte
                                </label>
                                <div class="slidia-settings-options">
                                    <label class="slidia-settings-option">
                                        <input type="radio" name="textDensity" value="concise" {{ slidiaSettings.textDensity == 'concise' ? 'checked' : '' }} data-action="change->slidia--settings#saveSettings">
                                        <span class="slidia-settings-option__content">
                                            <span class="slidia-settings-option__label">Concis</span>
                                            <span class="slidia-settings-option__desc">Peu de texte, idées clés</span>
                                        </span>
                                    </label>
                                    <label class="slidia-settings-option">
                                        <input type="radio" name="textDensity" value="normal" {{ slidiaSettings.textDensity == 'normal' ? 'checked' : '' }} data-action="change->slidia--settings#saveSettings">
                                        <span class="slidia-settings-option__content">
                                            <span class="slidia-settings-option__label">Normal</span>
                                            <span class="slidia-settings-option__desc">Équilibré</span>
                                        </span>
                                    </label>
                                    <label class="slidia-settings-option">
                                        <input type="radio" name="textDensity" value="detailed" {{ slidiaSettings.textDensity == 'detailed' ? 'checked' : '' }} data-action="change->slidia--settings#saveSettings">
                                        <span class="slidia-settings-option__content">
                                            <span class="slidia-settings-option__label">Détaillé</span>
                                            <span class="slidia-settings-option__desc">Explications complètes</span>
                                        </span>
                                    </label>
                                </div>
                            </div>

                            {# Intervention de l'IA #}
                            <div class="slidia-settings-group">
                                <label class="slidia-settings-group__label">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                    </svg>
                                    Intervention de l'IA
                                </label>
                                <div class="slidia-settings-options">
                                    <label class="slidia-settings-option">
                                        <input type="radio" name="contentFidelity" value="verbatim" {{ slidiaSettings.contentFidelity == 'verbatim' ? 'checked' : '' }} data-action="change->slidia--settings#saveSettings">
                                        <span class="slidia-settings-option__content">
                                            <span class="slidia-settings-option__label">Texte exact</span>
                                            <span class="slidia-settings-option__desc">Moins de tokens</span>
                                        </span>
                                    </label>
                                    <label class="slidia-settings-option">
                                        <input type="radio" name="contentFidelity" value="light_edit" {{ slidiaSettings.contentFidelity == 'light_edit' ? 'checked' : '' }} data-action="change->slidia--settings#saveSettings">
                                        <span class="slidia-settings-option__content">
                                            <span class="slidia-settings-option__label">Légères corrections</span>
                                            <span class="slidia-settings-option__desc">Tokens modérés</span>
                                        </span>
                                    </label>
                                    <label class="slidia-settings-option">
                                        <input type="radio" name="contentFidelity" value="creative" {{ slidiaSettings.contentFidelity == 'creative' ? 'checked' : '' }} data-action="change->slidia--settings#saveSettings">
                                        <span class="slidia-settings-option__content">
                                            <span class="slidia-settings-option__label">Reformulation libre</span>
                                            <span class="slidia-settings-option__desc">Plus de tokens</span>
                                        </span>
                                    </label>
                                </div>
                            </div>

                            {# Message de sauvegarde #}
                            <div class="slidia-settings-saved" data-slidia--settings-target="savedMessage" hidden>
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M20 6L9 17l-5-5"/>
                                </svg>
                                Paramètres sauvegardés
                            </div>
                        </div>
                    </div>

                    {# Section Masques personnalisés #}
                    <div class="slidia-settings-section" data-controller="slidia--mask" data-slidia--mask-user-id-value="{{ app.user.id }}">
                        <div class="slidia-settings-section__header">
                            <div class="slidia-settings-section__icon">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                    <line x1="3" y1="9" x2="21" y2="9"/>
                                    <line x1="9" y1="21" x2="9" y2="9"/>
                                </svg>
                            </div>
                            <div class="slidia-settings-section__text">
                                <h4 class="slidia-settings-section__title">Masque PowerPoint</h4>
                                <p class="slidia-settings-section__desc">Modèle utilisé pour générer vos présentations</p>
                            </div>
                        </div>
                        <div class="slidia-settings-section__content">
                            {# Zone d'upload (visible si pas de masque custom) #}
                            <div class="slidia-mask-upload" data-slidia--mask-target="uploadZone">
                                <input
                                    type="file"
                                    id="mask-file-input"
                                    accept=".pptx"
                                    class="slidia-mask-upload__input"
                                    data-slidia--mask-target="fileInput"
                                    data-action="change->slidia--mask#handleFileSelect"
                                >
                                <label for="mask-file-input" class="slidia-mask-upload__dropzone" data-action="dragover->slidia--mask#handleDragOver dragenter->slidia--mask#handleDragEnter dragleave->slidia--mask#handleDragLeave drop->slidia--mask#handleDrop">
                                    <div class="slidia-mask-upload__icon">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                            <polyline points="17 8 12 3 7 8"/>
                                            <line x1="12" y1="3" x2="12" y2="15"/>
                                        </svg>
                                    </div>
                                    <div class="slidia-mask-upload__text">
                                        <span class="slidia-mask-upload__text-main">Importer un masque personnalisé</span>
                                        <span class="slidia-mask-upload__text-sub">Fichier .pptx vide avec vos masques (max 20 Mo)</span>
                                    </div>
                                </label>
                            </div>

                            {# Barre de progression #}
                            <div class="slidia-mask-progress" data-slidia--mask-target="progress" hidden>
                                <div class="slidia-mask-progress__bar">
                                    <div class="slidia-mask-progress__fill" data-slidia--mask-target="progressFill"></div>
                                </div>
                                <p class="slidia-mask-progress__text" data-slidia--mask-target="progressText">Upload en cours...</p>
                            </div>

                            {# Masque actuel (si custom) #}
                            <div class="slidia-mask-file" data-slidia--mask-target="current" hidden>
                                <a href="#" class="slidia-mask-file__link" data-slidia--mask-target="downloadLink" download>
                                    <div class="slidia-mask-file__icon">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                            <polyline points="14 2 14 8 20 8"/>
                                        </svg>
                                    </div>
                                    <div class="slidia-mask-file__info">
                                        <span class="slidia-mask-file__name" data-slidia--mask-target="fileName">Mon masque</span>
                                        <span class="slidia-mask-file__meta" data-slidia--mask-target="fileMeta">0 layouts</span>
                                    </div>
                                </a>
                                <button type="button" class="slidia-mask-file__delete" data-action="click->slidia--mask#deleteMask" title="Supprimer le masque">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <line x1="18" y1="6" x2="6" y2="18"/>
                                        <line x1="6" y1="6" x2="18" y2="18"/>
                                    </svg>
                                </button>
                            </div>

                            {# Messages d'erreur #}
                            <div class="slidia-mask-error" data-slidia--mask-target="error" hidden>
                                <span data-slidia--mask-target="errorText"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}