{% extends 'base.html' %}
{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h2>Raffle Items</h2>
    <div style="display: flex; gap: 1rem;">
        <a href="?" class="btn-secondary-small"
            style="{% if not request.GET.favorites %}background: var(--primary); color: white; border-color: var(--primary);{% endif %}">All
            Items</a>
        <a href="?favorites=1" class="btn-secondary-small"
            style="{% if request.GET.favorites == '1' %}background: var(--primary); color: white; border-color: var(--primary);{% endif %}">My
            Favorites</a>
    </div>
</div>

<div class="item-grid">
    {% for item in items %}
    <div class="item-card glassmorphism">
        {% if item.picture %}
        <img src="{{ item.picture.url }}" alt="{{ item.title }}" class="item-img">
        {% else %}
        <div class="item-img"
            style="display:flex;align-items:center;justify-content:center;color:var(--text-muted);background:var(--secondary);">
            No Image</div>
        {% endif %}

        <div style="flex-grow: 1;">
            <span style="color:var(--primary); font-weight: 800; font-size: 0.85rem; letter-spacing: 1px;">#{{
                item.item_number }}</span>
            <h3 style="margin-top: 0.25rem;">{{ item.title }}</h3>
            <p style="color:var(--text-muted); font-size: 0.95rem; margin-top: 0.5rem;">{{ item.description|linebreaksbr
                }}</p>
        </div>

        <div
            style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--glass-border);">
            <div style="display: flex; gap: 0.5rem;">
                {% if user.is_auctioneer %}
                <a href="{% url 'item_detail' item.pk %}" class="btn-secondary-small"
                    style="padding: 0.35rem 0.75rem;">View</a>
                <a href="{% url 'item_update' item.pk %}" class="btn-secondary-small"
                    style="padding: 0.35rem 0.75rem;">Edit</a>
                {% endif %}
            </div>

            <button class="favorite-btn" data-id="{{ item.id }}"
                style="background:none;border:none;color:white;cursor:pointer;display:flex;align-items:center;gap:0.5rem;font-size:1rem;transition:transform 0.2s;">
                <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2"
                    fill="{% if item.id in user_favorites %}#ef4444{% else %}none{% endif %}" stroke-linecap="round"
                    stroke-linejoin="round" class="heart-icon"
                    style="color: {% if item.id in user_favorites %}#ef4444{% else %}var(--text-muted){% endif %}; transition: all 0.2s;">
                    <path
                        d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
                    </path>
                </svg>
                <span class="fav-count">{{ item.favorited_by.count }}</span>
            </button>
        </div>
    </div>
    {% empty %}
    <div class="glassmorphism"
        style="grid-column: 1 / -1; padding: 3rem; text-align: center; color: var(--text-muted);">
        <p>No items found.</p>
    </div>
    {% endfor %}
</div>

<script>
    const csrfToken = '{{ csrf_token }}';
    document.querySelectorAll('.favorite-btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            // Animate button push
            btn.style.transform = 'scale(0.9)';
            setTimeout(() => btn.style.transform = 'scale(1)', 150);

            const id = btn.dataset.id;
            try {
                const res = await fetch(`/item/${id}/favorite/`, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': csrfToken,
                        'Content-Type': 'application/json'
                    }
                });
                const data = await res.json();
                if (data.status === 'success') {
                    const icon = btn.querySelector('.heart-icon');
                    if (data.is_favorite) {
                        icon.style.fill = '#ef4444';
                        icon.style.color = '#ef4444';
                    } else {
                        icon.style.fill = 'none';
                        icon.style.color = 'var(--text-muted)';
                    }
                    btn.querySelector('.fav-count').textContent = data.count;
                }
            } catch (err) {
                console.error('Error toggling favorite', err);
            }
        });
    });
</script>
{% endblock %}