{% load static %}
<section class="header" id="header">
    <nav>
        {% if frontend_logo and home_url %}
            <a href="{{ home_url }}"><img src="{{ frontend_logo }}" alt="Logo"></a>
        {% else %}
            <a href="{% url 'home' %}"><img src="{% static 'frontend/images/logo.png' %}" alt="Logo"></a>
        {% endif %}
        {% if frontend_shop_icon and shop_url %}
            <div class="div1"><a href="{{ shop_url }}" target=”_blank”><img src="{{ frontend_shop_icon }}"></a></div>
        {% else %}
            <div class="div1"><a href="https://shop.phoenix.lk/" target=”_blank”><img src="{% static 'frontend/images/shop-icon.png' %}"></a></div>
        {% endif %}
        <div class="div2">
            <a href="javascript:void(0);" onclick="myFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
    </nav>
    <div class="nav-links" id="navLinks">
        <ul>
            {% if about.hyperlink and about.menu_text and about.hyperlink_type %}
                {% if about.hyperlink_type == 'internal' %}
                    <li><a href="{% url about.hyperlink %}" target="{{ about.link_target }}">{{ about.menu_text }}</a></li>
                {% else %}
                    <li><a href="{{ about.hyperlink }}" target="{{ about.link_target }}">{{ about.menu_text }}</a></li>
                {% endif %}
            {% else %}
                <li><a href="{% url 'about' %}">About Us</a></li>
            {% endif %}
                <div class="dropdown">
                    {% if products %}
                        <li><a href="{{products.hyperlink}}" target="{{ products.link_target }}"><button class="dropbtn">{{products.menu_text}} 
                            <i class="fa fa-chevron-down" aria-hidden="true"></i>
                        </button></a></li>
                    {% else %}
                        <li><a href="#"><button class="dropbtn">Products 
                            <i class="fa fa-chevron-down" aria-hidden="true"></i>
                        </button></a></li>
                    {% endif %}
                    <div class="dropdown-content">
                        {% for sublink in sub_menu_links %}
                            {% if sublink.hyperlink_type == 'internal' %}
                                <a href="{% url sublink.hyperlink %}" target="{{ sublink.link_target }}">{{ sublink.menu_text }}</a>
                            {% else %}
                                <a href="{{ sublink.hyperlink }}" target="{{ sublink.link_target }}">{{ sublink.menu_text }}</a>
                            {% endif %}  
                        {% empty %}
                            <a href="https://shop.phoenix.lk/category/household" target=”_blank”>Household</a>
                            <a href="https://shop.phoenix.lk/category/storage-and-organization" target=”_blank”>Storage & Organization</a>
                            <a href="https://shop.phoenix.lk/category/flo-modular-cupboards" target=”_blank”>FLO Modular Cupboards</a>
                            <a href="https://shop.phoenix.lk/category/seating-and-table" target=”_blank”>Seating & Tables</a>
                            <a href="https://shop.phoenix.lk/category/waste-management" target=”_blank”>Waste Management</a>
                            <a href="https://shop.phoenix.lk/category/Handling-cKlUB" target=”_blank”>Crates & Pallets</a>
                            <a href="{% url 'hardware' %}">Hardware</a>
                            <a href="{% url 'foryou' %}">Custom Manufacturing</a>
                            <a href="{% url 'collection_2024' %}">Collection 2024</a>
                        {% endfor %} 
                    </div>
                </div> 
                {% if stories.hyperlink and stories.menu_text and stories.hyperlink_type %}
                    {% if stories.hyperlink_type == 'internal' %}
                        <li><a href="{% url stories.hyperlink %}" target="{{ stories.link_target }}">{{ stories.menu_text }}</a></li>
                    {% else %}
                        <li><a href="{{ stories.hyperlink }}" target="{{ stories.link_target }}">{{ stories.menu_text }}</a></li>
                    {% endif %}
                {% else %}
                    <li><a href="https://stories.phoenix.lk/" target=”_self”>Phoenix Stories</a></li>
                {% endif %}
                {% if news.hyperlink and news.menu_text and news.hyperlink_type %}
                    {% if news.hyperlink_type == 'internal' %}
                        <li><a href="{% url news.hyperlink %}" target="{{ news.link_target }}">{{ news.menu_text }}</a></li>
                    {% else %}
                        <li><a href="{{ news.hyperlink }}" target="{{ news.link_target }}">{{ news.menu_text }}</a></li>
                    {% endif %}
                {% else %}
                    <li><a href="https://blog.phoenix.lk/" target=”_self”>News</a></li>
                {% endif %}
                {% if shop.hyperlink and shop.menu_text and shop.hyperlink_type %}
                    {% if shop.hyperlink_type == 'internal' %}
                        <li><a href="{% url shop.hyperlink %}" target="{{ shop.link_target }}">{{ shop.menu_text }}</a></li>
                    {% else %}
                        <li><a href="{{ shop.hyperlink }}" target="{{ shop.link_target }}">{{ shop.menu_text }}</a></li>
                    {% endif %}
                {% else %}
                    <li><a href="https://shop.phoenix.lk/" target=”_blank”>Shop</a></li>
                {% endif %}
                {% if flo.hyperlink and flo.menu_text and flo.hyperlink_type %}
                    {% if flo.hyperlink_type == 'internal' %}
                        <li><a href="{% url flo.hyperlink %}" target="{{ flo.link_target }}">{{ flo.menu_text }}</a></li>
                    {% else %}
                        <li><a href="{{ flo.hyperlink }}" target="{{ flo.link_target }}">{{ flo.menu_text }}</a></li>
                    {% endif %}
                {% else %}
                    <li><a href="https://flo.lk/" target=”_blank”>FLO.LK</a></li>
                {% endif %}
                {% if careers.hyperlink and careers.menu_text and careers.hyperlink_type%}
                    {% if careers.hyperlink_type == 'internal' %}
                        <li><a href="{% url careers.hyperlink %}" target="{{ careers.link_target }}">{{ careers.menu_text }}</a></li>
                    {% else %}
                        <li><a href="{{ careers.hyperlink }}" target="{{ careers.link_target }}">{{ careers.menu_text }}</a></li>
                    {% endif %}
                {% else %}
                    <li><a href="https://careers.phoenix.lk/" target=”_self”>Careers</a></li>
                {% endif %}
        </ul>
    </div>    
</section>

<!--------JavaScript to toggle Menu------->
<script>
    function myFunction() {
        var x = document.getElementById("navLinks");
        var h = document.getElementById("header");

        if (x.style.display === "block") {
            x.style.display = "none";
        } else {
            x.style.display = "block";
        }
    }
</script>