{# templates/cart/edit.html.twig #}

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

{% block title %}Modifier ma carte {{ cardType|upper }}{% endblock %}

{% block body %}
<style>
    .edit-container {
        max-width: 800px;
        margin: 40px auto;
        padding: 20px;
    }
    
    .edit-header {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid #f0f0f0;
    }
    
    .edit-header-icon {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        flex-shrink: 0;
    }
    
    .edit-header-info h1 {
        font-size: 28px;
        font-weight: 700;
        color: #1d1d1f;
        margin: 0 0 5px 0;
    }
    
    .edit-header-info p {
        color: #86868b;
        margin: 0;
        font-size: 15px;
    }
    
    .edit-card {
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    
    .edit-card-body {
        padding: 30px;
    }
    
    /* Sections du formulaire */
    .form-section {
        margin-bottom: 30px;
        padding-bottom: 25px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .form-section:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .form-section-title {
        font-size: 14px;
        font-weight: 700;
        color: #9b59b6;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .form-section-title span {
        font-size: 18px;
    }
    
    /* Grille des champs */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    @media (max-width: 600px) {
        .form-grid {
            grid-template-columns: 1fr;
        }
    }
    
    .form-grid .full-width {
        grid-column: 1 / -1;
    }
    
    /* Style des champs */
    .form-group {
        display: flex;
        flex-direction: column;
    }
    
    .form-group label {
        font-size: 13px;
        font-weight: 600;
        color: #1d1d1f;
        margin-bottom: 8px;
    }
    
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 14px 16px;
        border: 2px solid #e8e8e8;
        border-radius: 12px;
        font-size: 15px;
        color: #1d1d1f;
        transition: all 0.2s;
        background: #fafafa;
    }
    
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
        outline: none;
        border-color: #9b59b6;
        background: white;
        box-shadow: 0 0 0 4px rgba(155, 89, 182, 0.1);
    }
    
    .form-group textarea {
        min-height: 100px;
        resize: vertical;
    }
    
    .form-group .form-help {
        font-size: 12px;
        color: #86868b;
        margin-top: 6px;
    }
    
    /* Boutons */
    .form-actions {
        display: flex;
        gap: 15px;
        margin-top: 30px;
        padding-top: 25px;
        border-top: 2px solid #f0f0f0;
    }
    
    .btn-save {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
        color: white;
        padding: 16px 32px;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4);
    }
    
    .btn-cancel {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #f5f5f7;
        color: #1d1d1f;
        padding: 16px 28px;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s;
    }
    
    .btn-cancel:hover {
        background: #e8e8e8;
    }
    
    /* Badge temporaire */
    .badge-temp {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }
    
    /* Alerte info */
    .alert-info {
        background: #e3f2fd;
        color: #1565c0;
        padding: 16px 20px;
        border-radius: 12px;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
    }
    
    .alert-info span {
        font-size: 20px;
    }

    /* Champs restants (form_rest) */
    .form-rest-section {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px dashed #e0e0e0;
    }

    .form-rest-section > div {
        margin-bottom: 15px;
    }

    /* ============================================
       SECTION CHARTE GRAPHIQUE
       ============================================ */
    .theme-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 10px;
    }
    
    @media (max-width: 600px) {
        .theme-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
    }

    .theme-card {
        border: 3px solid #e8e8e8;
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
    }

    .theme-card:hover {
        border-color: #9b59b6;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(155, 89, 182, 0.25);
    }

    .theme-card.selected {
        border-color: #9b59b6;
        box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.3);
    }

    .theme-card.selected::after {
        content: '✓';
        position: absolute;
        top: 6px;
        right: 6px;
        width: 22px;
        height: 22px;
        background: #9b59b6;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        z-index: 2;
    }

    .theme-preview {
        height: 50px;
        display: flex;
    }

    .theme-preview .color-half {
        flex: 1;
    }

    .theme-info {
        padding: 6px 8px;
        text-align: center;
        background: white;
    }

    .theme-number {
        font-size: 10px;
        font-weight: 700;
        color: #9b59b6;
    }

    .theme-name {
        font-size: 10px;
        color: #86868b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .theme-current-info {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: #f8f5fc;
        border-radius: 10px;
        margin-bottom: 16px;
    }

    .theme-current-preview {
        width: 40px;
        height: 24px;
        border-radius: 6px;
        display: flex;
        overflow: hidden;
        flex-shrink: 0;
        border: 1px solid #ddd;
    }

    .theme-current-preview .color-half {
        flex: 1;
    }

    .theme-current-label {
        font-size: 14px;
        color: #1d1d1f;
        font-weight: 600;
    }

    .theme-search {
        width: 100%;
        padding: 10px 14px;
        border: 2px solid #e8e8e8;
        border-radius: 10px;
        font-size: 14px;
        margin-bottom: 14px;
        background: #fafafa;
        transition: all 0.2s;
        box-sizing: border-box;
    }

    .theme-search:focus {
        outline: none;
        border-color: #9b59b6;
        background: white;
        box-shadow: 0 0 0 4px rgba(155, 89, 182, 0.1);
    }
