{% extends 'base.html' %}
{% load static %}

{% block title %}Produkte - Kasico Fursuit Shop{% endblock %}

{% block content %}
<div class="furry-card">
    <div class="furry-card-header">
        <div>
            <h1 class="furry-card-title">🐾 Unsere Fursuits</h1>
            <p class="furry-card-subtitle">Entdecke unsere handgefertigten Fursuits und Accessoires</p>
        </div>
        <div class="furry-product-badge">Neu</div>
    </div>
    
    <!-- Filter Section -->
    <div class="furry-card" style="margin-bottom: 2rem;">
        <h3>🔍 Filter & Suche</h3>
        <form method="get" class="furry-form-group">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
                <div>
                    <label class="furry-label">Fursuit Typ</label>
                    <select name="fursuit_type" class="furry-input furry-select">
                        <option value="">Alle Typen</option>
                        <option value="partial">Partial</option>
                        <option value="fullsuit">Fullsuit</option>
                        <option value="head_only">Head Only</option>
                        <option value="paws">Paws</option>
                        <option value="tail">Tail</option>
                    </select>
                </div>
                <div>
                    <label class="furry-label">Stil</label>
                    <select name="style" class="furry-input furry-select">
                        <option value="">Alle Stile</option>
                        <option value="toony">Toony</option>
                        <option value="semi_realistic">Semi-Realistic</option>
                        <option value="realistic">Realistic</option>
                        <option value="anime">Anime</option>
                        <option value="chibi">Chibi</option>
                    </select>
                </div>
                <div>
                    <label class="furry-label">Preisbereich</label>
                    <select name="price_range" class="furry-input furry-select">
                        <option value="">Alle Preise</option>
                        <option value="0-500">0 - 500€</option>
                        <option value="500-1000">500 - 1000€</option>
                        <option value="1000-2000">1000 - 2000€</option>
                        <option value="2000+">2000€+</option>
                    </select>
                </div>
                <div>
                    <label class="furry-label">Sortierung</label>
                    <select name="sort" class="furry-input furry-select">
                        <option value="newest">Neueste zuerst</option>
                        <option value="price_low">Preis: Niedrig zu Hoch</option>
                        <option value="price_high">Preis: Hoch zu Niedrig</option>
                        <option value="name">Name A-Z</option>
                    </select>
                </div>
            </div>
            <div style="margin-top: 1rem; display: flex; gap: 1rem; flex-wrap: wrap;">
                <button type="submit" class="furry-btn furry-btn-primary">
                    🔍 Filter anwenden
                </button>
                <a href="{% url 'products:product_list' %}" class="furry-btn furry-btn-ghost">
                    🗑️ Filter zurücksetzen
                </a>
            </div>
        </form>
    </div>

    <!-- Products Grid -->
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;">
        {% for product in products %}
        <div class="furry-card furry-product-card">
            {% if product.image %}
            <img data-src="{{ product.image.url }}" alt="{{ product.name }}" class="furry-card-image furry-lazy-image">
            {% else %}
            <div class="furry-card-image" style="background: linear-gradient(45deg, var(--furry-primary), var(--furry-secondary)); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
                🐾
            </div>
            {% endif %}
            
            <div class="furry-card-header">
                <div>
                    <h3 class="furry-card-title">{{ product.name }}</h3>
                    <p class="furry-card-subtitle">{{ product.get_fursuit_type_display }} • {{ product.get_style_display }}</p>
                </div>
                {% if product.featured %}
                <div class="furry-product-badge">Featured</div>
                {% endif %}
            </div>
            
            <div class="furry-card-content">
                <p>{{ product.description|truncatewords:20 }}</p>
                <div class="furry-product-price">{{ product.price }}€</div>
            </div>
            
            <div class="furry-card-footer">
                <a href="{% url 'products:product_detail' product.id %}" class="furry-btn furry-btn-primary furry-btn-sm">
                    👁️ Details
                </a>
                <button class="furry-btn furry-btn-outline furry-btn-sm" onclick="addToCart({{ product.id }})">
                    🛒 In Warenkorb
                </button>
                <button class="furry-btn furry-btn-ghost furry-btn-sm" onclick="furryAjax.addToWishlist({{ product.id }})">
                    ❤️ Zur Wunschliste
                </button>
            </div>
        </div>
        {% empty %}
        <div class="furry-card" style="grid-column: 1 / -1; text-align: center; padding: 3rem;">
            <div style="font-size: 4rem; margin-bottom: 1rem;">🐾</div>
            <h3>Keine Produkte gefunden</h3>
            <p>Versuche andere Filter-Einstellungen oder schaue später wieder vorbei!</p>
            <a href="{% url 'products:product_list' %}" class="furry-btn furry-btn-primary">
                Alle Produkte anzeigen
            </a>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if products.has_other_pages %}
    <div class="furry-card" style="margin-top: 2rem; text-align: center;">
        <div style="display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;">
            {% if products.has_previous %}
            <a href="?page={{ products.previous_page_number }}" class="furry-btn furry-btn-ghost furry-btn-sm">
                ← Zurück
            </a>
            {% endif %}
            
            {% for num in products.paginator.page_range %}
            {% if products.number == num %}
            <span class="furry-btn furry-btn-primary furry-btn-sm">{{ num }}</span>
            {% elif num > products.number|add:'-3' and num < products.number|add:'3' %}
            <a href="?page={{ num }}" class="furry-btn furry-btn-ghost furry-btn-sm">{{ num }}</a>
            {% endif %}
            {% endfor %}
            
            {% if products.has_next %}
            <a href="?page={{ products.next_page_number }}" class="furry-btn furry-btn-ghost furry-btn-sm">
                Weiter →
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<!-- Success/Error Messages -->
{% if messages %}
{% for message in messages %}
<div class="furry-alert furry-alert-{{ message.tags }}">
    <div class="furry-alert-icon">
        {% if message.tags == 'success' %}✅
        {% elif message.tags == 'error' %}❌
        {% elif message.tags == 'warning' %}⚠️
        {% else %}ℹ️{% endif %}
    </div>
    <div class="furry-alert-content">
        <div class="furry-alert-title">{{ message.tags|title }}</div>
        <div class="furry-alert-message">{{ message }}</div>
    </div>
</div>
{% endfor %}
{% endif %}

<div id="cart-feedback" class="cart-added-feedback">✔️ Zum Warenkorb hinzugefügt!</div>
<div id="furry-spinner" class="furry-spinner" style="display:none;">
  <div></div><div></div><div></div>
</div>
<script>
function showCartFeedback() {
    const feedback = document.getElementById('cart-feedback');
    feedback.classList.add('show');
    setTimeout(() => feedback.classList.remove('show'), 1500);
}
function showSpinner(show) {
    document.getElementById('furry-spinner').style.display = show ? 'inline-block' : 'none';
}
window.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            showSpinner(true);
            setTimeout(() => {
                showSpinner(false);
                showCartFeedback();
            }, 1000);
        });
    });
});
</script>
{% endblock %}