{% extends "base.html" %}

{% block content %}

<div class="hero">
    <h1>Premium Second Hand Fashion</h1>
    <p>Find unique pieces curated for you.</p>
</div>

<div class="smart-filters" id="category-filters">
    <button class="filter-btn active" onclick="filterCategory('All')">Alle</button>
    <button class="filter-btn" onclick="filterCategory('Kleidung')">Kleidung</button>
    <button class="filter-btn" onclick="filterCategory('Schuhe')">Schuhe</button>
    <button class="filter-btn" onclick="filterCategory('Accessoires')">Accessoires</button>
</div>

<div class="smart-filters" id="size-filters" style="display: none;">
    <!-- Sizes populated by JS -->
</div>

<div class="product-grid">
    {% for product in products %}
    <div class="product-card" data-category="{{ product.category }}">
        <div class="product-image"
            style="background-image: url('{{ product.images[0] if product.images else '' }}'); cursor: pointer;"
            onclick="window.location.href='/product/{{ product.id }}'">
            <div class="icon-action icon-heart {% if product.id in wishlist %}active{% endif %}"
                onclick="event.stopPropagation(); toggleHeart({{ product.id }}, this)">
                &hearts;
            </div>
        </div>
        <div class="product-info">
            <a href="/product/{{ product.id }}">
                <h3 class="product-title">{{ product.title }}</h3>
                <div class="product-meta">
                    <span class="product-size">{{ product.size }}</span>
                    <span class="product-price">{{ "%.2f"|format(product.price) }} €</span>
                </div>
            </a>

            <div class="btn-twin-container" style="margin-top: auto;">
                <button class="btn btn-negotiate"
                    onclick="event.stopPropagation(); openNegotiationModal({{ product.id }})"
                    style="font-size: 0.8rem; padding: 5px;">
                    🤝 Preis
                </button>
                <button class="btn btn-buy" id="cart-btn-{{ product.id }}"
                    onclick="event.stopPropagation(); toggleCart({{ product.id }}, this)"
                    style="font-size: 0.8rem; padding: 5px;">
                    🛒 {% if product.id in cart %}Im{% else %}In{% endif %}
                </button>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Re-use Modal from Detail Page Logic -->
<div id="negotiationModal" class="modal">
    <div class="modal-content">
        <span class="close-modal" onclick="closeNegotiationModal()">&times;</span>
        <h2 style="color: var(--color-green);">Preisvorschlag senden</h2>
        <div style="margin: 20px 0;">
            <input type="number" id="offerPrice" placeholder="Your Offer (€)" step="0.50"
                style="padding: 10px; font-size: 1rem; width: 100%; border: 1px solid #ddd; border-radius: 4px;">
        </div>
        <button class="btn btn-primary" onclick="sendOffer(currentProductId)">
            Senden
        </button>
        <p style="font-size: 0.7rem; color: #888; margin-top: 10px;">
            Mit Abgabe Ihres Gebots erklären Sie sich bereit, den Artikel bei Annahme zu diesem Preis zu erwerben.
        </p>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    let currentProductId = null;
    function openNegotiationModal(pid) {
        currentProductId = pid;
        document.getElementById('negotiationModal').style.display = 'flex';
    }
    // sendOffer logic is in app.js, updated to handle global currentProductId if passed or adapt app.js
    // App.js uses sendOffer(productId), I might need to make sure index logic matches.
    // I'll update sendOffer in app.js to accept argument.
</script>
{% endblock %}