{{define "deck-header"}}

<!-- Deck header with author info and actions -->

<div class="flex items-center gap-3 px-4 py-3 border-b border-white/5 bg-base-100">

  <a href="https://theskyscape.com/user/{{.OwnerHandle}}" target="_blank" class="avatar hover:opacity-80 transition-opacity">

    <div class="w-10 rounded-full">

      <img src="{{.OwnerAvatar}}" alt="{{.OwnerName}}" />

    </div>

  </a>

  <div class="flex-1 min-w-0">

    <div class="font-medium truncate">{{.Title}}</div>

    <div class="text-sm text-base-content/60">

      <a href="https://theskyscape.com/user/{{.OwnerHandle}}" target="_blank" class="hover:text-primary">@{{.OwnerHandle}}</a>

      · {{.ViewCount}} views

    </div>

  </div>

  <div class="flex items-center gap-2">

    {{if gallery.IsOwner}}

    <a href="/editor/{{.ID}}" class="btn btn-ghost btn-sm gap-1">

      <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

        <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />

      </svg>

      <span class="hidden sm:inline">Edit</span>

    </a>

    {{else}}

    {{with CurrentUser}}

    <button class="btn btn-ghost btn-sm gap-1" onclick="forkDeck()">

      <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

        <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />

      </svg>

      <span class="hidden sm:inline">Fork</span>

    </button>

    {{end}}

    {{end}}

    <a href="/deck/{{.ID}}/present" class="btn btn-primary btn-sm gap-1">

      <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">

        <path d="M8 5v14l11-7z"/>

      </svg>

      <span class="hidden sm:inline">Present</span>

    </a>

  </div>

</div>

{{end}}