{% load i18n %}

<!-- shared IPAM pagination: query-string only, targets the current page.
     Expects: paginator, pg_param (name of the query param to preserve, e.g. "query" or "subnet"),
     pg_value (its current value) -->

{% if paginator.page_last > 1 %}
<nav class="d-flex justify-content-center my-2">
  <ul class="pagination mb-0">
    <li class="page-item">
      <a class="page-link" href="?{{ pg_param }}={{ pg_value|urlencode }}&page={{ paginator.page_prev }}&size={{ paginator.size }}">&laquo;</a>
    </li>
    <li class="page-item{% if paginator.page_first %} active{% endif %}">
      <a class="page-link" href="?{{ pg_param }}={{ pg_value|urlencode }}&page=1&size={{ paginator.size }}">1</a>
    </li>
    {% if paginator.page_current %}
    <li class="page-item active">
      <a class="page-link" href="?{{ pg_param }}={{ pg_value|urlencode }}&page={{ paginator.page }}&size={{ paginator.size }}">{{ paginator.page }}</a>
    </li>
    {% endif %}
    <li class="page-item{% if paginator.page_last_active %} active{% endif %}">
      <a class="page-link" href="?{{ pg_param }}={{ pg_value|urlencode }}&page={{ paginator.page_last }}&size={{ paginator.size }}">{{ paginator.page_last }}</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="?{{ pg_param }}={{ pg_value|urlencode }}&page={{ paginator.page_next }}&size={{ paginator.size }}">&raquo;</a>
    </li>
  </ul>
</nav>
{% endif %}

<div class="d-flex justify-content-center mb-2">
  <div class="dropdown">
    <a class="btn btn-outline-primary btn-sm dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
      {{ paginator.size }} {% translate 'per page' %}
    </a>
    <div class="dropdown-menu">
      {% for s in paginator.size_list %}
      <a class="dropdown-item" href="?{{ pg_param }}={{ pg_value|urlencode }}&size={{ s }}">{{ s }}</a>
      {% endfor %}
    </div>
  </div>
</div>