{% 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 %}