<%
  if (typeof hasNextPage === 'undefined') hasNextPage = true;
  if (typeof options != 'undefined') {
    if (options && options.length > 0) {
      options = `&${options.join('&')}`;
    } else {
      options = null;
    }
  } else {
    options = null;
  }
%>
<div class="text-center">
  <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
    <a class="dark:bg-gray-900 dark:border-gray-700 relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 cursor-pointer" href="<%= path %>?page=<%= parseInt(page) - 1 %><%= options %>">
      <span class="sr-only">Previous</span>
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
      </svg>
    </a>
    <a class="dark:bg-gray-900 dark:border-gray-700 z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"                  <%= !hasNextPage ? 'disalbed=""' : '' %>href="<%= path %>?page=<%= parseInt(page) %><%= options %>"><%= parseInt(page) %></a>
    <a class="dark:bg-gray-900 dark:border-gray-700 bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"              <%= !hasNextPage ? 'disalbed=""' : '' %>href="<%= path %>?page=<%= parseInt(page) + 1 %><%= options %>"><%= parseInt(page) + 1 %></a>
    <a class="dark:bg-gray-900 dark:border-gray-700 bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"              <%= !hasNextPage ? 'disalbed=""' : '' %>href="<%= path %>?page=<%= parseInt(page) + 2 %><%= options %>"><%= parseInt(page) + 2 %></a>
    <a class="dark:bg-gray-900 dark:border-gray-700 bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"    <%= !hasNextPage ? 'disalbed=""' : '' %>href="<%= path %>?page=<%= parseInt(page) + 3 %><%= options %>"><%= parseInt(page) + 3 %></a>
    <a class="dark:bg-gray-900 dark:border-gray-700 relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" <%= !hasNextPage ? 'disalbed=""' : '' %>href="<%= path %>?page=<%= parseInt(page) + 1 %><%= options %>">
      <span class="sr-only">Next</span>
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
      </svg>
    </a>
  </nav>
</div>