{% extends 'base.html' %}

{% block title %}My Wishlist - Academic Excellence{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="mb-5">
        <h1 class="display-5 fw-bold">My Wishlist</h1>
        <p class="lead text-muted">Courses you've saved for later.</p>
    </div>

    <div class="row g-4">
        {% for item in items %}
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm rounded-4 overflow-hidden">
                {% if item.course.image_url %}
                    <img src="{{ item.course.image_url }}" class="card-img-top" alt="{{ item.course.title }}" style="height: 180px; object-fit: cover;">
                {% endif %}
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-3">{{ item.course.title }}</h5>
                    <p class="text-muted small mb-4">By {{ item.course.instructor.name }}</p>
                    <div class="d-flex gap-2">
                        <a href="{% url 'course_detail' item.course.slug %}" class="btn btn-primary flex-grow-1">View</a>
                        <a href="{% url 'toggle_wishlist' item.course.id %}" class="btn btn-outline-danger">Remove</a>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <div class="mb-4">
                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="text-muted opacity-50"><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.23l8.84-8.84 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
            </div>
            <h3>Your wishlist is empty</h3>
            <p class="text-muted mb-4">Start exploring our catalog to find your next course.</p>
            <a href="{% url 'home' %}" class="btn btn-primary px-4 py-2">Explore Courses</a>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}