% stash("pooru.search" => 1);

<%= form_for "list_media" =>
  name => "search",
  class => "layout-flex-row suggestions" =>
  begin %>
  <div class="layout-flex-item-fullsize position-relative"
    x-data="tagsSuggestions('<%= param "tags" %>')"
    @click.outside="open = false">
    <input name="tags" value="<%= param "tags" %>" placeholder="Search tags..."
      x-ref="search"
      x-model="search"
      @focus="fetchSuggestionsOnFocus"
      @input.debounce="fetchSuggestionsOnInput"
      @keydown.tab="autocompleteItem"
      @keydown.enter="autocompleteItem"
      @keydown.up.prevent="previousItem"
      @keydown.down.prevent="nextItem"
      @keydown.escape="open = false">
    <ul
      x-ref="suggestions"
      x-cloak x-show="open && items.length > 0">
      <template x-for="(item, index) in sortedItems" :key="item.display">
        <li
	  :class="index === activeItem ? 'suggestion-hover' : ''"
	  @click="autocompletePointedItem"
	  @mouseenter="setHoveredItem">
          <span x-text="item.display" :class="item.kind_class"></span>
          <span class="float-right" x-text="item.count"></span>
        </li>
      </template>
    </ul>
  </div>
  <%= submit_button "Search" %>
<% end %>