<div class="flex flex-row-reverse justify-between flex-wrap items-center">
    
  <div @click.away="open = false" class="mb-1 mr-1 lg:mr-2 flex-shrink-0 relative" x-data="{ open: false }">
    <div class="rounded-sm shadow-md">
      <button @click="open = !open" type="button" class="space-x-1 rounded-sm flex items-center justify-center w-full border border-gray-200 px-2 py-1 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" aria-expanded="true">
        <%= t("sort_by")%>
        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
    <div x-show="open" x-description="Profile dropdown panel, show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-left absolute left-0 mt-2 w-32 rounded-md shadow-lg z-10" style="display: none;">
      <div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
        <% ["most_relevant", "newest_first", "oldest_first"].each do |sort_type| %>
          <%= link_to t(sort_type), request.query_parameters.except(:page).merge(sort_type: sort_type), class: "#{'bg-gray-200' if params[:sort_type] == sort_type} block px-2 py-1 lg:px-4 lg:py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out", role: "menuitem" %>
        <% end %>
      </div>
    </div>
  </div>

  <span class="flex-shrink-0  mr-1 lg:mr-2 mb-1 text-sm"> <%==t(:total_count, count: @pagy.count) %></span>


</div>