luniebox/application/templates/spotify_search.html
2022-02-06 10:19:03 +01:00

117 lines
4.4 KiB
HTML

{% extends "template.html" %}
{% block content %}
<div class="mt-3">
<form method="GET" action="{{ url_for('pages.spotify_search') }}">
<div class="mb-3">
<label for="search-query" class="form-label">Search</label>
<input type="text" name="q" id="search-query" class="form-control" placeholder="Artists, songs, or podcasts"
required value="{{ query }}">
</div>
<div class="mb-3">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="type" value="track" id="search-type-track" {{'checked'
if 'track' in types else '' }}>
<label class="form-check-label" for="search-type-track">
Tracks
</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="type" value="album" id="search-type-album" {{'checked'
if 'album' in types else '' }}>
<label class="form-check-label" for="search-type-album">
Albums
</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="type" value="artist" id="search-type-artist"
{{'checked' if 'artist' in types else '' }}>
<label class="form-check-label" for="search-type-artist">
Artists
</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="type" value="playlist" id="search-type-playlist"
{{'checked' if 'playlist' in types else '' }}>
<label class="form-check-label" for="search-type-playlist">
Playlists
</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="type" value="show" id="search-type-show" {{'checked'
if 'show' in types else '' }}>
<label class="form-check-label" for="search-type-show">
Shows
</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="type" value="episode" id="search-type-episode"
{{'checked' if 'episode' in types else '' }}>
<label class="form-check-label" for="search-type-episode">
Episodes
</label>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
{% if results: %}
<div class="alert alert-warning mt-3">
Writing to card will stop the daemon. You need to restart daemon afterwards!
</div>
<div class="spotify-search-results">
<div class="container">
<div class="row">
{% for type in types %}
{% if results[type + 's']: %}
{% with result = results[type + 's'] %}
<div
class="d-flex flex-column col col-xs-12 col-md-6 col-lg-6 {{ 'col-xl-4' if results|length > 2 else 'col-xl-6' }} mt-3">
<h3>{{ type | capitalize}}s</h3>
<ul class="list-group mb-3 flex-fill">
{% for item in result['items'] %}
<li href="#" class="list-group-item flex-fill">
<div class="d-flex w-100">
{% include "spotify/items/" + type + ".html" %}
</div>
{% include "spotify/items/menu.html" %}
</li>
{% endfor %}
</ul>
<div class="d-flex w-100 justify-content-between mt-auto">
<a href="{{ url_for('pages.spotify_search',q=query, type=type, limit=result['limit'], offset=result['offset']-result['limit']) }}"
class="btn btn-primary {{ 'disabled' if result['offset']==0 else '' }} " {{ 'disabled' if
result['offset']==0 else '' }}>&laquo;</a>
<a href="{{ url_for('pages.spotify_search',q=query, type=type, limit=result['limit'], offset=result['offset']+result['limit']) }}"
{{ 'disabled' if result['offset']>= result['total'] else ''}}
class="btn btn-primary {{ 'disabled' if result['offset']>= result['total'] else ''}}">&raquo;</a>
</div>
</div>
{% endwith %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% endblock %}