{% extends 'base.html' %}

{% block title %}Leave a review · TradeHub{% endblock %}

{% block content %}
<div class="container" style="max-width: 640px;">
  <div class="page-header">
    <h1>Leave a review</h1>
    <p>Share your experience to help other students.</p>
  </div>

  <div class="form-card">
    {# Order context #}
    <div style="display:flex; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5);">
      <img src="{{ order.product.primary_image }}" alt="{{ order.product.title }}"
           style="width: 72px; height: 72px; border-radius: var(--radius-md); object-fit: cover;">
      <div>
        <strong>{{ order.product.title }}</strong>
        <p class="text-sm text-muted">Sold by {{ order.product.seller.username }}</p>
      </div>
    </div>

    <form method="POST" novalidate>
      {{ form.hidden_tag() }}

      <div class="form-group">
        <label class="form-label">Your rating</label>
        <div class="star-input" data-star-input>
          <input type="radio" id="s5" name="rating" value="5"><label for="s5">★</label>
          <input type="radio" id="s4" name="rating" value="4"><label for="s4">★</label>
          <input type="radio" id="s3" name="rating" value="3"><label for="s3">★</label>
          <input type="radio" id="s2" name="rating" value="2"><label for="s2">★</label>
          <input type="radio" id="s1" name="rating" value="1"><label for="s1">★</label>
        </div>
        {% if form.rating.errors %}
          {% for e in form.rating.errors %}<div class="form-error">{{ e }}</div>{% endfor %}
        {% endif %}
      </div>

      <div class="form-group">
        <label class="form-label" for="content">Comment (optional)</label>
        <textarea id="content" name="content" class="form-textarea" rows="5"
                  placeholder="How was the item? Was the seller responsive?"
                  maxlength="500" data-char-counter="500" data-target-counter="review-count"></textarea>
        <div class="form-hint" id="review-count">0 / 500</div>
      </div>

      <div style="display:flex; gap: var(--space-3);">
        <a href="{{ url_for('orders.my_orders') }}" class="btn btn-outline">Cancel</a>
        {{ form.submit(class="btn btn-primary btn-lg", style="flex:1;") }}
      </div>
    </form>
  </div>
</div>
{% endblock %}