{% extends 'base.html' %}
{% load widget_tweaks %}
{% block content %}
<div class="container mt-5">
    <h2 class="mb-4">Images for: {{ product.name }}</h2>
    
    <a href="{% url 'shop:product_image_add' product.id %}" class="btn btn-success mb-4">
        <i class="fas fa-plus"></i> Add New Image
    </a>

    <div class="row g-4">
        {% for img in images %}
        <div class="col-md-4 col-lg-3">
            <div class="card h-100">
                <img src="{{ img.image.url }}" class="card-img-top" style="height: 200px; object-fit: cover;" alt="{{ img.alt_text }}">
                <div class="card-body">
                    {% if img.is_primary %}
                        <span class="badge bg-success">Primary</span>
                    {% endif %}
                    <p class="small text-muted mt-2">{{ img.alt_text|default:"No alt text" }}</p>
                </div>
                <div class="card-footer">
                    <a href="{% url 'shop:product_image_delete' img.id %}" 
                       class="btn btn-sm btn-danger w-100"
                       onclick="return confirm('Delete this image?')">
                        Delete
                    </a>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="alert alert-info text-center py-5">
                No images uploaded yet.
            </div>
        </div>
        {% endfor %}
    </div>

    <a href="{% url 'shop:product_detail' product.slug %}" class="btn btn-outline-secondary mt-4">
        ← Back to Product
    </a>
</div>
{% endblock %}