$maybe route <- mroute
    <form method="get" action="@{route}" onsubmit="this.classList.add('submitting')">
      <div .relative>
        $maybe query <- mquery
          <a .close-x-wrap href="@{route}" title="clear search results">
            <svg viewbox="0 0 40 40">
              <path .close-x d="M 10,10 L 30,30 M 30,10 L 10,30" />
        <div .relative.fl>
          <input #queryInput type="text" name="query" placeholder="search" value="#{fromMaybe "" mquery}" 
                 class="queryInput #{T.append "search-" (maybe "inactive" (const "active") mquery)}" />
          <button .queryIcon.hover-blue.gray type="submit" title="submit search">
            <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
        <a .query-info-icon.fr.blue href="@{DocsSearchR}" title="search syntax" target=_blank>?