{{ define "header" }}

  {{ $displayName := "" }}
  {{ $name := "" }}
  {{ $picture := "" }}
  {{ $banner := "" }}
  {{ $about := "" }}
  {{ $website := "" }}
  {{ $nip05 := "" }}
  {{ $lud16 := "" }}

  {{ range hugo.Data.profile }}
      {{ range . }}
          {{ range .tags }}
              {{ if eq (index . 0) "display_name" }}
                  {{ $displayName = index . 1 }}
              {{ else if eq (index . 0) "name" }}
                  {{ $name = index . 1 }}
              {{ else if eq (index . 0) "picture" }}
                  {{ $picture = index . 1 }}
              {{ else if eq (index . 0) "banner" }}
                  {{ $banner = index . 1 }}
              {{ else if eq (index . 0) "about" }}
                  {{ $about = index . 1 }}
              {{ else if eq (index . 0) "website" }}
                  {{ $website = index . 1 }}
              {{ else if eq (index . 0) "nip05" }}
                  {{ $nip05 = index . 1 }}
              {{ else if eq (index . 0) "lud16" }}
                  {{ $lud16 = index . 1 }}
              {{ end }}
          {{ end }}
      {{ end }}
  {{ end }}

  <!-- If display_name is empty, use name -->
  {{ if not $displayName }}
      {{ $displayName = $name }}
  {{ end }}



  <!-- Main Header -->
  <header class="playlist-header" style="min-height: unset;max-height:25vh;">
      <!-- Background image -->
      {{ if $banner }}
      <div id="bannerino"></div>
      <!-- Dark overlay for readability -->
      <div id="texture"></div>
      {{ end }}



      <!-- Decorative '>' -->
      <div></div>

      <div class="header-content">
          <div class="header-profile">
              {{ if $picture }}
              <a href="/playlists" alt="home page"><img src="{{ $picture }}" alt="{{ $displayName }}'s profile picture'" class="profile-picture" loading="lazy"></a>
              {{ end }}

          </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>

      <div class="playlist-tracks-list">
          {{ if $tracks }}
              {{ range $index, $track := $tracks }}
              <div class="playlist-track-item">
                  <div class="track-number">{{ add $index 1 }}</div>
                  {{ if $track.image }}
                  <img src="{{ $track.image }}" alt="{{ $track.title }}" class="track-thumbnail" loading="lazy">
                  {{ end }}
                  <div class="track-info">
                      <span class="track-title">{{ $track.title | default "Untitled" }}</span>
                      <span class="track-artist">{{ $track.artist | default "Unknown Artist" }}</span>
                      {{ if $track.album }}
                      <span class="track-album">{{ $track.album }}</span>
                      {{ end }}
                      {{ if $track.duration }}
                      <span class="track-duration">{{ $track.duration }}s</span>
                      {{ end }}
                      {{ if $track.tags }}
                      <div class="track-tags">
                          {{ range $track.tags }}
                          <span class="tag"><span>{{ . }}</span></span>
                          {{ end }}
                      </div>
                      {{ end }}
                  </div>
                  <div class="track-player-wrapper">
                      {{ if $track.url }}
                      <audio controls preload="none" class="track-player">
                          <source src="{{ $track.url }}" type="audio/mpeg">
                      </audio>
                      {{ end }}
                      {{ if $track.id }}
                      <button class="track-share-btn" onclick="copyTrackLink('{{ $track.id }}')" title="Share this track">
                          <span>🔗</span>
                      </button>
                      {{ end }}
                  </div>
              </div>
              {{ end }}
          {{ else }}
              <p class="no-tracks">No tracks found for this playlist.</p>
          {{ end }}
      </div>

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

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

  <script>
  function copyTrackLink(trackId) {
      const url = `https://nostr.basspistol.org/notes/${trackId}`;
      if (navigator.clipboard) {
          navigator.clipboard.writeText(url).then(() => {
              const btn = event.target.closest('.track-share-btn');
              const originalText = btn.innerHTML;
              btn.innerHTML = '✓';
              setTimeout(() => {
                  btn.innerHTML = originalText;
              }, 2000);
          }).catch(() => {
              fallbackCopy(url);
          });
      } else {
          fallbackCopy(url);
      }
  }

  function fallbackCopy(url) {
      const textArea = document.createElement('textarea');
      textArea.value = url;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
      const btn = event.target.closest('.track-share-btn');
      const originalText = btn.innerHTML;
      btn.innerHTML = '✓';
      setTimeout(() => {
          btn.innerHTML = originalText;
      }, 2000);
  }

  function playAllTracks() {
      const players = document.querySelectorAll('.track-player');
      if (players.length === 0) return;

      let current = 0;
      function playNext() {
          if (current >= players.length) return;
          const player = players[current];
          player.play();
          player.onended = function() {
              current++;
              playNext();
          };
      }
      playNext();
  }
  </script>
{{ end }}