<header class="top-navbar">
  <a href="<%= rel_prefix %>/index.html" class="navbar-brand">
    <%= h @options.title %>
  </a>

  <!-- Desktop search bar -->
  <div class="navbar-search navbar-search-desktop" role="search">
    <form action="#" method="get" accept-charset="utf-8">
      <input id="search-field" role="combobox" aria-label="Search"
             aria-autocomplete="list" aria-controls="search-results-desktop"
             type="text" name="search" placeholder="Search (/) for a class, method..."
             spellcheck="false" autocomplete="off"
             title="Type to search, Up and Down to navigate, Enter to load">
      <ul id="search-results-desktop" aria-label="Search Results"
          aria-busy="false" aria-expanded="false"
          aria-atomic="false" class="initially-hidden search-results"></ul>
    </form>
  </div>

  <!-- Mobile search icon button -->
  <button id="search-toggle" class="navbar-search-mobile" aria-label="Open search" type="button">
    <span aria-hidden="true">🔍</span>
  </button>

  <!-- Theme toggle button -->
  <button id="theme-toggle" class="theme-toggle" aria-label="Switch to dark mode" type="button">
    <span class="theme-toggle-icon" aria-hidden="true">🌙</span>
  </button>
</header>

<!-- Search Modal (Mobile) -->
<div id="search-modal" class="search-modal" hidden aria-modal="true" role="dialog" aria-label="Search">
  <div class="search-modal-backdrop"></div>
  <div class="search-modal-content">
    <div class="search-modal-header">
      <form class="search-modal-form" action="#" method="get" accept-charset="utf-8">
        <span class="search-modal-icon" aria-hidden="true">🔍</span>
        <input id="search-field-mobile" role="combobox" aria-label="Search"
               aria-autocomplete="list" aria-controls="search-results-mobile"
               type="text" name="search" placeholder="Search documentation"
               spellcheck="false" autocomplete="off">
        <button type="button" class="search-modal-close" aria-label="Close search" id="search-modal-close">
          <span aria-hidden="true">esc</span>
        </button>
      </form>
    </div>
    <div class="search-modal-body">
      <ul id="search-results-mobile" aria-label="Search Results"
          aria-busy="false" aria-expanded="false"
          aria-atomic="false" class="search-results search-modal-results initially-hidden"></ul>
      <div class="search-modal-empty">
        <p>No recent searches</p>
      </div>
    </div>
  </div>
</div>