<div class="navbar">
    <nav>
        <a href="{{ url_for('main.index') }}"><img src="{{ url_for('static', filename='assets/img/wmgzon.bmp') }}" id="logo" class="not-required" alt="WMGZON Logo"></a>
        <form action="" method="get">
            <input type="text" name="search" placeholder="Find your favourite products" class="search-bar">
            <input type="submit" class="search-button">
        </form>
        <div class="vert-align">
            <a href="{{ url_for('main.index') }}"><img src="{{ url_for('static', filename='assets/img/cart.bmp') }}" id="cart" alt="Shopping Cart"></a>
            {% if user != None: %}
                <a href="{{ url_for('main.users.logout') }}">Welcome, {{ user.username }}</a>
            {% else %}
                <a href="{{ url_for('main.users.display_login') }}">Login/Signup</a>
            {% endif %}
        </div>
    </nav>

    {% if user != None %}
        {% if user.role == "Seller" %}
            <div class="categories">
                {# List all available Seller tools #}
                <a href="{{ url_for('main.products.display_add') }}" class="category">Create Products</a>
                <a href="{{ url_for('main.products.display_own') }}" class="category">View My Products</a>
                <a href="{{ url_for('main.stats.index') }}" class="category">View Seller Stats</a>
            </div>
        {% elif user.role == "Admin" %}
            <div class="categories">
                {# List all available Admin tools #}
                <a href="{{ url_for('main.admin.users') }}" class="category">Manage Users</a>
                <a href="{{ url_for('main.admin.main') }}" class="category">Manage Products</a>
            </div>
        {% endif %}
    {% endif %}

    <div class="categories">
        {# List all categories and ensure the selected one is highlighted #}
        {% for c in categories %}
            {% if category == c.name %}
                <a style="color: cyan" href="{{ url_for('main.products.category', category=c.name) }}" class="category">{{c.name}}</a>
            {% else %}
                <a href="{{ url_for('main.products.category', category=c.name) }}" class="category">{{c.name}}</a>
            {% endif %}
        {% endfor %}
    </div>   
</div>

{% with messages = get_flashed_messages(with_categories=true)%}
    {% if messages %}
        {% for category, message in messages %}
            <label>
                <input type="checkbox" class="alertCheckbox" autocomplete="off" />
                <div class="alert {{category}}">
                    <span class="alertClose">X</span>
                    <span class="alertText">{{message}}
                        <br class="clear"/></span>
                </div>
            </label>
        {% endfor%}
    {% endif %}
{% endwith %}