{% extends "base.html" %}

{% block title %}{{ producto.Nombre }} - TallArt{% endblock %}

{% block content %}
<div style="background: #f5f5f5; min-height: 100vh; padding: 2rem 0;">
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
        
        <!-- Breadcrumb -->
        <div style="margin-bottom: 2rem; color: #6B7280; font-size: 0.9rem;">
            <a href="{{ url_for('main.index') }}" style="color: #8B5CF6; text-decoration: none;">Inicio</a>
            <span style="margin: 0 0.5rem;">/</span>
            <a href="{{ url_for('main.productos') }}" style="color: #8B5CF6; text-decoration: none;">Productos</a>
            <span style="margin: 0 0.5rem;">/</span>
            <span>{{ producto.Nombre }}</span>
        </div>

        <!-- Producto Principal -->
        <div style="background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 2rem;">
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0;">
                
                <!-- Imagen del Producto -->
                <div style="padding: 3rem; background: #F9FAFB;">
                    {% if producto.ImagenPrincipal %}
                    <img src="{{ url_for('static', filename=producto.ImagenPrincipal.lstrip('/').replace('static/', '')) }}" 
                         alt="{{ producto.Nombre }}"
                         style="width: 100%; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);"
                         onerror="this.src='{{ url_for('static', filename='graficos/Logo.png') }}'">
                    {% else %}
                    <img src="{{ url_for('static', filename='graficos/Logo.png') }}" 
                         alt="{{ producto.Nombre }}"
                         style="width: 100%; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);">
                    {% endif %}
                </div>

                <!-- Información del Producto -->
                <div style="padding: 3rem;">
                    
                    <!-- Badges -->
                    <div style="margin-bottom: 1rem;">
                        <span style="display: inline-block; padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600; background: linear-gradient(135deg, #8B5CF6, #7C3AED); color: white;">
                            {{ producto.CategoriaNombre }}
                        </span>
                    </div>

                    <!-- Título -->
                    <h1 style="font-size: 2.25rem; font-weight: 800; color: #1F2937; margin-bottom: 1rem; line-height: 1.2;">
                        {{ producto.Nombre }}
                    </h1>

                    <!-- Empresa -->
                    <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 2px solid #E5E7EB;">
                        <svg style="width: 20px; height: 20px; color: #6B7280;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                        </svg>
                        <span>Artesano:</span>
                        {% if empresa %}
                        <a href="{{ url_for('main.empresa', slug=empresa.Slug) }}" 
                           style="color: #8B5CF6; font-weight: 600; text-decoration: none;">
                            {{ empresa.Nombre }}
                        </a>
                        {% endif %}
                    </div>

                    <!-- Rating -->
                    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
                        <div style="display: flex; gap: 0.25rem;">
                            {% for i in range(1, 6) %}
                                {% if i <= calificacion_promedio %}
                                <span style="color: #FCD34D; font-size: 1.5rem;">★</span>
                                {% else %}
                                <span style="color: #D1D5DB; font-size: 1.5rem;">★</span>
                                {% endif %}
                            {% endfor %}
                        </div>
                        <span style="font-weight: 600; color: #374151;">{{ "%.1f"|format(calificacion_promedio) }}</span>
                        <span style="color: #6B7280;">({{ total_comentarios }} reseñas)</span>
                    </div>

                    <!-- Precio -->
                    <div style="margin-bottom: 2rem;">
                        <span style="font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, #8B5CF6, #EC4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                            S/ {{ "%.2f"|format(producto.Precio) }}
                        </span>
                    </div>

                    <!-- Stock -->
                    {% if producto.Stock > 10 %}
                    <div style="padding: 0.75rem 1rem; background: #D1FAE5; color: #065F46; border-radius: 8px; margin-bottom: 2rem; font-weight: 600;">
                        ✓ En stock ({{ producto.Stock }} disponibles)
                    </div>
                    {% elif producto.Stock > 0 %}
                    <div style="padding: 0.75rem 1rem; background: #FEF3C7; color: #92400E; border-radius: 8px; margin-bottom: 2rem; font-weight: 600;">
                        ⚠ Pocas unidades ({{ producto.Stock }} disponibles)
                    </div>
                    {% else %}
                    <div style="padding: 0.75rem 1rem; background: #FEE2E2; color: #991B1B; border-radius: 8px; margin-bottom: 2rem; font-weight: 600;">
                        ✗ Agotado
                    </div>
                    {% endif %}

                    <!-- Descripción -->
                    <div style="color: #4B5563; line-height: 1.7; margin-bottom: 2rem;">
                        {{ producto.Descripcion }}
                    </div>

                    <!-- Selector de Cantidad -->
                    {% if producto.Stock > 0 %}
                    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;">
                        <span style="font-weight: 600; color: #6B7280;">Cantidad:</span>
                        <button onclick="decreaseQty()" style="width: 40px; height: 40px; border: 2px solid #E5E7EB; background: white; border-radius: 8px; font-weight: bold; cursor: pointer;">-</button>
                        <input type="number" id="quantity" value="1" min="1" max="{{ producto.Stock }}" 
                               style="width: 60px; text-align: center; padding: 0.5rem; border: 2px solid #E5E7EB; border-radius: 8px; font-weight: 600;">
                        <button onclick="increaseQty()" style="width: 40px; height: 40px; border: 2px solid #E5E7EB; background: white; border-radius: 8px; font-weight: bold; cursor: pointer;">+</button>
                    </div>

                    <!-- Botones de Acción -->
                    <div style="display: flex; gap: 1rem;">
                        <button onclick="addToCart()" 
                                style="flex: 1; background: linear-gradient(135deg, #8B5CF6, #EC4899); color: white; padding: 1rem 2rem; border: none; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);">
                            <svg style="width: 24px; height: 24px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                            Agregar al Carrito
                        </button>
                        <button onclick="toggleFavorite()" 
                                style="width: 60px; background: white; border: 2px solid #E5E7EB; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;">
                            <svg style="width: 24px; height: 24px; color: #EF4444;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                            </svg>
                        </button>
                    </div>
                    {% else %}
                    <button disabled 
                            style="width: 100%; background: #9CA3AF; color: white; padding: 1rem 2rem; border: none; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: not-allowed; opacity: 0.5;">
                        Producto Agotado
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Sección de Comentarios y Reseñas -->
        <div style="background: white; border-radius: 20px; padding: 3rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
            <h2 style="font-size: 2rem; font-weight: 800; color: #1F2937; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem;">
                <svg style="width: 32px; height: 32px; color: #8B5CF6;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
                </svg>
                Opiniones y Reseñas
            </h2>

            <!-- Formulario de Comentario -->
            {% if session.user_id %}
            <div style="background: #F9FAFB; padding: 2rem; border-radius: 16px; margin-bottom: 3rem; border: 2px solid #E5E7EB;">
                <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; color: #1F2937;">
                    ✍️ Deja tu reseña
                </h3>
                <form method="POST" action="{{ url_for('main.agregar_comentario_producto', producto_id=producto.ProductoID) }}" id="reviewForm">
                    <!-- Calificación -->
                    <div style="margin-bottom: 1.5rem;">
                        <label style="display: block; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">
                            Calificación <span style="color: #EF4444;">*</span>
                        </label>
                        <div style="display: flex; gap: 0.5rem;" id="star-rating-container">
                            <span class="star-rating-input" data-value="1" style="font-size: 2rem; color: #D1D5DB; cursor: pointer;">★</span>
                            <span class="star-rating-input" data-value="2" style="font-size: 2rem; color: #D1D5DB; cursor: pointer;">★</span>
                            <span class="star-rating-input" data-value="3" style="font-size: 2rem; color: #D1D5DB; cursor: pointer;">★</span>
                            <span class="star-rating-input" data-value="4" style="font-size: 2rem; color: #D1D5DB; cursor: pointer;">★</span>
                            <span class="star-rating-input" data-value="5" style="font-size: 2rem; color: #D1D5DB; cursor: pointer;">★</span>
                        </div>
                        <input type="hidden" id="calificacionInput" name="calificacion" value="5" required>
                        <p style="margin-top: 0.5rem; font-size: 0.875rem; color: #6B7280;">
                            <span id="ratingText" style="font-weight: 600; color: #10B981;">Excelente (5 estrellas)</span>
                        </p>
                    </div>
                    
                    <!-- Reseña -->
                    <div style="margin-bottom: 1.5rem;">
                        <label style="display: block; font-weight: 600; color: #374151; margin-bottom: 0.5rem;">
                            Tu reseña <span style="color: #EF4444;">*</span>
                        </label>
                        <textarea name="contenido" id="contenidoTextarea" rows="4" required minlength="10" maxlength="1000"
                                  style="width: 100%; padding: 1rem; border: 2px solid #E5E7EB; border-radius: 12px; font-size: 1rem; resize: vertical; font-family: inherit;"
                                  placeholder="Comparte tu experiencia con este producto... (mínimo 10 caracteres)"></textarea>
                        <div style="display: flex; justify-content: space-between; margin-top: 0.5rem;">
                            <p style="font-size: 0.875rem; color: #6B7280;">
                                💡 Sé específico sobre calidad, acabado, diseño, etc.
                            </p>
                            <p style="font-size: 0.875rem; color: #6B7280;">
                                <span id="charCount">0</span>/1000 caracteres
                            </p>
                        </div>
                    </div>
                    
                    <button type="submit" 
                            style="background: linear-gradient(135deg, #10B981, #059669); color: white; padding: 0.875rem 2.5rem; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.3s ease; font-size: 1rem;"
                            onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(16, 185, 129, 0.4)'"
                            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(16, 185, 129, 0.3)'">
                        📤 Publicar Reseña
                    </button>
                </form>
            </div>
            {% else %}
            <div style="background: linear-gradient(135deg, #FEF3C7, #FDE68A); border: 2px solid #FCD34D; padding: 2rem; border-radius: 16px; text-align: center; margin-bottom: 3rem;">
                <div style="font-size: 3rem; margin-bottom: 1rem;">🔒</div>
                <p style="font-size: 1.2rem; color: #92400E; margin-bottom: 1.5rem; font-weight: 600;">
                    Inicia sesión para dejar tu reseña
                </p>
                <p style="font-size: 0.95rem; color: #B45309; margin-bottom: 1.5rem;">
                    Comparte tu experiencia con otros compradores
                </p>
                <a href="{{ url_for('auth.login') }}" 
                   style="display: inline-block; background: linear-gradient(135deg, #8B5CF6, #EC4899); color: white; padding: 0.875rem 2.5rem; border-radius: 12px; text-decoration: none; font-weight: 700; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); transition: all 0.3s ease;"
                   onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(139, 92, 246, 0.4)'"
                   onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(139, 92, 246, 0.3)'">
                    🔑 Iniciar Sesión
                </a>
            </div>
            {% endif %}

            <!-- Lista de Comentarios -->
            <div>
                <h3 style="font-size: 1.5rem; font-weight: 800; color: #1F2937; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
                    💬 Reseñas de Clientes 
                    <span style="font-size: 1rem; color: #6B7280; font-weight: 600;">({{ total_comentarios }})</span>
                </h3>
                
                {% if comentarios %}
                    {% for comentario in comentarios %}
                    <div style="padding: 1.75rem; border: 2px solid #F3F4F6; border-radius: 16px; margin-bottom: 1.25rem; background: white; transition: all 0.3s ease;"
                         onmouseover="this.style.borderColor='#E5E7EB'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.05)'"
                         onmouseout="this.style.borderColor='#F3F4F6'; this.style.boxShadow='none'">
                        
                        <!-- Header del comentario -->
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                            <div style="display: flex; align-items: center; gap: 1rem;">
                                <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #8B5CF6, #EC4899); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 1.25rem; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);">
                                    {{ comentario.NombreUsuario[0].upper() if comentario.NombreUsuario else 'U' }}
                                </div>
                                <div>
                                    <span style="font-weight: 800; color: #1F2937; font-size: 1.1rem; display: block;">
                                        {{ comentario.NombreUsuario }}
                                    </span>
                                    <span style="color: #9CA3AF; font-size: 0.875rem; display: flex; align-items: center; gap: 0.25rem;">
                                        <svg style="width: 14px; height: 14px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                        </svg>
                                        {{ comentario.FechaCreacion.strftime('%d de %B, %Y') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Estrellas de calificación -->
                        <div style="display: flex; gap: 0.25rem; margin-bottom: 1rem;">
                            {% for i in range(1, 6) %}
                                {% if i <= comentario.Calificacion %}
                                <span style="color: #FCD34D; font-size: 1.5rem; text-shadow: 0 2px 4px rgba(252, 211, 77, 0.3);">★</span>
                                {% else %}
                                <span style="color: #E5E7EB; font-size: 1.5rem;">★</span>
                                {% endif %}
                            {% endfor %}
                            <span style="margin-left: 0.5rem; color: #6B7280; font-weight: 600; font-size: 0.95rem;">
                                {{ comentario.Calificacion }}/5
                            </span>
                        </div>
                        
                        <!-- Contenido del comentario -->
                        <p style="color: #4B5563; line-height: 1.7; font-size: 1rem; background: #F9FAFB; padding: 1rem; border-radius: 12px; border-left: 4px solid #8B5CF6;">
                            "{{ comentario.Contenido }}"
                        </p>
                        
                        <!-- Badge verificado (opcional, si tienes ese campo) -->
                        {% if comentario.get('EsVerificado') %}
                        <div style="margin-top: 1rem;">
                            <span style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: #D1FAE5; color: #065F46; border-radius: 50px; font-size: 0.875rem; font-weight: 700;">
                                <svg style="width: 16px; height: 16px;" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                Compra Verificada
                            </span>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                {% else %}
                    <div style="text-align: center; padding: 4rem 2rem; background: linear-gradient(135deg, #F9FAFB, #F3F4F6); border-radius: 20px; border: 2px dashed #D1D5DB;">
                        <div style="font-size: 4rem; margin-bottom: 1rem; opacity: 0.5;">💭</div>
                        <h4 style="font-size: 1.5rem; font-weight: 800; color: #374151; margin-bottom: 0.75rem;">
                            No hay reseñas aún
                        </h4>
                        <p style="font-size: 1.1rem; color: #6B7280; margin-bottom: 0;">
                            ¡Sé el primero en compartir tu opinión sobre este producto!
                        </p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
// Selector de cantidad
function increaseQty() {
    const input = document.getElementById('quantity');
    const max = parseInt(input.max);
    if (parseInt(input.value) < max) {
        input.value = parseInt(input.value) + 1;
    }
}

function decreaseQty() {
    const input = document.getElementById('quantity');
    if (parseInt(input.value) > 1) {
        input.value = parseInt(input.value) - 1;
    }
}

// Agregar al carrito
function addToCart() {
    const quantity = document.getElementById('quantity').value;
    const productId = {{ producto.ProductoID }};
    
    fetch('/cart/add', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `product_id=${productId}&quantity=${quantity}`
    })
    .then(response => {
        if (response.ok) {
            alert('✓ Producto agregado al carrito');
        } else {
            alert('Error al agregar al carrito');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al agregar al carrito');
    });
}

// Toggle favorito
function toggleFavorite() {
    const productId = {{ producto.ProductoID }};
    
    fetch('/api/favoritos/agregar', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            item_id: productId,
            type: 'producto'
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.is_favorite ? '♥ Agregado a favoritos' : 'Eliminado de favoritos');
        } else {
            alert(data.message || 'Debes iniciar sesión');
            window.location.href = '/auth/login';
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

// Sistema de calificación por estrellas
document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelectorAll('.star-rating-input');
    const calificacionInput = document.getElementById('calificacionInput');
    const ratingText = document.getElementById('ratingText');
    const textarea = document.getElementById('contenidoTextarea');
    const charCount = document.getElementById('charCount');
    
    // Textos descriptivos para cada calificación
    const ratingDescriptions = {
        1: '😞 Muy malo (1 estrella)',
        2: '😐 Malo (2 estrellas)',
        3: '😊 Regular (3 estrellas)',
        4: '😃 Bueno (4 estrellas)',
        5: '🌟 Excelente (5 estrellas)'
    };
    
    // Sistema de estrellas
    if (stars.length > 0 && calificacionInput) {
        // Inicializar con 5 estrellas seleccionadas
        stars.forEach((s, index) => {
            if (index < 5) {
                s.style.color = '#FCD34D';
            } else {
                s.style.color = '#D1D5DB';
            }
        });
        
        // Hover effect
        stars.forEach(star => {
            star.addEventListener('mouseenter', function() {
                const value = parseInt(this.getAttribute('data-value'));
                stars.forEach((s, index) => {
                    if (index < value) {
                        s.style.color = '#FCD34D';
                    } else {
                        s.style.color = '#D1D5DB';
                    }
                });
            });
            
            star.addEventListener('click', function() {
                const value = parseInt(this.getAttribute('data-value'));
                calificacionInput.value = value;
                
                // Actualizar texto descriptivo
                if (ratingText) {
                    ratingText.textContent = ratingDescriptions[value];
                    ratingText.style.color = value >= 4 ? '#10B981' : (value === 3 ? '#F59E0B' : '#EF4444');
                }
                
                stars.forEach((s, index) => {
                    if (index < value) {
                        s.style.color = '#FCD34D';
                    } else {
                        s.style.color = '#D1D5DB';
                    }
                });
            });
        });
        
        // Restaurar al salir del hover
        const container = document.getElementById('star-rating-container');
        if (container) {
            container.addEventListener('mouseleave', function() {
                const currentValue = parseInt(calificacionInput.value);
                stars.forEach((s, index) => {
                    if (index < currentValue) {
                        s.style.color = '#FCD34D';
                    } else {
                        s.style.color = '#D1D5DB';
                    }
                });
            });
        }
    }
    
    // Contador de caracteres
    if (textarea && charCount) {
        textarea.addEventListener('input', function() {
            const length = this.value.length;
            charCount.textContent = length;
            
            // Cambiar color según longitud
            if (length < 10) {
                charCount.style.color = '#EF4444'; // Rojo si es muy corto
            } else if (length > 900) {
                charCount.style.color = '#F59E0B'; // Naranja si se acerca al límite
            } else {
                charCount.style.color = '#10B981'; // Verde si está bien
            }
        });
    }
});
</script>
{% endblock %}