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

<div class="row mx-0 search-tab-buttons">
    <div id="molts-btn" class="profile-box-category col active" onclick="switchTo('molts');">
        <div class="py-2"><strong class="d-inline-block w-100 text-center">Molts</strong></div>
    </div>
    <div id="crabs-btn" class="profile-box-category col" onclick="switchTo('crabs');">
        <div class="py-2"><strong class="d-inline-block w-100 text-center">Crabs</strong></div>
    </div>
</div>

<div id="molts">
    {% if crab_results.count() > 3 and molt_results.page == 1 %}
    <div class="inline-section">
        <div class="inline-section-body">
            <div class="inline-section-title">
                <span>
                    People
                </span>
            </div>
            <div class="inline-section-content">
                {% for crab in crab_results[:3] %}
                    {% include "mini_bio.html" %}
                {% endfor %}
            </div>
            <div class="inline-section-footer" onclick="switchTo('crabs');">
                <span class="text-primary">
                    View all
                </span>
            </div>
        </div>
    </div>
    {% endif %}
    {% for molt in molt_results.items %}
        {% include "molt.html" %}
    {% else %}
        <div class="d-inline-block w-100 p-5 text-muted text-molt text-center">No results.</div>
    {% endfor %}

    {% if molt_results.has_next or molt_results.has_prev%}
        <nav aria-label="Page navigation buttons" class="mt-4">
            <ul class="pagination justify-content-center">
                <li class="page-item {{'' if molt_results.has_prev else 'disabled'}}">
                    <a class="page-link h-100 p-0" href="javascript:loadContent('{{query}}', {{molt_results.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('{{query}}', 1);">Home</a>
                </li>
                <li class="page-item {{'' if molt_results.has_next else 'disabled'}}">
                    <a class="page-link h-100 p-0" href="javascript:loadContent('{{query}}', {{molt_results.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>
    {% endif %}
</div>
<div id="crabs" class="d-none">
    {% for crab in crab_results %}
        {% include "mini_bio.html" %}
    {% else %}
        <div class="d-inline-block w-100 p-5 text-muted text-molt text-center">No results.</div>
    {% endfor %}
</div>

<script async>
    highlightKeyword('{{query}}', '#search-results .mini-molt-content');
</script>