<nav class="navbar navbar-expand-lg bg-white text-dark fixed-top">
    <div class="container-fluid">
        <span class="d-lg-none">
            <a href="" onclick="displayCart(event);" style="text-decoration: none;" class="displayCartAnchorTag">
                <i class="bi bi-cart fs-5 text-dark"></i>
                <span class="badge rounded text-white bg-dark fs-5 totalCartItemsCount">{{cartItemsCount}}</span>
            </a>
        </span>
        <a class="navbar-brand" href="/" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Homepage">
            <i class="bi bi-house-door"></i>
            <span class="badge fs-5 bg-dark text-white rounded-pill">
                {{sitetitle}}
            </span>
        </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 mb-2 mb-lg-0">
                {% if categories %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Products
                    </a>
                    <ul class="dropdown-menu" style="max-height: 400px; overflow-y: scroll;">
                        <li><a class="dropdown-item" href="{% url 'store:homepage' %}">All</a></li>
                        <li><hr class="dropdown-divider"></li>
                        {% for category in categories %}
                            <li><a class="dropdown-item" href="{% url 'store:products_by_category' category.slug %}">{{category.title}}</a></li>
                        {% endfor %}
                    </ul>
                </li>
                {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'store:homepage' %}">Homepage</a>
                </li>
                {% endif %}
                {% if request.user.is_authenticated %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            {{request.user.first_name}}
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'authentication:account' %}">Account</a></li>
                            {% if not request.user.is_superuser %}<li><a class="dropdown-item" href="{% url 'store:orders' %}">Orders</a></li>{% endif %}
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'authentication:logout' %}">Logout</a></li>
                        </ul>
                    </li>
                    {% if request.user.is_superuser %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Database
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'store:clear_database_but_images' %}">Clear</a></li>
                            <li><a class="dropdown-item" href="{% url 'store:clear_database_images' %}">Clear Images</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'store:database_update' %}">Update</a></li>
                        </ul>
                    </li>
                    {% endif %}
                {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'authentication:homepage' %}">Login</a>
                </li>
                {% endif %}
                <li class="nav-item">
                    <a class="nav-link displayCartAnchorTag" href="" style="text-decoration: none;" onclick="displayCart(event);">
                        <i class="bi bi-cart"></i>
                        <span class="badge bg-dark rounded text-white fs-6 totalCartItemsCount">{{cartItemsCount}}</span>
                    </a>
                </li>
            </ul>
            <form class="d-flex" role="search" action="{% url 'store:search' %}" method="get" id="navBarSearchForm">
                <input class="form-control form-control-sm me-2" type="search" placeholder="Search" id="navBarSearchFormInput" aria-label="Search" name="q">
                <button class="btn btn-outline-dark btn-sm" type="submit" id="navBarSearchBtn">Search</button>
            </form>
        </div>
    </div>
</nav>