{% import "macros.jinja" as macros %}

<!-- All molts live here! -->
{% for molt in molts.items %}
    {% include "fast-molt.html" %}
{% endfor %}

{% if not molts.has_next %}
    <div class="d-inline-block w-100 pt-5 pb-3 text-muted text-molt text-center">Follow more people to see their Molts here! 🦀</div>
{% endif %}

<nav aria-label="Page navigation buttons" class="mt-4">
    <ul class="pagination justify-content-center">
        <li class="page-item {{'' if molts.has_prev else 'disabled'}}">
            <a class="page-link h-100 p-0" href="javascript:loadContent({{molts.prev_num}});" tabindex="-1">

                <svg class="absolute-center" width="24" height="24" data-jam="chevron-left">
                    <use href="{{sprite_url}}?version={{server_start}}#chevron-left"></use>
                </svg>
            </a>
        </li>
        <li class="page-item {{'' if page_n > 1 else 'disabled'}}"><a class="page-link" href="javascript:loadContent(1);">Home</a></li>
        <li class="page-item {{'' if molts.has_next else 'disabled'}}">
            <a class="page-link h-100 p-0" href="javascript:loadContent({{molts.next_num}});">

                <svg class="absolute-center" width="24" height="24" data-jam="chevron-right">
                    <use href="{{sprite_url}}?version={{server_start}}#chevron-right"></use>
                </svg>
            </a>
        </li>
    </ul>
</nav>

<!-- Spacer -->
<div class="d-inline-block w-100 p-5 my-5 text-muted text-molt text-center"></div>