{{ 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" style="background-image:url('{{ $banner }}');"></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="/" alt="home page"><img src="{{ $picture }}" alt="{{ $displayName }}'s profile picture'" class="profile-picture" loading="lazy"></a>
              {{ end }}

          </div>
      </div>

  </header>



{{ end }}

{{ define "main" }}
<section class="section playlists-list">

    <h2>Playlists</h2>
    <p class="section-description">Explore all my curated playlists from the Nostr network</p>
    
    <div class="playlists-grid">
        {{ range .Pages }}
        {{ $name := .Title }}
        {{ $description := .Params.playlist_description | default "" }}
        {{ $image := .Params.playlist_image | default "" }}
        {{ $tracks := .Params.playlist_tracks | default slice }}
        
        <div class="playlist-card">
            <a href="{{ .RelPermalink }}" class="playlist-link">
                {{ if $image }}
                <img src="{{ $image }}" alt="{{ $name }}" class="playlist-image" loading="lazy">
                {{ end }}
                
                <div class="playlist-info">
                    <h2>{{ $name }}</h2>
                    {{ if $description }}
                    <p class="playlist-description">{{ $description }}</p>
                    {{ end }}
                    {{ if $tracks }}
                    <span class="playlist-track-count">{{ len $tracks }} tracks</span>
                    {{ end }}
                </div>
                
                <div class="playlist-hover-overlay">
                    <span class="playlist-view-btn">▶ Listen</span>
                </div>
            </a>
        </div>
        {{ end }}
    </div>
</section>
{{ end }}