</style>

<div class="edit-container">
    {# Header #}
    <div class="edit-header">
        <div class="edit-header-icon">
            {% if cardType == 'essentiel' %}
                📇
            {% elseif cardType == 'premium' %}
                ⭐
            {% elseif cardType == 'force' %}
                💪
            {% elseif cardType == 'multi' %}
                🎯
            {% else %}
                🎴
            {% endif %}
        </div>
        <div class="edit-header-info">
            <h1>Modifier ma carte {{ cardType|upper }}</h1>
            <p>
                {{ card.prenom }} {{ card.nom }}
                {% if card.entreprise %} • {{ card.entreprise }}{% endif %}
                {% if isTemp %}
                    <span class="badge-temp">📝 Brouillon</span>
                {% endif %}
            </p>
        </div>
    </div>
    
    {% if isTemp %}
    <div class="alert-info">
        <span>💡</span>
        <div>Cette carte n'est pas encore enregistrée. Elle sera créée lors de la validation de votre commande.</div>
    </div>
    {% endif %}
    
    {# Formulaire #}
    <div class="edit-card">
        <div class="edit-card-body">
            {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
            
            {# ============================================
               SECTION CHARTE GRAPHIQUE (NOUVEAU)
               ============================================ #}
            <div class="form-section">
                <div class="form-section-title">
                    <span>🎨</span> Charte graphique
                </div>
                
                {# Affichage du thème actuel #}
                <div class="theme-current-info">
                    <div class="theme-current-preview" id="current-theme-preview"></div>
                    <div class="theme-current-label" id="current-theme-label">
                        Thème n°{{ currentTheme|default(1) }}
                    </div>
                </div>

                {# Recherche rapide #}
                <input type="text" class="theme-search" placeholder="🔍 Rechercher un thème (ex: Bordeaux, Bleu, Or...)" id="theme-search">

                {# Champ caché pour stocker le thème sélectionné #}
                <input type="hidden" name="selected_theme" id="selected_theme" value="{{ currentTheme|default(1) }}">

                {# Grille des 52 thèmes #}
                <div class="theme-grid" id="theme-grid"></div>
            </div>

            {# Section Identité #}
            <div class="form-section">
                <div class="form-section-title">
                    <span>👤</span> Identité
                </div>
                <div class="form-grid">
                    <div class="form-group">
                        {{ form_label(form.prenom) }}
                        {{ form_widget(form.prenom) }}
                        {{ form_errors(form.prenom) }}
                    </div>
                    <div class="form-group">
                        {{ form_label(form.nom) }}
                        {{ form_widget(form.nom) }}
                        {{ form_errors(form.nom) }}
                    </div>
                    {% if form.titre is defined %}
                    <div class="form-group">
                        {{ form_label(form.titre) }}
                        {{ form_widget(form.titre) }}
                        {{ form_errors(form.titre) }}
                    </div>
                    {% endif %}
                    <div class="form-group">
                        {{ form_label(form.fonction) }}
                        {{ form_widget(form.fonction) }}
                        {{ form_errors(form.fonction) }}
                    </div>
                    <div class="form-group">
                        {{ form_label(form.entreprise) }}
                        {{ form_widget(form.entreprise) }}
                        {{ form_errors(form.entreprise) }}
                    </div>
                    {% if form.logo is defined %}
                    <div class="form-group">
                        {{ form_label(form.logo) }}
                        {{ form_widget(form.logo) }}
                        {{ form_errors(form.logo) }}
                    </div>
                    {% endif %}
                    {% if form.slogan is defined %}
                    <div class="form-group full-width">
                        {{ form_label(form.slogan) }}
                        {{ form_widget(form.slogan) }}
                        {{ form_errors(form.slogan) }}
                    </div>
                    {% endif %}
                </div>
            </div>
            
            {# Section Contact #}
            <div class="form-section">
                <div class="form-section-title">
                    <span>📞</span> Contact
                </div>
                <div class="form-grid">
                    <div class="form-group">
                        {{ form_label(form.email) }}
                        {{ form_widget(form.email) }}
                        {{ form_errors(form.email) }}
                    </div>
                    <div class="form-group">
                        {{ form_label(form.fixe) }}
                        {{ form_widget(form.fixe) }}
                        {{ form_errors(form.fixe) }}
                    </div>
                    <div class="form-group">
                        {{ form_label(form.mobile) }}
                        {{ form_widget(form.mobile) }}
                        {{ form_errors(form.mobile) }}
                    </div>
                </div>
            </div>
            
            {# Section Adresse & Web #}
            <div class="form-section">
                <div class="form-section-title">
                    <span>📍</span> Adresse & Web
                </div>
                <div class="form-grid">
                    {% if form.adresse is defined %}
                    <div class="form-group full-width">
                        {{ form_label(form.adresse) }}
                        {{ form_widget(form.adresse) }}
                        {{ form_errors(form.adresse) }}
                    </div>
                    {% endif %}
                    {% if form.siteWeb is defined %}
                    <div class="form-group full-width">
                        {{ form_label(form.siteWeb) }}
                        {{ form_widget(form.siteWeb) }}
                        {{ form_errors(form.siteWeb) }}
                    </div>
                    {% endif %}
                </div>
            </div>
            
            {# Section Réseaux sociaux #}
            <div class="form-section">
                <div class="form-section-title">
                    <span>📱</span> Réseaux sociaux
                </div>
                <div class="form-grid">
                    {% if form.linkedin is defined %}
                    <div class="form-group">
                        {{ form_label(form.linkedin) }}
                        {{ form_widget(form.linkedin) }}
                        {{ form_errors(form.linkedin) }}
                    </div>
                    {% endif %}
                    {% if form.facebook is defined %}
                    <div class="form-group">
                        {{ form_label(form.facebook) }}
                        {{ form_widget(form.facebook) }}
                        {{ form_errors(form.facebook) }}
                    </div>
                    {% endif %}
                    {% if form.youtube is defined %}
                    <div class="form-group">
                        {{ form_label(form.youtube) }}
                        {{ form_widget(form.youtube) }}
                        {{ form_errors(form.youtube) }}
                    </div>
                    {% endif %}
                    {% if form.tiktok is defined %}
                    <div class="form-group">
                        {{ form_label(form.tiktok) }}
                        {{ form_widget(form.tiktok) }}
                        {{ form_errors(form.tiktok) }}
                    </div>
                    {% endif %}
                    {% if form.insta is defined %}
                    <div class="form-group">
                        {{ form_label(form.insta) }}
                        {{ form_widget(form.insta) }}
                        {{ form_errors(form.insta) }}
                    </div>
                    {% endif %}
                    {% if form.x is defined %}
                    <div class="form-group">
                        {{ form_label(form.x) }}
                        {{ form_widget(form.x) }}
                        {{ form_errors(form.x) }}
                    </div>
                    {% endif %}
                </div>
            </div>
            
            {# Section Premium spécifique #}
            {% if cardType == 'premium' %}
            <div class="form-section">
                <div class="form-section-title">
                    <span>⭐</span> Détails Premium
                </div>
                <div class="form-grid">
                    {% if form.expertise is defined %}
                    <div class="form-group">
                        {{ form_label(form.expertise) }}
                        {{ form_widget(form.expertise) }}
                        {{ form_errors(form.expertise) }}
                    </div>
                    {% endif %}
                    {% if form.seances is defined %}
                    <div class="form-group">
                        {{ form_label(form.seances) }}
                        {{ form_widget(form.seances) }}
                        {{ form_errors(form.seances) }}
                    </div>
                    {% endif %}
                    {% if form.satifaction is defined %}
                    <div class="form-group">
                        {{ form_label(form.satifaction) }}
                        {{ form_widget(form.satifaction) }}
                        {{ form_errors(form.satifaction) }}
                    </div>
                    {% endif %}
                    {% if form.spe1 is defined %}
                    <div class="form-group">
                        {{ form_label(form.spe1) }}
                        {{ form_widget(form.spe1) }}
                        {{ form_errors(form.spe1) }}
                    </div>
                    {% endif %}
                    {% if form.spe2 is defined %}
                    <div class="form-group">
                        {{ form_label(form.spe2) }}
                        {{ form_widget(form.spe2) }}
                        {{ form_errors(form.spe2) }}
                    </div>
                    {% endif %}
                    {% if form.spe3 is defined %}
                    <div class="form-group">
                        {{ form_label(form.spe3) }}
                        {{ form_widget(form.spe3) }}
                        {{ form_errors(form.spe3) }}
                    </div>
                    {% endif %}
                    {% if form.spe4 is defined %}
                    <div class="form-group">
                        {{ form_label(form.spe4) }}
                        {{ form_widget(form.spe4) }}
                        {{ form_errors(form.spe4) }}
                    </div>
                    {% endif %}
                    {% if form.actu is defined %}
                    <div class="form-group full-width">
                        {{ form_label(form.actu) }}
                        {{ form_widget(form.actu) }}
                        {{ form_errors(form.actu) }}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            
            {# Section Force spécifique #}
            {% if cardType == 'force' %}
            <div class="form-section">
                <div class="form-section-title">
                    <span>💪</span> Détails Force de Vente
                </div>
                <div class="form-grid">
                    {% if form.photo is defined %}
                    <div class="form-group full-width">
                        {{ form_label(form.photo) }}
                        {{ form_widget(form.photo) }}
                        {{ form_errors(form.photo) }}
                        <div class="form-help">Format : JPG, PNG, WebP (max 5 Mo)</div>
                    </div>
                    {% endif %}
                    
                    {% if form.specialite is defined %}
                    <div class="form-group full-width">
                        {{ form_label(form.specialite) }}
                        {{ form_widget(form.specialite) }}
                        {{ form_errors(form.specialite) }}
                    </div>
                    {% endif %}
                    
                    {% if form.zoneIntervention is defined %}
                    <div class="form-group">
                        {{ form_label(form.zoneIntervention) }}
                        {{ form_widget(form.zoneIntervention) }}
                        {{ form_errors(form.zoneIntervention) }}
                    </div>
                    {% endif %}
                    
                    {% if form.horaires is defined %}
                    <div class="form-group">
                        {{ form_label(form.horaires) }}
                        {{ form_widget(form.horaires) }}
                        {{ form_errors(form.horaires) }}
                    </div>
                    {% endif %}
                    
                    {% if form.services is defined %}
                    <div class="form-group full-width">
                        {{ form_label(form.services) }}
                        {{ form_widget(form.services) }}
                        {{ form_errors(form.services) }}
                        <div class="form-help">Décrivez vos principaux services ou produits</div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            
            {# Champs restants non rendus manuellement #}
            {{ form_rest(form) }}
            
            {# Boutons d'action #}
            <div class="form-actions">
                <a href="{{ path('app_cart_index') }}" class="btn-cancel">
                    ← Annuler
                </a>
                <button type="submit" class="btn-save">
                    💾 Enregistrer les modifications
                </button>
            </div>
            
            {{ form_end(form) }}
        </div>
    </div>
</div>

{# ============================================
   JAVASCRIPT - GESTION DES 52 THÈMES
   ============================================ #}
<script>
(function() {
    'use strict';

    var themes = [
        { number: 1, name: "Bordeaux & Or", color1: "#8B1538", color2: "#d4af37" },
        { number: 2, name: "Vert Forêt & Or", color1: "#0f5132", color2: "#b8860b" },
        { number: 3, name: "Violet Royal", color1: "#4A148C", color2: "#ffd700" },
        { number: 4, name: "Bleu Acier", color1: "#003f5c", color2: "#4682b4" },
        { number: 5, name: "Vert Sombre & Sable", color1: "#1B4332", color2: "#d4a574" },
        { number: 6, name: "Bleu Nuit & Argent", color1: "#1a1a2e", color2: "#c0c0c0" },
        { number: 7, name: "Noir & Rouge", color1: "#0d0d0d", color2: "#c41e3a" },
        { number: 8, name: "Crème & Marine", color1: "#f5f0e8", color2: "#1B2A4A" },
        { number: 9, name: "Charbon & Cuivre", color1: "#2b2b2b", color2: "#b87333" },
        { number: 10, name: "Bleu Roi & Or", color1: "#003366", color2: "#d4af37" },
        { number: 11, name: "Noir & Corail", color1: "#1a1a1a", color2: "#ff6b6b" },
        { number: 12, name: "Gris Anthracite", color1: "#2c3e50", color2: "#95a5a6" },
        { number: 13, name: "Vert Nature", color1: "#27ae60", color2: "#2ecc71" },
        { number: 14, name: "Saphir & Doré", color1: "#0F4C75", color2: "#F0C040" },
        { number: 15, name: "Élite Champagne", color1: "#E5D4B5", color2: "#1C1C1C" },
        { number: 16, name: "Autorité Cobalt", color1: "#0047AB", color2: "#C0C0C0" },
        { number: 17, name: "Héritage Bronze", color1: "#8B4513", color2: "#D2B48C" },
        { number: 18, name: "Fraîcheur Menthe", color1: "#98D8C8", color2: "#2F6F5E" },
        { number: 19, name: "Passion Rubis", color1: "#9B111E", color2: "#2C1810" },
        { number: 20, name: "Terre Olive", color1: "#C65D3B", color2: "#2C5530" },
        { number: 21, name: "Bordeaux Doré", color1: "#800020", color2: "#DAA520" },
        { number: 22, name: "Aqua Marine", color1: "#7FFFD4", color2: "#20B2AA" },
        { number: 23, name: "Miel Caramel", color1: "#D4A017", color2: "#8B4000" },
        { number: 24, name: "Minuit Doré", color1: "#191970", color2: "#FFD700" },
        { number: 25, name: "Moderne Cyan", color1: "#0F0F1E", color2: "#00F2FE" },
        { number: 26, name: "Violet Électrique", color1: "#10002B", color2: "#8338EC" },
        { number: 27, name: "Feu Orange", color1: "#1A0F00", color2: "#FF8C00" },
        { number: 28, name: "Confiance Bleue", color1: "#001219", color2: "#005F73" },
        { number: 29, name: "Émeraude Naturel", color1: "#081C15", color2: "#2D6A4F" },
        { number: 30, name: "Vert Printemps", color1: "#0A1410", color2: "#059669" },
        { number: 31, name: "Bleu Royal", color1: "#000814", color2: "#4169E1" },
        { number: 32, name: "Rose Élégant", color1: "#1A1315", color2: "#B76E79" },
        { number: 33, name: "Violet Majestueux", color1: "#1A051A", color2: "#9D4EDD" },
        { number: 34, name: "Vert Écologique", color1: "#0F1A0F", color2: "#4CAF50" },
        { number: 35, name: "Magenta Audacieux", color1: "#1A0A10", color2: "#FF00FF" },
        { number: 36, name: "Bleu Minuit", color1: "#0A0A12", color2: "#191970" },
        { number: 37, name: "Or Solaire", color1: "#1A1008", color2: "#DAA520" },
        { number: 38, name: "Cyan Océan", color1: "#0A1414", color2: "#008B8B" },
        { number: 39, name: "Rose Pastel", color1: "#1A0F12", color2: "#FFB6C1" },
        { number: 40, name: "Améthyste Riche", color1: "#0F1028", color2: "#4B0082" },
        { number: 41, name: "Néon Violet", color1: "#000000", color2: "#BF00FF" },
        { number: 42, name: "Bordeaux Profond", color1: "#1A0A0F", color2: "#800020" },
        { number: 43, name: "Rose Intense", color1: "#0A0A0A", color2: "#FF1493" },
        { number: 44, name: "Rouge Classique", color1: "#000000", color2: "#FF0000" },
        { number: 45, name: "Indigo Mystère", color1: "#0F0F1A", color2: "#483D8B" },
        { number: 46, name: "Élégance Grise", color1: "#000000", color2: "#2B2B2B" },
        { number: 47, name: "Vert Citron", color1: "#0A140A", color2: "#32CD32" },
        { number: 48, name: "Bleu Marine", color1: "#000814", color2: "#0047AB" },
        { number: 49, name: "Bronze Chaleureux", color1: "#1A1008", color2: "#CD853F" },
        { number: 50, name: "Pêche Délicate", color1: "#1A1410", color2: "#FFDAB9" },
        { number: 51, name: "Azur Profond", color1: "#0A1416", color2: "#00BFFF" },
        { number: 52, name: "Lilas Doux", color1: "#1A1A2E", color2: "#E6E6FA" }
    ];

    var currentThemeNum = parseInt(document.getElementById('selected_theme').value) || 1;
    var grid = document.getElementById('theme-grid');
    var hiddenInput = document.getElementById('selected_theme');
    var searchInput = document.getElementById('theme-search');
    var currentPreview = document.getElementById('current-theme-preview');
    var currentLabel = document.getElementById('current-theme-label');

    function renderGrid(filter) {
        grid.innerHTML = '';
        var filterLower = (filter || '').toLowerCase();

        themes.forEach(function(theme) {
            if (filterLower && theme.name.toLowerCase().indexOf(filterLower) === -1 && String(theme.number).indexOf(filterLower) === -1) {
                return;
            }

            var card = document.createElement('div');
            card.className = 'theme-card' + (theme.number === currentThemeNum ? ' selected' : '');
            card.setAttribute('data-theme', theme.number);
            card.innerHTML =
                '<div class="theme-preview">' +
                    '<div class="color-half" style="background:' + theme.color1 + '"></div>' +
                    '<div class="color-half" style="background:' + theme.color2 + '"></div>' +
                '</div>' +
                '<div class="theme-info">' +
                    '<div class="theme-number">N°' + theme.number + '</div>' +
                    '<div class="theme-name">' + theme.name + '</div>' +
                '</div>';

            card.addEventListener('click', function() {
                selectTheme(theme.number);
            });

            grid.appendChild(card);
        });
    }

    function selectTheme(number) {
        currentThemeNum = number;
        hiddenInput.value = number;

        document.querySelectorAll('.theme-card').forEach(function(c) {
            c.classList.remove('selected');
        });
        var sel = document.querySelector('.theme-card[data-theme="' + number + '"]');
        if (sel) sel.classList.add('selected');

        var theme = themes.filter(function(t) { return t.number === number; })[0];
        if (theme) {
            currentPreview.innerHTML =
                '<div class="color-half" style="background:' + theme.color1 + '"></div>' +
                '<div class="color-half" style="background:' + theme.color2 + '"></div>';
            currentLabel.textContent = 'Thème n°' + theme.number + ' — ' + theme.name;
        }
    }

    searchInput.addEventListener('input', function() {
        renderGrid(this.value);
    });

    renderGrid();
    selectTheme(currentThemeNum);
})();
</script>
{% endblock %}