<table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Title</th>
        <th scope="col">Artist</th>
        <th scope="col">Duration</th>
        <th scope="col">Spotify</th>
        <th scope="col">Preview</th>
        <th scope="col">Status</th>
        <th scope="col">Jellyfin</th> 
      </tr>
    </thead>
    <tbody>
      {% for track in tracks %}
      <tr>
        <th scope="row">{{ loop.index }}</th>
        <td>{{ track.title }}</td>
        <td>{{ track.artist }}</td>
        <td>{{ track.duration }}</td>
        <td>
          <a href="{{ track.url }}" target="_blank" class="text-success" data-bs-toggle="tooltip" title="Open in Spotify">
            <i class="fab fa-spotify fa-lg"></i>
          </a>
        </td>
        <td>
          {% if track.preview_url %}
          <button class="btn btn-sm btn-primary" onclick="playPreview(this, '{{ track.preview_url }}')" data-bs-toggle="tooltip" title="Play Preview">
            <i class="fas fa-play"></i>
          </button>
          {% else %}
          <span data-bs-toggle="tooltip" title="No Preview Available">
            <button class="btn btn-sm" disabled><i class="fas fa-ban"></i></button>
          </span>
          {% endif %}
        </td>
        <td>
          {% if not track.downloaded %}
            <button class="btn btn-sm btn-danger" 
            data-bs-toggle="tooltip" title="{{ track.download_status if track.download_status else 'Not downloaded'}}">
            <i class="fa-solid fa-triangle-exclamation"></i>
          </button>
          {% else %}
          <button class="btn btn-sm btn-success" data-bs-toggle="tooltip" title="Track downloaded">
            <i class="fa-solid fa-circle-check"></i>
          </button>
          {% endif %}
        </td>
        <td>
          {% set title = track.title | replace("'","") %}

          {% if track.jellyfin_id %}
          <button class="btn btn-sm btn-success" onclick="handleJellyfinClick(event, '{{ track.jellyfin_id }}', '{{ title }}', '{{ track.spotify_id }}')" data-bs-toggle="tooltip" title="Play from Jellyfin (Hold CTRL Key to reassing a new track)">
            <i class="fas fa-play"></i>
          </button>
          {% elif track.downloaded %}
          <span data-bs-toggle="tooltip" title="Track Downloaded, but not in Jellyfin or could not be associated automatically. You can try to do the association manually">
            <button class="btn btn-sm btn-warning" onclick="openSearchModal('{{ title  }}','{{track.spotify_id}}')">
              <i class="fas fa-triangle-exclamation"></i>
            </button>
          </span>
          {% else %}
          <span data-bs-toggle="tooltip" title="Not Available">
            <button class="btn btn-sm" disabled><i class="fas fa-ban"></i></button>
          </span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="searchModalLabel">Search Jellyfin for Track</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- htmx-enabled form -->
        <form id="search-form" hx-get="/search_jellyfin" hx-target="#search-results" hx-trigger="submit">
          <div class="input-group mb-3">
            <input type="text" class="form-control" id="search-query" name="search_query" placeholder="Search for a track...">
            <input type="hidden" class="form-control" id="spotify-id" name="spotify_id" >
            <button class="btn btn-primary" type="submit">Search</button>
          </div>
        </form>
        <div id="search-results">
          <div id="loading-spinner" class="d-flex justify-content-center my-3" style="display: none;">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>


