tonehaus/templates/album/search.html.twig

{% 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="Search.." 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-3 order-sm-4">
          <select class="form-select" name="source">
            <option value="all" {{ (source is defined and source == 'all') or source is not defined ? 'selected' : '' }}>All sources</option>
            <option value="spotify" {{ (source is defined and source == 'spotify') ? 'selected' : '' }}>Spotify</option>
            <option value="user" {{ (source is defined and source == 'user') ? 'selected' : '' }}>User-created</option>
          </select>
        </div>
        <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">
                {% if album.external_urls.spotify is defined and album.external_urls.spotify %}
                  <a class="btn btn-outline-success btn-sm" href="{{ album.external_urls.spotify }}" target="_blank" rel="noopener">Open in Spotify</a>
                {% endif %}
                <a class="btn btn-success btn-sm" href="{{ path('album_show', {id: album.id}) }}">Reviews</a>
                {% if album.source is defined and album.source == 'user' %}
                  <span class="badge text-bg-primary ms-2">User album</span>
                {% endif %}
                {% if app.user and (album.source is not defined or album.source != 'user') %}
                  {% if savedIds is defined and (album.id in savedIds) %}
                    <span class="badge text-bg-secondary ms-2">Saved</span>
                  {% else %}
                    <form class="d-inline ms-2" method="post" action="{{ path('album_save', {id: album.id}) }}">
                      <input type="hidden" name="_token" value="{{ csrf_token('save-album-' ~ album.id) }}">
                      <button class="btn btn-outline-primary btn-sm" type="submit">Save</button>
                    </form>
                  {% endif %}
                {% endif %}
              </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 %}