<div
  class="mx-auto mb-4 mt-4 w-full overflow-hidden border-y border-slate-300 shadow-md sm:mb-6 sm:mt-6 sm:max-w-md sm:rounded-md sm:border"
>
  <div class="flex h-full items-stretch justify-center divide-x divide-slate-300">
    <% link_class_name =         "p-2 text-center justify-center items-center flex-1 blue-link"%>
    <% current_page_class_name = "p-2 text-center justify-center items-center flex-1 text-slate-400 bg-slate-50" %>
    <% no_link_class_name =      "p-2 text-center justify-center items-center flex-1 text-slate-400 bg-slate-50" %>
    <% if collection.prev_page %>
      <%=
        collection_previous_page_link(
          collection,
          raw("← Previous Page (#{collection.prev_page})"),
          class: link_class_name
        )
      %>
    <% else %>
      <div class="<%= no_link_class_name %>">← Previous Page</div>
    <% end %>
    <% unless collection.is_a?(::Kaminari::PaginatableWithoutCount) %>
      <span class="<%= current_page_class_name %>">
        Page <%= collection.current_page %> of <%= collection.total_pages %>
      </span>
    <% end %>
    <% if collection.next_page %>
      <%=
        collection_next_page_link(
          collection,
          raw("Next Page (#{collection.next_page}) →"),
          class: link_class_name
        )
      %>
    <% else %>
      <div class="<%= no_link_class_name %>">Next Page →</div>
    <% end %>
  </div>
</div>
