{% comment %}

Navigation bar and search feature across BCA website

Features:
- Navbar with active state highlighting based on the current page
- Search box to search for datasets and genes using API endpoints

{% endcomment %}

<style>
    .w-220px { width: 220px; }
    .w-25px { width: 25px; }
    .w-15px { width: 15px; }

    a.navbar-brand {
        width: 40px;
        height: 40px;
    }

    a.navbar-brand img {
        position: relative;
        left: -15%;
        top: -32%;
    }
</style>

{% load static %}
{% with request.resolver_match.url_name as url_name %}
    <header>
        <nav class="navbar navbar-expand-md fixed-top navbar-dark">
            <div class="container-xxl">
                <a class="navbar-brand" href="{% url 'index' %}">
                    <img title="Biodiversity Cell Atlas"
                         width="50"
                         height="50"
                         alt="Biodiversity Cell Atlas"
                         src="{% static 'app/images/logos/BCA/BCALogotypeDesign_2024_Seal_Logo_White.svg' %}">
                </a>

                <button class="navbar-toggler"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent"
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item dropdown">
                            <a class="nav-link {% if 'atlas' in url_name %}active{% endif %}"
                               href="{% url 'atlas' %}">Cell Atlas</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link {% if url_name == 'downloads' %}active{% endif %}"
                               href="{% url 'downloads' %}">Downloads</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link {% if url_name == 'docs' %}active{% endif %}"
                               href="{% url 'docs' %}">Docs</a>
                        </li>

                        {% load bca_website_links %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% bca_url 'blog' %}" target="_blank">Blog</a>
                        </li>

                        <li class="nav-item nav-right">
                            <a class="nav-link {% if url_name == 'about' %}active{% endif %}"
                               href="{% url 'about' %}">About</a>
                        </li>
                    </ul>
                    {% comment %}
                    <ul class="navbar-nav">
                        <li class="nav-item d-none d-md-block d-lg-none">
                            <a class="nav-link" href="#">
                                <i class="fa fa-search"></i> Search
                            </a>
                        </li>
                    </ul>
                    {% endcomment %}
                    <ul class="navbar-nav">
                        <li class="nav-item pe-2">
                            <a class="nav-link"
                               href="https://forms.cloud.microsoft/e/Xrn23AgnmT"
                               target="_blank">
                                <i class="fa fa-envelope fa-fw"></i>
                                <span class="d-inline d-md-none d-lg-inline">Newsletter</span>
                            </a>
                        </li>
                        <li>
                            <form class="d-block d-flex" role="search">
                                <input id="bca-search"
                                       class="bca-search form-control w-220px"
                                       type="search"
                                       placeholder="Search the BCA..."
                                       aria-label="Search">
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
{% endwith %}

<script type="module">
    import { initSearch } from "{% static 'app/dist/search/search_bar.js' %}";
    initSearch();
</script>