% stash("pooru.search" => 1);
<%= form_for "list_media" =>
  name => "search",
  class => "layout-flex-row" =>
  begin %>
  <div
    class="layout-flex-item-fullsize position-relative"
    x-data="tagsSuggestions">
    <input type="search" name="tags" value="<%= param "tags" %>"
      placeholder="Search tags..."
      x-ref="tags"
      @focus="fetchSuggestions"
      @input.debounce="fetchSuggestions"
      @keydown.tab.prevent="completeSuggestion"
      @keydown.up.prevent="previousSuggestion"
      @keydown.down.prevent="nextSuggestion"
      @keydown.escape="reset">
    <ul id="tags-suggestions"
      x-cloak x-show="suggestions.length > 0">
      <template x-for="suggestion in suggestions">
        <li
          @click="completeClickedSuggestion"
          @mouseenter="setPointerSuggestion">
          <span
            x-text="suggestion.display"
            :class="suggestion.kind_class">
            </span>
          <span class="float-right" x-text="suggestion.count"></span>
        </li>
      </template>
    </ul>
  </div>
  <%= submit_button "Search" %>
<% end %>