<%= form_with url: search_path, method: :get,
  class: "search__form flex align-center justify-center gap-half",
  data: {
    controller: "search-form",
    action: "search-form:reset->bar#reset",
    bar_target: "form",
    turbo_action: defined?(turbo_action) ? turbo_action : nil,
    turbo_frame: defined?(target_turbo_frame) ? target_turbo_frame : nil } do |form| %>
  <%= form.label :q, "Search Fizzy", class: "font-weight-black txt-nowrap" %>
  <%= text_field_tag :q, query_terms,
        class: "search__input input",
        type: "search",
        placeholder: "Find something…",
        autocomplete: "off",
        autofocus: true,
        data: {
          search_form_target: "searchInput",
          bar_target: "searchInput",
          action: "keydown.enter->bar#showModalAndSubmit:prevent keydown.esc->bar#reset" } %>
  <button hidden>Search</button>
  <button class="search__reset btn btn--circle borderless" data-action="search-form#clearInput">
    <%= icon_tag "close" %>
    <span class="for-screen-reader">Close search</span>
  </button>
<% end %>
