{# Step 1: Upload PDF - Design Moderne #}
<div class="moodia-step" data-moodia--stepper-target="step" data-step="1" data-controller="moodia--step-1-upload" data-moodia--step-1-upload-moodia--stepper-outlet=".moodia-container">
    <div class="moodia-card">
        <div class="step-header">
            <h2 class="step-title">Importez votre document</h2>
            <p class="step-description">Déposez un fichier PDF contenant le contenu de votre cours</p>
        </div>

        {{ form_start(uploadForm, {'attr': {'id': 'uploadForm'}}) }}
            {# Drag & Drop Zone Moderne #}
            <div class="upload-zone" data-action="click->moodia--step-1-upload#openFileDialog dragover->moodia--step-1-upload#preventDefaults drop->moodia--step-1-upload#handleDrop">
                <div class="upload-zone__content">
                    <div class="upload-zone__icon">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h3 class="upload-zone__title">Glissez-déposez votre PDF</h3>
                    <p class="upload-zone__subtitle">ou <button type="button" class="upload-zone__link">parcourez vos fichiers</button></p>
                    <div class="upload-zone__specs">
                        <div class="upload-zone__spec">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/>
                            </svg>
                            Format PDF
                        </div>
                        <div class="upload-zone__spec">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
                            </svg>
                            Max 20 MB
                        </div>
                    </div>
                </div>

                {{ form_widget(uploadForm.pdfFile, {
                    'attr': {
                        'data-moodia--step-1-upload-target': 'fileInput',
                        'data-action': 'change->moodia--step-1-upload#handleFileSelect'
                    }
                }) }}
            </div>

            {# File Preview Card #}
            <div class="file-preview" data-moodia--step-1-upload-target="fileInfo" style="display: none;">
                <div class="file-preview__icon">
                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" stroke="currentColor" stroke-width="2"/>
                        <polyline points="13 2 13 9 20 9" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </div>
                <div class="file-preview__details">
                    <h4 class="file-preview__name" data-moodia--step-1-upload-target="fileName"></h4>
                    <p class="file-preview__size" data-moodia--step-1-upload-target="fileSize"></p>
                </div>
                <button type="button" class="file-preview__remove" data-action="click->moodia--step-1-upload#removeFile" title="Supprimer">
                    <svg width="20" height="20" 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>

            <div class="step-actions">
                <div></div> {# Spacer pour l'alignement #}
                <button
                    type="button"
                    class="btn btn--primary btn--large"
                    data-moodia--step-1-upload-target="nextBtn"
                    data-action="click->moodia--stepper#nextStep"
                    disabled
                >
                    Continuer
                </button>
            </div>
        {{ form_end(uploadForm) }}
    </div>
</div>