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

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/product.css' %}">
{% endblock %}

{% block content %}
<section class="page-header">
    <div>
        <h1>My Wishlist</h1>
        <p>Save products and purchase anytime.</p>
    </div>
</section>

{% if wishlist_items %}
<div class="cards">
    {% for item in wishlist_items %}
    <div class="card">
        {% if item.product.image %}<img src="{{ item.product.image.url }}" alt="{{ item.product.name }}">{% else %}<div class="product-image-placeholder">No image</div>{% endif %}
        <div class="card-content">
            <h3>{{ item.product.name }}</h3>
            <p class="price">Rs. {{ item.product.display_price|floatformat:2 }}</p>
            <div class="card-actions">
                <a href="{% url 'product_detail' item.product.id %}" class="btn btn-secondary">View</a>
                <a href="{% url 'move_wishlist_to_cart' item.product.id %}" class="btn btn-primary">Move to Cart</a>
                <a href="{% url 'toggle_wishlist' item.product.id %}" class="btn btn-secondary">Remove</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state"><h2>No wishlist items yet.</h2><p>Add products to wishlist while browsing.</p></div>
{% endif %}
{% endblock %}