{% extends 'base.html' %}
{% block title %}My Wishlist — Chiez Stores{% endblock %}

{% block content %}
<div style="background:var(--cream);border-bottom:1px solid var(--light-gray)">
    <div class="container" style="padding-top:20px;padding-bottom:20px">
        <div class="breadcrumb">
            <a href="{% url 'store:home' %}">Home</a><span class="breadcrumb-sep">/</span><span>Wishlist</span>
        </div>
        <h1 style="font-size:2.2rem">My Wishlist <span style="font-size:1rem;color:var(--warm-gray);font-family:var(--font-body)">({{ wishlist.products.count }} item{{ wishlist.products.count|pluralize }})</span></h1>
    </div>
</div>

<div class="container py-5">
{% if wishlist.products.exists %}
    <div class="products-grid">
        {% for product in wishlist.products.all %}
        {% include 'store/partials/product_card.html' %}
        {% endfor %}
    </div>
{% else %}
    <div style="text-align:center;padding:100px 20px">
        <i class="fas fa-heart" style="font-size:64px;color:var(--mid-gray);display:block;margin-bottom:24px"></i>
        <h2 style="font-weight:300;margin-bottom:12px">Your wishlist is empty</h2>
        <p style="color:var(--warm-gray);margin-bottom:30px">Save items you love and come back to them later.</p>
        <a href="{% url 'store:shop' %}" class="btn btn-primary btn-lg">Discover Products</a>
    </div>
{% endif %}
</div>
{% endblock %}