{% extends 'base.html.twig' %}
{% block title %}Album Search{% endblock %}
{% block body %}
  <h1 class="h4 mb-3">Search Albums</h1>
  <form class="row g-2 mb-2" action="{{ path('album_search') }}" method="get">
    <div class="col-sm">
      <input class="form-control" type="search" name="q" value="{{ query }}" placeholder="Free text (optional)" autocomplete="off" />
    </div>
    <div class="col-auto">
      <button class="btn btn-success" type="submit">Search</button>
    </div>
    <div class="col-12">
      <a class="link-secondary" data-bs-toggle="collapse" href="#advancedSearch" role="button" aria-expanded="false" aria-controls="advancedSearch">Advanced search</a>
    </div>
    <div class="collapse col-12" id="advancedSearch">
      <div class="row g-2 mt-1">
        <div class="col-sm-4">
          <input class="form-control" type="text" name="album" value="{{ album }}" placeholder="Album title" />
        </div>
        <div class="col-sm-4">
          <input class="form-control" type="text" name="artist" value="{{ artist }}" placeholder="Artist" />
        </div>
        <div class="col-sm-2">
          <input class="form-control" type="number" name="year_from" value="{{ year_from }}" placeholder="Year from" min="1900" max="2100" />
        </div>
        <div class="col-sm-2">
          <input class="form-control" type="number" name="year_to" value="{{ year_to }}" placeholder="Year to" min="1900" max="2100" />
        </div>
      </div>
    </div>
  </form>

  {% if query is empty and (album is empty) and (artist is empty) and (year_from is empty) and (year_to is empty) %}
    <p class="text-secondary">Tip: Use the Advanced search to filter by album, artist, or year range.</p>
  {% endif %}

  {% if albums is defined and albums|length > 0 %}
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3">
      {% for album in albums %}
        <div class="col">
          <div class="card h-100">
            {% set image = (album.images[1] ?? album.images[0] ?? null) %}
            {% if image %}
              <a href="{{ path('album_show', {id: album.id}) }}">
                <img class="card-img-top" src="{{ image.url }}" alt="{{ album.name }} cover" />
              </a>
            {% endif %}
            <div class="card-body d-flex flex-column">
              <h5 class="card-title"><a href="{{ path('album_show', {id: album.id}) }}" class="text-decoration-none">{{ album.name }}</a></h5>
              <p class="card-text text-secondary">{{ album.artists|map(a => a.name)|join(', ') }}</p>
              <p class="card-text text-secondary">Released {{ album.release_date }} • {{ album.total_tracks }} tracks</p>
              {% set s = stats[album.id] ?? { 'avg': 0, 'count': 0 } %}
              <p class="card-text"><small class="text-secondary">User score: {{ s.avg }}/10 ({{ s.count }})</small></p>
              <div class="mt-auto">
                <a class="btn btn-outline-success btn-sm" href="{{ album.external_urls.spotify }}" target="_blank" rel="noopener">Open in Spotify</a>
                <a class="btn btn-success btn-sm" href="{{ path('album_show', {id: album.id}) }}">Reviews</a>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% elseif query or album or artist or year_from or year_to %}
    <p>No albums found.</p>
  {% endif %}
{% endblock %}