{% comment %}

Atlas selection dropdown and tab navigation for Cell Atlas

Features:
- Allows user to search dataset by species and metadata (including taxonomic ranks)
- Upon dataset selection, the user is redirected to that dataset page
- Navigation tabs redirect to different views for the selected dataset
- When no dataset is selected, mockup is shown and navigation tabs are disabled

Input:
- dataset_dict: dictionary of arrays of dataset grouped by their phylum

{% endcomment %}

<div class="container-xxl">{% include "./dataset.html" with small="true" %}</div>

<!-- Subnavbar to navigate the Cell Atlas -->
<div class="subnavbar sticky-top py-1">
    <div class="container-xxl">
        <div class="d-flex">
            <ul class="nav nav-pills small flex-row flex-nowrap text-nowrap overflow-x-auto scroll-fade">
                {% for link in links %}
                    <!-- Add padding to avoid fade -->
                    <li class="nav-item">
                        <a class="nav-link p-2 {% if link.active %}active{% endif %} {% if link.disabled %}disabled{% endif %}"
                           href="{{ link.href }}">
                            <i class="fa fa-{{ link.icon }}"></i>
                            {{ link.name }}
                            {% if link.tooltip %}
                                <i class="fa fa-circle-question"
                                   data-bs-toggle="tooltip"
                                   data-bs-placement="bottom"
                                   data-bs-title="{{ link.tooltip }}"></i>
                            {% endif %}
                        </a>
                    </li>
                {% endfor %}
            </ul>

            <ul class="nav nav-pills small ms-auto text-nowrap">
                <li class="nav-item">
                    <a class="nav-link p-2 small"
                       data-bs-toggle="offcanvas"
                       href="#offcanvas"
                       role="button">
                        <i class="fa fa-ellipsis-vertical fa-fw"></i>
                        Show all
                    </a>
                </li>
            </ul>
        </div>

        <div class="offcanvas offcanvas-start"
             tabindex="-1"
             id="offcanvas"
             aria-labelledby="bdSidebarOffcanvasLabel">
            <div class="offcanvas-header border-bottom">
                <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Cell Atlas</h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="offcanvas"
                        aria-label="Close"
                        data-bs-target="#offcanvas"></button>
            </div>

            <div class="offcanvas-body">
                <ul class="nav nav-pills small flex-column flex-nowrap text-nowrap overflow-x-auto">
                    {% for link in links %}
                        <li class="nav-item">
                            <a class="nav-link p-2 {% if link.active %}active{% endif %} {% if link.disabled %}disabled{% endif %}"
                               href="{{ link.href }}">
                                <i class="fa fa-{{ link.icon }}"></i>
                                {{ link.name }}
                                {% if link.tooltip %}
                                    <i class="fa fa-circle-question"
                                       data-bs-toggle="tooltip"
                                       data-bs-placement="bottom"
                                       data-bs-title="{{ link.tooltip }}"></i>
                                {% endif %}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Add some whitespace between subnavbar and content -->
<div class="mb-2"></div>

<!-- Scroll to active element -->
<script>
    document.querySelector(".subnavbar .flex-row .active")?.scrollIntoView({
        inline: "center", block: "nearest"
    });
</script>