<div class="bar full-width" data-controller="bar" data-bar-dialog-outlet="#bar-modal"
    data-bar-search-url-value="<%= search_path %>">
  <div class="flex justify-center bar__placeholder" data-bar-target="buttonsContainer">
    <%= tag.button class: "btn btn--plain", data: {
          controller: "hotkey", action: "bar#search keydown.k@document->hotkey#click" } do %>
      <span class="display-contents">Search <kbd class="hide-on-touch">K</kbd></span>
    <% end %>
  </div>

  <div class="bar__input" data-bar-target="search" hidden>
    <%= render "searches/form", query_terms: "", target_turbo_frame: "bar_content" %>
  </div>

  <%= tag.dialog id: "bar-modal", class: "bar__modal", data: {
        controller: "dialog", dialog_target: "dialog", action: "keydown.esc@document->bar#reset:stop" } do %>
    <%= turbo_frame_tag "bar_content", data: { bar_target: "turboFrame" } %>
  <% end %>
</div>
