{% extends 'base.html.twig' %}
{% block title %}{{ album.name }} — Reviews{% endblock %}
{% block body %}
  <div class="row g-4 mb-4">
    <div class="col-md-4">
      <div class="card h-100">
        {% set image = (album.images[1] ?? album.images[0] ?? null) %}
        {% if image %}
          <img class="card-img-top" src="{{ image.url }}" alt="{{ album.name }} cover" />
        {% endif %}
        <div class="card-body">
          <h5 class="card-title mb-1">{{ album.name }}</h5>
          <div class="text-secondary mb-2">{{ album.artists|map(a => a.name)|join(', ') }}</div>
          <p class="text-secondary mb-2">Released {{ album.release_date }} • {{ album.total_tracks }} tracks</p>
          <p class="mb-2"><strong>User score:</strong> {{ avg }}/10 ({{ count }})</p>
          <a class="btn btn-outline-success btn-sm" href="{{ album.external_urls.spotify }}" target="_blank" rel="noopener">Open in Spotify</a>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h2 class="h5 mb-0">Reviews</h2>
      </div>
      <div class="vstack gap-3 mb-4">
        {% for r in reviews %}
          <div class="card">
            <div class="card-body">
              <h6 class="card-title mb-1">{{ r.title }} <span class="text-secondary">(Rating {{ r.rating }}/10)</span></h6>
              <div class="text-secondary mb-2">by {{ r.author.displayName ?? r.author.userIdentifier }} • {{ r.createdAt|date('Y-m-d H:i') }}</div>
              <p class="card-text">{{ r.content|u.truncate(300, '…', false) }}</p>
              <a class="btn btn-link p-0" href="{{ path('review_show', {id: r.id}) }}">Read more</a>
            </div>
          </div>
        {% else %}
          <p class="text-secondary">No reviews yet for this album.</p>
        {% endfor %}
      </div>

      {% if app.user %}
        <div class="card">
          <div class="card-body">
            <h3 class="h6">Leave a review</h3>
            {{ form_start(form, {attr: {class: 'vstack gap-3', novalidate: 'novalidate'}}) }}
              <div>{{ form_label(form.title) }}{{ form_widget(form.title, {attr: {class: 'form-control'}}) }}{{ form_errors(form.title) }}</div>
              <div>{{ form_label(form.content) }}{{ form_widget(form.content, {attr: {class: 'form-control', rows: 6}}) }}{{ form_errors(form.content) }}</div>
              <div>
                {{ form_label(form.rating) }}
                <div class="d-flex align-items-center gap-3">
                  {{ form_widget(form.rating, {attr: {class: 'form-range', min:1, max:10, step:1, list:'rating-ticks', oninput:'document.getElementById("rating-value").textContent=this.value;'}}) }}
                  <span id="rating-value" class="badge text-bg-success">{{ form.rating.vars.value ?? 5 }}</span>
                </div>
                <datalist id="rating-ticks">
                  {% for i in 1..10 %}<option value="{{ i }}">{{ i }}</option>{% endfor %}
                </datalist>
                {{ form_errors(form.rating) }}
              </div>
              <button class="btn btn-success" type="submit">Post review</button>
            {{ form_end(form) }}
          </div>
        </div>
      {% else %}
        <div class="alert alert-info">Sign in to leave a review. <button class="btn btn-sm btn-success ms-2" type="button" data-open-auth="login">Login / Sign up</button></div>
      {% endif %}
    </div>
  </div>
{% endblock %}