{% load humanize %}

<div id="navigation-source">
{% if installs.has_other_pages %}
            Page {{ installs.number|intcomma }} of {{ installs.paginator.num_pages|intcomma }} | Showing ports {{ installs.start_index|intcomma }} to
            {{ installs.end_index|intcomma }}<br><br>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    {% if installs.has_previous %}
                        <li class="page-item"><button class="page-link" onclick="changePage({{ installs.previous_page_number }})">&laquo;</button></li>
                    {% else %}
                        <li class="disabled page-item"><span class="page-link">&laquo;</span></li>
                    {% endif %}

                    {% if installs.number|add:'-7' > 1 %}
                        <li class="page-item"><button class="page-link" onclick=changePage({{ installs.number|add:'-8' }})>&hellip;</button>
                        </li>
                    {% endif %}

                    {% for i in installs.paginator.page_range %}
                        {% if installs.number == i %}
                            <li class="active page-item"><span class="page-link">{{ i }} <span
                                    class="sr-only">(current)</span></span></li>
                        {% elif i > installs.number|add:'-8' and i < installs.number|add:'8' %}
                            <li class="page-item"><button class="page-link" onclick="changePage({{ i }})">{{ i }}</button></li>
                        {% endif %}
                    {% endfor %}

                    {% if installs.paginator.num_pages > installs.number|add:'7' %}
                        <li class="page-item"><button class="page-link" onclick="changePage({{ installs.number|add:'8' }})">&hellip;</button>
                        </li>
                    {% endif %}

                    {% if installs.has_next %}
                        <li class="page-item"><button class="page-link" onclick="changePage({{ installs.next_page_number }})">&raquo;</button>
                        </li>
                    {% else %}
                        <li class="disabled page-item"><span class="page-link">&raquo;</span></li>
                    {% endif %}
                </ul>
            </nav>
{% endif %}
{% if not search_by == "" %}
    <h5 class="text-center">Showing ports that match with: <i><u>{{ search_by }}</u></i></h5>
{% endif %}
</div>

<div id="response-table">
{% if installs|length > 0 %}
{% for port in installs %}
    <div class="row">
        <div class="col-1 p-2 border-left border-bottom text-right">
            {{ installs.start_index|add:forloop.counter0 }}
        </div>
        <div class="col-5 p-2 border-left border-bottom pl-lg-4 pl-3">
            <a href="{% url 'port_detail' port.port %}">{{ port.port }}</a>
        </div>
        <div class="col-3 p-2 border-left border-bottom text-right">
            {{ port.total_count|intcomma }}
        </div>
        <div class="col-3 p-2 border-left border-bottom border-right text-right">
            {{ port.req_count|intcomma }}
        </div>
    </div>
{% endfor %}
{% else %}
<div class="text-center">
    <br>
    <h4>Nothing here yet.</h4>
    <p>The app does not have any records for this selection yet.</p>
</div>
{% endif %}
</div>