<ul class="pagination">
  {% if page_obj.has_previous() %}
    {% if page_obj.previous_page_number() == 1 and first_page_href != None %}
      <li><a href="{{ first_page_href }}">«</a></li>
    {% else %}
      <li><a href="{{ page_prefix or '' }}{{ page_obj.previous_page_number() }}{{ page_suffix or '' }}">«</a></li>
    {% endif %}
  {% else %}
    <li class="disabled-page"><span>«</span></li>
  {% endif %}

  {% for page in page_obj.page_range %}
    {% if not page %}
      <li class="disabled-page"><span>...</span></li>
    {% else %}
      <li{% if page == page_obj.number %} class="active-page"{% endif %}><a href="
        {%- if page == 1 and first_page_href != None -%}
          {{ first_page_href }}
        {%- else -%}
          {{ page_prefix or '' }}{{ page }}{{ page_suffix or '' }}
        {%- endif -%}
      ">{{ page }}</a></li>
    {% endif %}
  {% endfor %}

  {% if page_obj.has_next() %}
    <li><a href="{{ page_prefix or '' }}{{ page_obj.next_page_number() }}{{ page_suffix or '' }}">»</a></li>
  {% else %}
    <li class="disabled-page"><span>»</span></li>
  {% endif %}
</ul>