<div id="empty"></div>
<div class="search-results">
    {% if results %}
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Artist(s)</th>
          <th>Path</th>
          <th>Container</th>
          {% if config['DISPLAY_EXTENDED_AUDIO_DATA'] %}
          <th></th>
          {% endif %}
          <th></th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for track in results %}
        <tr>
          <td>{{ track.Name | highlight(search_query) }}</td>
          <td>{{ ', '.join(track.Artists) }}</td>
          <td>{{ track.Path}}</td>
          <td>{{ track.Container }}</td>
          {% if config['DISPLAY_EXTENDED_AUDIO_DATA'] %}
          <td> {{track.Path | audioprofile(track.Path) }}</td>
          {% endif %}
          <td>
            <button class="btn btn-sm btn-primary" onclick="playJellyfinTrack(this, '{{ track.Id }}')">
              <i class="fas fa-play"></i>
            </button>
          </td>
          <td>
            <button hx-swap="beforebegin" class="btn btn-sm btn-success" hx-post="/associate_track" hx-vals='{"jellyfin_id": "{{ track.Id }}","spotify_id": "{{ spotify_id}}"}' data-bs-toggle="tooltip" title="Link this Track [{{track.Id}}] with Spotify-Track-ID {{ spotify_id }}">
              Link Track
            </button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
      <p>No results found.</p>
    {% endif %}
  </div>
