<header class="bg-white border-b border-neutral-300 h-16 fixed top-0 right-0 left-0 lg:left-72 z-30">
  <div class="flex items-center justify-between h-full px-4 lg:px-6">
    
    <!-- Mobile menu button and logo -->
    <div class="flex items-center lg:hidden">
      <button type="button"
              class="text-neutral-700 hover:text-neutral-900 p-2 rounded-md"
              data-action="click->sidebar#toggle">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
      <div class="ml-3 flex items-center">
        <%= image_tag("logomark.png", class: "w-8 h-8", alt: "Concerto") %>
        <span class="ml-2 text-neutral-900 font-semibold">Concerto</span>
      </div>
    </div>

    <!-- Page title (desktop) -->
    <div class="hidden lg:block">
      <h1 class="text-h3 text-neutral-900">
        <%= content_for?(:title) ? yield(:title) : "Dashboard" %>
      </h1>
    </div>

    <!-- Right side actions -->
    <div class="flex items-center space-x-4">
      
      <!-- Global search -->
      <div class="hidden md:block relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>
        <input type="search" 
               placeholder="Search content..." 
               class="frm-input pl-10 w-64 text-sm">
               <!-- TODO: Implement Search -->
      </div>

      <!-- Quick action: New Content -->
      <% if policy(Content).create? %>
        <%= link_to new_content_path, class: "btn-primary btn-md hidden sm:inline-flex" do %>
          <%= heroicon('plus', class: 'w-4 h-4 mr-2') %>
          New Content
        <% end %>
      <% end %>


      <!-- Update available badge (system admins only) -->
      <% if user_signed_in? && current_user.system_admin? %>
        <% update = UpdateChecker.latest_release %>
        <% if update && UpdateChecker.update_available? %>
          <a href="<%= update[:url] %>" target="_blank" rel="noopener noreferrer"
             class="flex items-center space-x-1.5 px-3 py-1.5 rounded-full bg-yellow-50 border border-yellow-300 text-yellow-800 text-sm font-medium hover:bg-yellow-100"
             title="Concerto <%= update[:tag] %> is available">
            <%= heroicon('arrow-up-circle', class: 'w-4 h-4 flex-shrink-0') %>
            <span class="hidden sm:inline">Update available</span>
          </a>
        <% end %>
      <% end %>

      <!-- User profile dropdown -->
      <% if user_signed_in? %>
        <div class="relative" data-controller="dropdown">
          <button type="button" 
                  class="flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2"
                  data-action="click->dropdown#toggle">
            <div class="h-8 w-8 rounded-full flex items-center justify-center text-white font-medium bg-gradient-to-br from-brand to-brand-600">
              <%= user_initials(current_user) %>
            </div>
          </button>

          <!-- Dropdown menu -->
          <div data-dropdown-target="menu" 
               class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-neutral-200 py-1 z-50">
            <div class="px-4 py-3 border-b border-neutral-200">
              <p class="text-sm font-medium text-neutral-900"><%= current_user.full_name %></p>
              <p class="text-sm text-neutral-500"><%= current_user.email %></p>
            </div>
            
            <%= link_to edit_user_registration_path, class: "block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50" do %>
              <div class="flex items-center">
                <svg class="w-4 h-4 mr-3 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                Your Profile
              </div>
            <% end %>
            
            <%= link_to "#", class: "block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50" do %>
              <div class="flex items-center">
                <svg class="w-4 h-4 mr-3 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
                Settings
              </div>
            <% end %>
            
            <div class="border-t border-neutral-200 mt-1 pt-1">
              <%= link_to destroy_user_session_path, 
                          method: :delete, data: { turbo_method: :delete },
                          class: "block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50" do %>
                <div class="flex items-center">
                  <svg class="w-4 h-4 mr-3 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                  </svg>
                  Sign Out
                </div>
              <% end %>
            </div>
          </div>
        </div>
      <% else %>
        <%= link_to "Sign In", new_user_session_path, class: "btn-primary btn-md" %>
      <% end %>

    </div>
  </div>
</header>