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

{% block title %}Moodia - Configuration du cours{% endblock %}

{% block meta_description %}Configurez les paramètres de votre cours Moodle : titre, public, niveau, durée et objectifs pédagogiques.{% endblock %}

{% block body %}
<div class="moodia" data-controller="moodia--config">
    <main class="moodia__main">
        <div class="moodia__content moodia__content--config">
            {# En-tête #}
            <div class="moodia__view-header">
                <div class="moodia__view-icon moodia__view-icon--config">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
                        <circle cx="12" cy="12" r="3"/>
                    </svg>
                </div>
                <div class="moodia__view-text">
                    <h2 class="moodia__view-title">Configurez votre cours</h2>
                    <p class="moodia__view-subtitle">Définissez les paramètres pédagogiques de votre formation</p>
                </div>
            </div>

            {# Formulaire de configuration #}
            {{ form_start(form, {'attr': {'class': 'moodia-config__form', 'data-moodia--config-target': 'form', 'novalidate': 'novalidate'}}) }}

                {# Section : Informations générales #}
                <div class="moodia-config__section">
                    <h3 class="moodia-config__section-title">Informations générales</h3>

                    <div class="moodia-config__field">
                        {{ form_label(form.courseTitle) }}
                        {{ form_widget(form.courseTitle) }}
                        {{ form_errors(form.courseTitle) }}
                    </div>

                    <div class="moodia-config__row">
                        <div class="moodia-config__field">
                            {{ form_label(form.publicTarget) }}
                            {{ form_widget(form.publicTarget) }}
                            {{ form_errors(form.publicTarget) }}
                        </div>

                        <div class="moodia-config__field">
                            {{ form_label(form.level) }}
                            {{ form_widget(form.level) }}
                            {{ form_errors(form.level) }}
                        </div>

                        <div class="moodia-config__field">
                            {{ form_label(form.duration) }}
                            {{ form_widget(form.duration, {
                                'attr': form.duration.vars.attr|merge({
                                    'data-estimated-duration': estimatedDuration|default('')
                                })
                            }) }}
                            {{ form_errors(form.duration) }}
                        </div>
                    </div>
                </div>

                {# Section : Objectifs pédagogiques #}
                <div class="moodia-config__section">
                    <div class="moodia-config__section-header">
                        <h3 class="moodia-config__section-title">Objectifs pédagogiques</h3>
                        <button type="button" class="moodia-config__ai-btn" data-action="click->moodia--config#generateObjectives" data-moodia--config-target="aiButton">
                            {% include "_components/icons/sparkles.html.twig" %}
                            <span>Générer avec l'IA</span>
                        </button>
                    </div>

                    <div class="moodia-config__field">
                        {{ form_widget(form.objectives) }}
                        {{ form_errors(form.objectives) }}
                        <span class="moodia-config__hint">Décrivez les compétences que les apprenants devront acquérir à l'issue de la formation. <strong>(min. 20 caractères)</strong></span>
                    </div>
                </div>

                {# Section : Approche pédagogique #}
                <div class="moodia-config__section">
                    <h3 class="moodia-config__section-title">Approche pédagogique</h3>

                    <div class="moodia-config__approach">
                        {% for child in form.approach %}
                            <label class="moodia-config__approach-option">
                                {{ form_widget(child) }}
                                <span class="moodia-config__approach-card">
                                    {% if child.vars.value == 'cours' %}
                                        <span class="moodia-config__approach-icon">
                                            {% include "_components/icons/book.html.twig" %}
                                        </span>
                                        <span class="moodia-config__approach-label">Cours uniquement</span>
                                        <span class="moodia-config__approach-desc">Contenu théorique sans évaluation</span>
                                    {% elseif child.vars.value == 'cours_quiz' %}
                                        <span class="moodia-config__approach-icon">
                                            {% include "_components/icons/success.html.twig" %}
                                        </span>
                                        <span class="moodia-config__approach-label">Cours + Quiz</span>
                                        <span class="moodia-config__approach-desc">Théorie et évaluation combinées</span>
                                    {% else %}
                                        <span class="moodia-config__approach-icon">
                                            {% include "_components/icons/question.html.twig" %}
                                        </span>
                                        <span class="moodia-config__approach-label">Quiz uniquement</span>
                                        <span class="moodia-config__approach-desc">Évaluation des connaissances</span>
                                    {% endif %}
                                </span>
                            </label>
                        {% endfor %}
                    </div>
                </div>

                {# Section : Instructions additionnelles #}
                <div class="moodia-config__section">
                    <h3 class="moodia-config__section-title">
                        Instructions additionnelles
                        <span class="moodia-config__optional">(optionnel)</span>
                    </h3>

                    <div class="moodia-config__field">
                        {{ form_widget(form.additionalInstructions) }}
                        {{ form_errors(form.additionalInstructions) }}
                    </div>
                </div>

                {# Info quota #}
                <div class="moodia-config__notice">
                    <svg class="moodia-config__notice-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"/>
                        <line x1="12" y1="8" x2="12" y2="12"/>
                        <line x1="12" y1="16" x2="12.01" y2="16"/>
                    </svg>
                    <p class="moodia-config__notice-text">En cas de dépassement de votre quota mensuel, la consommation sera déduite du mois suivant.</p>
                </div>

                {# Barre d'actions #}
                <div class="moodia__actions">
                    <a href="{{ path('app_moodia') }}" class="moodia__btn-secondary" data-turbo="false">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M19 12H5"/>
                            <path d="M12 19l-7-7 7-7"/>
                        </svg>
                        Modifier l'import
                    </a>
                    <button type="submit" class="moodia__cta" data-moodia--config-target="submitBtn">
                        Générer le cours
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M5 12h14"/>
                            <path d="M12 5l7 7-7 7"/>
                        </svg>
                    </button>
                </div>

            {{ form_end(form) }}
        </div>
    </main>

    {# Données pour le JS #}
    <div data-moodia--config-target="data"
         data-mode="{{ mode }}"
         data-prompt="{{ prompt|default('')|e('html_attr') }}"
         hidden></div>
</div>
{% endblock %}