{% extends "tienda/base.html" %}
{% load static %}
{% load vat_filters %}

{% block head %}
    <style>
        .search-container {
            margin: 30px 0;
        }
        .search-title {
            margin-bottom: 30px;
        }
        .product-card {
            transition: transform 0.3s ease;
        }
        .product-card:hover {
            transform: translateY(-5px);
        }
        .no-results {
            text-align: center;
            padding: 60px 20px;
        }
        .no-results i {
            font-size: 4rem;
            color: #ccc;
            margin-bottom: 20px;
        }
    </style>
{% endblock %}

{% block content %}
<div class="search-container">
    <div class="row">
        <div class="col-12">
            <div class="search-title">
                {% if query %}
                    <h2>Resultados de búsqueda para: <strong>"{{ query }}"</strong></h2>
                    <p class="text-muted">Se encontraron {{ products.count }} resultado(s)</p>
                {% else %}
                    <h2>Búsqueda de productos</h2>
                    <p class="text-muted">Ingresa un término de búsqueda para encontrar productos</p>
                {% endif %}
            </div>
        </div>
    </div>

    {% if products %}
        <div class="row g-4">
            {% for product in products %}
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card product-card h-100">
                        {% if product.primary_image %}
                            <img src="{{ product.primary_image.image.url }}" class="card-img-top" alt="{{ product.name }}" style="height: 250px; object-fit: cover;">
                        {% else %}
                            <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 250px;">
                                <span class="text-muted">Sin imagen</span>
                            </div>
                        {% endif %}
                        
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">{{ product.name }}</h5>
                            
                            {% if product.briefdesc %}
                                <p class="card-text text-muted small">{{ product.briefdesc|truncatewords:15 }}</p>
                            {% endif %}
                            
                            <div class="mt-auto">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="price-info">
                                        <small class="text-muted d-block">€{{ product.price|format_price }}</small>
                                        <span class="h5 mb-0 text-primary">€{{ product.get_price_with_vat|format_price }}</span>
                                    </div>
                                    {% if product.creator %}
                                        <small class="text-muted">{{ product.creator.first_name|default:product.creator.username }}</small>
                                    {% endif %}
                                </div>
                                
                                <div class="mt-3 gap-2 d-flex">
                                    <a href="{% url 'producto' product.id %}" class="btn btn-primary btn-sm flex-grow-1">
                                        Ver detalles
                                    </a>
                                    <a href="{% url 'add_to_cart' product.id %}" class="btn btn-outline-primary btn-sm">
                                        🛒
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% elif query %}
        <div class="no-results">
            <h3 class="text-muted">No se encontraron productos</h3>
            <p class="text-muted">Intenta con otros términos de búsqueda o <a href="{% url 'index' %}">vuelve al inicio</a></p>
        </div>
    {% else %}
        <div class="no-results">
            <h3 class="text-muted">Realiza una búsqueda</h3>
            <p class="text-muted">Usa la barra de búsqueda superior para encontrar productos</p>
        </div>
    {% endif %}
</div>
{% endblock %}