69 lines
3.3 KiB
Twig
69 lines
3.3 KiB
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="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 %}
|
|
|
|
|