<header class="topbar">
  <div class="topbar-left">
    <button class="menu-btn" id="menuBtn" type="button" aria-label="Open navigation">
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M4 7h16M4 12h16M4 17h16"></path>
      </svg>
    </button>

    <form class="search-box" method="get" action="{{ base_url }}/search">
      <span aria-hidden="true">
        <svg viewBox="0 0 24 24">
          <path d="m21 21-4.35-4.35"></path>
          <circle cx="11" cy="11" r="7"></circle>
        </svg>
      </span>
      <input type="search" name="q" value="{{ query|default('') }}" placeholder="Search customers, quotes, invoices...">
    </form>
  </div>

  <div class="topbar-actions">
    <button class="icon-btn" type="button" aria-label="Notifications">
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"></path>
        <path d="M10 21h4"></path>
      </svg>
      <span class="badge">3</span>
    </button>

    <button class="icon-btn" type="button" aria-label="Help">
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="12" r="10"></circle>
        <path d="M9.1 9a3 3 0 1 1 5.2 2c-.9.8-1.3 1.2-1.3 2.5"></path>
        <path d="M12 17h.01"></path>
      </svg>
    </button>

    {% if current_user %}
      <div class="user-profile">
        <div class="avatar">{{ current_user_initial }}</div>
        <strong>{{ current_user.name }}</strong>
        <form method="post" action="{{ base_url }}/logout">
          <input type="hidden" name="_csrf_token" value="{{ logout_csrf_token }}">
          <button class="logout-btn" type="submit">Sign Out</button>
        </form>
      </div>
    {% endif %}
  </div>
</header>
