{% load static %}

<!-- top_nav.html -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm py-3">
    <div class="container-fluid">
        <!-- Brand -->
        <a class="navbar-brand fw-bold text-primary" href="{% url 'landing:index' %}">Codescraftsman</a>

        <!-- Toggler for mobile view -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar links -->
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto align-items-center">
                <li class="nav-item">
                    <a class="nav-link active" href="{% url 'landing:index' %}">Home</a>
                </li>
                <!-- Link for Trends -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="{% url 'trending:index' %}" id="trendsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Trends
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="trendsDropdown">
                        <li><a class="dropdown-item" href="{% url 'trending:analytics_list' %}">Analytics</a></li>
                        <li><a class="dropdown-item" href="{% url 'trending:machine_learning_list' %}">Machine Learning</a></li>
                        <li><a class="dropdown-item" href="{% url 'trending:artificial_intelligence_list' %}">Artificial Intelligence</a></li>
                        <li><a class="dropdown-item" href="{% url 'trending:computer_systems_list' %}">Computer Systems</a></li>
                        <li><a class="dropdown-item" href="{% url 'trending:microprocessors_list' %}">Microprocessors</a></li>
                        <li><a class="dropdown-item" href="{% url 'trending:cyber_security_list' %}">Cyber Security</a></li>
                        <li><a class="dropdown-item" href="{% url 'trending:programming_list' %}">Programming</a></li>
                    </ul>
                </li>
                <!-- Static links -->
                <li class="nav-item"><a class="nav-link" href="{% url 'analytics:index' %}">Analytics</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'machinelearning:index' %}">Machine Learning</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'services:index' %}">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'about:index' %}">About</a></li>
                <!-- Authentication Links -->
                {% if user.is_authenticated %}
                    <li class="nav-item">
                        <a class="nav-link btn btn-outline-primary ms-2 px-3" href="{% url 'logout' %}">Logout</a>
                    </li>
                {% else %}
                    <li class="nav-item">
                        <a class="nav-link btn btn-outline-primary ms-2 px-3" href="{% url 'login' %}">Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn btn-primary text-light ms-2 px-3" href="{% url 'signup' %}">Sign Up</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>