{% extends 'shop/base.html' %}
{% block title %}Leave a Review - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <h2 class="text-center fw-bold">Leave a Review</h2>

    <div class="card shadow p-4 my-4">
        <h5 class="fw-bold">Your Feedback Matters!</h5>

        <form method="POST" action="{% url 'submit_testimonial' %}">
            {% csrf_token %}
            <div class="mb-3">
                <label for="message" class="form-label">Your Testimonial</label>
                <textarea class="form-control" id="message" name="message" rows="4" required></textarea>
            </div>

            <!-- ⭐ Star Rating Selection -->
            <div class="mb-3">
                <label class="form-label">Rate Us:</label>
                <div class="star-rating">
                    {% for i in "54321" %}
                        <input type="radio" name="rating" value="{{ i }}" id="star{{ i }}" required>
                        <label for="star{{ i }}"><i class="fas fa-star"></i></label>
                    {% endfor %}
                </div>
            </div>

            <button type="submit" class="btn btn-success w-100">Submit Review</button>
        </form>
        <small class="text-muted">Your review will be published after admin approval.</small>
    </div>
</div>

<style>
/* ⭐ Star Rating System */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    gap: 5px;
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #FFD700;
}
</style>

{% endblock %}