{{ define "header" }}
  {{ $name := .Title }}
  {{ $image := .Params.playlist_image | default "" }}

  {{/* Small nav strip with avatar + home + playlists links */}}
  {{ partial "nav-strip.html" . }}

  <header class="playlist-header" style="min-height: unset; max-height: 25vh;">
      {{ if $image }}
      <div id="bannerino"></div>
      <div id="texture"></div>
      {{ end }}
      <div class="header-content">
          <div class="header-profile"></div>
      </div>
  </header>
{{ end }}
{{ define "main" }}
  {{ $name := .Title }}
  {{ $description := .Params.playlist_description | default "" }}
  {{ $image := .Params.playlist_image | default "" }}
  {{ $tracks := .Params.playlist_tracks | default slice }}
  {{ $created_at := .Params.playlist_created_at | default 0 }}

  <style>
    #bannerino { background-image: url('{{ $image }}'); }
  </style>

  <section class="section playlist-detail">
      <div class="playlist-header">
          <div class="playlist-header-content">
              {{ if $image }}
              <img src="{{ $image }}" alt="{{ $name }}" class="playlist-header-image" loading="lazy">
              {{ end }}
              <div class="playlist-header-info">
                  <h1>{{ $name }}</h1>
                  {{ if $description }}
                  <p class="playlist-description">{{ $description }}</p>
                  {{ end }}
                  <div class="playlist-meta">
                      <span class="playlist-track-count">🎵 {{ len $tracks }} tracks</span>
                      {{ if $created_at }}
                      <span class="playlist-track-count">📅 {{ dateFormat "January 2, 2006" (time $created_at) }}</span>
                      {{ end }}
                  </div>
              </div>
          </div>
      </div>

      {{ if $tracks }}
      <div class="playlist-actions">
          <button class="playlist-play-all" id="playlistPlayAll">
              <span>▶</span> Play All Tracks
          </button>
      </div>
      {{ end }}

      <div class="music-grid" id="playlistTrackGrid"></div>

      <div class="playlist-back">
          <a href="/playlists/" class="back-link">← Back to All Playlists</a>
      </div>
  </section>

  {{/* FIX: safeJS prevents Hugo from HTML-escaping the JSON */}}
  <script>
    window.playlistOriginalTracks = {{ $tracks | jsonify | safeJS }};
    console.log('[playlist] raw tracks injected:', window.playlistOriginalTracks.length);
  </script>

  <script>
  document.addEventListener('DOMContentLoaded', function () {
    console.log('[playlist] DOMContentLoaded fired');
    console.log('[playlist] openMusicLightbox exists?', typeof openMusicLightbox);
    console.log('[playlist] initMusicEventListeners exists?', typeof initMusicEventListeners);

    const rawTracks = window.playlistOriginalTracks || [];

    window.musicPlaylist = rawTracks
      .filter(t => t && t.url)
      .map(t => ({
        id: t.id || '',
        title: t.title || 'Untitled',
        url: t.url,
        image: t.image || '',
        artist: t.artist || 'Unknown Artist',
        album: t.album || '',
        duration: parseFloat(t.duration) || 0,
        created_at: t.created_at || 0,
        content: t.content || ''
      }));

    console.log('[playlist] musicPlaylist built with', window.musicPlaylist.length, 'tracks');

    renderPlaylistGrid('playlistTrackGrid');

    const playAll = document.getElementById('playlistPlayAll');
    if (playAll) {
      playAll.addEventListener('click', function () {
        console.log('[playlist] play-all clicked');
        if (typeof openMusicLightbox === 'function') openMusicLightbox(0);
      });
    }
  });

function renderPlaylistGrid(containerId) {
  const container = document.getElementById(containerId);
  if (!container) return;

  const tracks = window.musicPlaylist || [];
  container.innerHTML = '';

  tracks.forEach((track, index) => {
    let genreTags = [];
    let content = '';

    const raw = (window.playlistOriginalTracks || []).find(t => t.url === track.url);
    if (raw) {
      // Frontmatter tags are already flat strings; homepage tags are arrays
      if (raw.tags) {
        raw.tags.forEach(tag => {
          if (typeof tag === 'string') {
            genreTags.push(tag);
          } else if (Array.isArray(tag) && tag[0] === 't') {
            genreTags.push(tag[1]);
          }
        });
      }
      content = raw.content || '';
    }

    const card = document.createElement('div');
    card.className = 'music-card clickable';
    card.dataset.playlistIndex = index;

    card.addEventListener('click', function (e) {
      if (e.target.closest('.lyrics-toggle') || e.target.closest('.lyrics')) return;
      const idx = parseInt(this.dataset.playlistIndex, 10);
      if (!isNaN(idx) && typeof openMusicLightbox === 'function') {
        openMusicLightbox(idx);
      }
    });

    card.innerHTML = `
      <div class="music-card-inner">
        <div class="music-image-wrapper">
          ${track.image ? `<img src="${track.image}" alt="${track.title}" class="music-image" loading="lazy">` : ''}
          <div class="music-play-overlay"><span class="music-play-btn">▶</span></div>
        </div>
        <div class="music-info-header">
          <h4>${track.title}</h4>
          ${track.artist ? `<p class="music-artist">${track.artist}</p>` : ''}
          ${track.album ? `<p class="music-album">${track.album}</p>` : ''}
        </div>
        ${genreTags.length > 0 ? `
          <div class="music-tags">
            ${genreTags.map(t => `<span class="tag"><span>${t}</span></span>`).join('')}
          </div>
        ` : ''}
        ${content ? `
          <button class="lyrics-toggle"><span>Show Info</span></button>
          <div class="lyrics" style="display: none;">${content.replace(/\n/g, '<br>')}</div>
        ` : ''}
      </div>
    `;
    container.appendChild(card);
  });

  if (typeof initMusicEventListeners === 'function') {
    initMusicEventListeners();
  }
}
  </script>
{{ end }}