<div class="navbar">
    <nav>
        <a href="/"><img src="{{url_for('static', filename='assets/img/wmgzon.png')}}" 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>
        {% if user != None: %}
            <a href="/logout">Welcome, {{ user.username }}</a>
        {% else %}
            <a href="/login">Login/Signup</a>
        {% endif %}
    </nav>
        
    <centre>
        <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="/products/{{c.name}}" class="category">{{c.name}}</a>
                {% else %}
                    <a href="/products/{{c.name}}" class="category">{{c.name}}</a>   
                {% endif %}
            {% endfor %}
        </div>
    </centre>    
</div>

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