// templates.js
const Templates = {
  test: ()=>`
    <div class="card artist-card">
        <h1>Test</h1>
    </div>
  `,

  home: (nowPlaying, upNext=[]) => `
    <div class="card nowplaying-card">
      <h2>Now Playing</h2>
      ${Cards.TrackCard(nowPlaying)}
    </div>
    <div class="card upnext-card">
      <h3>Up Next</h3>
      <div class="upnext-list">
        ${upNext.map(t => Cards.TrackCard(t)).join("")}
      </div>
    </div>
  `,

  search: (results) => `
    <div class="card search-card">
      <h2>Search Results</h2>
      <div class="search-results">
        ${results.map(r => {
          if (r.type === "artist") return Cards.ArtistCard(r);
          if (r.type === "playlist") return Cards.PlaylistCard(r);
          if (r.type === "track") return Cards.TrackCard(r);
          return "";
        }).join("")}
      </div>
    </div>
  `,

  artist: (trackList) => `
      ${Cards.TrackCard(trackList)}
  `,

  playlists: (playlists) => `
    <div class="card playlists-card">
      <h2>Playlists</h2>
      <div class="playlist-list">
        ${playlists.map(p => Cards.PlaylistCard(p)).join("")}
      </div>
    </div>
  `,

  modal: (track) => `
    <div class="modal-content">
      <h2>${track.name}</h2>
      <p>${track.artist} — <em>${track.album}</em></p>
      <button onclick="queueTrack('${track.uri}')">Add to Queue</button>
      <button onclick="playNext('${track.uri}')">Play Next</button>
    </div>
  `
};