{% extends "base.html" %}
{% from "components/page_header.html" import page_header %}

{% set reviewee_name = reviewee.profile.full_name if reviewee.profile and reviewee.profile.full_name else reviewee.email %}

{% block title %}Leave a Review · CampusCart{% endblock %}

{% block content %}
<div class="dashboard-page review-page">
  <a class="premium-back" href="{{ url_for('marketplace.listing_detail', public_id=listing.public_id) }}">
    <i class="bi bi-arrow-left"></i> Back to listing
  </a>

  <div class="card border-0 shadow-sm review-card mx-auto">
    <div class="card-body p-4 p-md-5">
      <h1 class="h4 fw-bold mb-1">Leave a Review</h1>
      <p class="text-muted mb-4">
        Rate your transaction for <strong>{{ listing.title }}</strong> with <strong>{{ reviewee_name }}</strong>.
      </p>

      <form method="post" action="{{ url_for('reviews.submit', public_id=transaction.public_id) }}">
        {{ form.hidden_tag() }}

        <div class="mb-4">
          <label class="form-label d-block mb-2">Your rating</label>
          {# Highest-first choices + row-reverse layout → stars read 1–5 L-to-R,
             and the pure-CSS hover/checked highlight works without any JS. #}
          <div class="review-stars" role="radiogroup" aria-label="Rating out of 5">
            {% for subfield in form.rating %}
              {{ subfield(class="review-star-input") }}
              <label for="{{ subfield.id }}" title="{{ subfield.label.text }} star{{ '' if subfield.label.text == '1' else 's' }}">
                <i class="bi bi-star-fill" aria-hidden="true"></i>
                <span class="visually-hidden">{{ subfield.label.text }} stars</span>
              </label>
            {% endfor %}
          </div>
          {% for error in form.rating.errors %}
            <div class="text-danger small mt-1">{{ error }}</div>
          {% endfor %}
        </div>

        <div class="mb-4">
          {{ form.comment.label(class="form-label") }}
          {{ form.comment(class="form-control" + (" is-invalid" if form.comment.errors else "")) }}
          {% for error in form.comment.errors %}
            <div class="invalid-feedback">{{ error }}</div>
          {% endfor %}
        </div>

        <div class="d-flex gap-2">
          {{ form.submit(class="btn btn-primary") }}
          <a class="btn btn-outline-secondary" href="{{ url_for('marketplace.listing_detail', public_id=listing.public_id) }}">Cancel</a>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}