{% extends 'shop/base.html' %}
{% block title %}Customer Testimonials - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <h2 class="text-center fw-bold">All Customer Testimonials</h2>

    <div class="row">
        {% for testimonial in testimonials %}
        <div class="col-md-6">
            <div class="card shadow-sm p-3 mb-4">
                <div class="d-flex align-items-center">
                    <!-- User Profile Image -->
                    {% if testimonial.user.profile.image %}
                        <img src="{{ testimonial.user.profile.image.url }}" class="rounded-circle me-3" width="50" height="50" alt="{{ testimonial.user.username }}">
                    {% else %}
                        <i class="fas fa-user-circle profile-icon me-3"></i>
                    {% endif %}

                    <div>
                        <h5 class="mb-0">{{ testimonial.user.username }}</h5>
                        <p class="text-muted small">{{ testimonial.created_at|date:"F d, Y" }}</p>
                    </div>
                </div>

                <p class="mt-2">"{{ testimonial.message }}"</p>

                <!-- ⭐ Display Rating -->
                <div class="text-warning">
                    {% for _ in "12345"|slice:testimonial.rating %}
                        <i class="fas fa-star"></i>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% empty %}
        <p class="text-center">No testimonials yet. Be the first to leave a review!</p>
        {% endfor %}
    </div>

    <!-- Back to Home Button -->
    <div class="text-center mt-4">
        <a href="{% url 'home' %}" class="btn btn-secondary">Back to Home</a>
    </div>
</div>

<style>
/* Default User Icon */
.profile-icon {
    font-size: 50px;
    color: #148818;
}
</style>

{% endblock %}