{# ── Unified Header (Notion-inspired) ──
   Parameters available in calling context:
     breadcrumb_items: list of {label: str, url: str|None} — last item = current page
     page_icon: str — emoji icon
     right_actions: str — raw HTML for right-side action buttons
     hamburger_click: str — Alpine expression for hamburger button (default: opens sidebar)
     hide_hamburger: bool — if truthy, hides the hamburger button
#}
<header class="topbar unified-header">
  {% if not hide_hamburger %}
  <button class="hamburger-btn"
          @click="{{ hamburger_click|default('sidebarCollapsed ? (sidebarCollapsed = false) : (mobileSidebarOpen = true, sidebarCollapsed = false)') }}"
          title="Toggle sidebar">
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <line x1="3" y1="6" x2="21" y2="6"/>
      <line x1="3" y1="12" x2="21" y2="12"/>
      <line x1="3" y1="18" x2="21" y2="18"/>
    </svg>
  </button>
  {% endif %}

  <div class="topbar-left header-breadcrumb">
    {% if page_icon %}
    <span class="header-page-icon">{{ page_icon }}</span>
    {% endif %}

    {% if breadcrumb_items %}
      {% for item in breadcrumb_items %}
        {% if item.url and not loop.last %}
          <a href="{{ item.url }}" class="breadcrumb-link">{{ item.label }}</a>
          <span class="breadcrumb-sep">/</span>
        {% elif loop.last %}
          <span class="breadcrumb-current">{{ item.label }}</span>
        {% else %}
          <span class="breadcrumb-link disabled">{{ item.label }}</span>
          <span class="breadcrumb-sep">/</span>
        {% endif %}
      {% endfor %}
    {% else %}
      <span class="breadcrumb-current">{{ page_title|default('FlowDeck') }}</span>
    {% endif %}
  </div>

  <div class="topbar-right header-actions">
    {{ right_actions|safe if right_actions else '' }}
  </div>
</header>