{% extends 'base.html' %}

{% block content %}
<style>
    .wishlist-hero {
        padding: 40px 0;
        background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
        border-radius: 24px;
        margin-top: 20px;
        margin-bottom: 40px;
        text-align: center;
        border: 1px solid #fee2e2;
    }
 
    .main-title {
        font-weight: 800;
        font-size: 36px;
        letter-spacing: -1px;
        color: #111827;
        margin-bottom: 10px;
    }
</style>

<div class="wishlist-hero">
    <div class="container">
        <h1 class="main-title"><i class="bi bi-heart-fill text-danger me-2"></i>My Wishlist</h1>
        <p class="text-muted fs-5">You have saved {{ wishlist_items|length }} items</p>
    </div>
</div>

<div class="shop-container">
    {% if wishlist_items %}
    <div class="row g-4">
        {% for item in wishlist_items %}
        <div class="col-md-4 col-sm-6">
            <div class="card border-0 shadow-sm" style="border-radius: 16px; overflow: hidden; height: 100%;">
                <div class="position-relative" style="height: 250px; background: #fafafa; display: flex; align-items: center; justify-content: center; padding: 20px;">
                    <a href="{{ url_for('web.toggle_wishlist', product_id=item.product.id) }}" class="btn btn-light shadow-sm position-absolute top-0 end-0 m-3" style="border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #f0f0f0;">
                        <i class="bi bi-heart-fill text-danger"></i>
                    </a>
                    <img src="{{ url_for('static', filename='uploads/' + (item.product.image_file if item.product.image_file else 'default.png')) }}" 
                         onerror="this.src='https://via.placeholder.com/400x400?text=Premium+Item'"
                         class="img-fluid" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                </div>
                <div class="card-body d-flex flex-column">
                    <p class="text-danger fw-bold small mb-1 text-uppercase">{{ item.product.category.name if item.product.category else 'Store' }}</p>
                    <h5 class="fw-bold text-dark">{{ item.product.name }}</h5>
                    <div class="mt-auto d-flex justify-content-between align-items-center pt-3">
                        <span class="fs-4 fw-bold text-dark">{{ currency }} {{ "{:,.0f}".format(item.product.discount_price if item.product.discount_price > 0 else item.product.price) }}</span>
                        <a href="{{ url_for('web.add_to_cart', product_id=item.product.id) }}" class="btn btn-dark rounded-pill px-4 fw-bold">Cart</a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-5">
        <div class="mb-4">
            <i class="bi bi-heartbreak text-muted opacity-25" style="font-size: 80px;"></i>
        </div>
        <h3 class="fw-bold text-dark">Your Wishlist is empty</h3>
        <p class="text-muted">Explore our premium collection and click the heart icon to save products you love.</p>
        <a href="{{ url_for('web.collection') }}" class="btn btn-dark mt-3 rounded-pill px-5 py-2 fw-bold">Discover Products</a>
    </div>
    {% endif %}
</div>
{% endblock %}