{% load cms_tags %}

{% block extra_css %}
<style>
    /* #Mega Menu Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .mega-menu {
        background: #f0f0f0;
        display: none;
        left: 0;
        position: absolute;
        text-align: left;
        width: 100%;
    }

    .mega-menu h3 {
        color: #444;
    }

    .mega-menu ul {
        float: left;
        margin-bottom: 20px;
        /* margin-right: 40px; */
        /* width: 180px; */
    }

    .mega-menu ul:last-child {
        margin-right: 0;
    }

    .mega-menu a {
        border-bottom: 1px solid #ddd;
        /* color: #4ea3d8; */
        display: block;
        /* padding: 10px 0; */
    }

    .mega-menu a:hover {
        color: #4ea3d8;
    }



    /* #Droppable Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    /* .droppable {
        position: static;
    } */

    .droppable>a:after {
        /* content: "\f107";
        font-family: FontAwesome; */
        /* font-size: 12px; */
        /* padding-left: 6px; */
        position: relative;
        /* top: -1px; */
    }

    .droppable:hover .mega-menu {
        display: block;
    }



    /* #Browser Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */
    .cf:before,
    .cf:after {
        content: " ";
        /* 1 */
        display: table;
        /* 2 */
    }

    .cf:after {
        clear: both;
    }
</style>

{% endblock %}


{% get_menus as menu_list %}

<ul class="hidden  gap-2 text-black  mt-4 md:mt-0 [&>a]:p-2 [&>a]:uppercase [&>a]:rounded">
    {% for menu in menu_list %}
    {% if menu.depth <= 3 %} <li class='droppable'>

        <a href="{{menu.url}} "
            class="{% if request.path == menu.url or request.path == menu.page.url %} bg-orange  font-bold {% endif %}">
            {{menu.numchild}}
            {{menu.title}}
            {{menu.depth}}

        </a>
        <div class='mega-menu'>
            <div class="container mx-auto gap-4">
                <ul class="flex grid">
                    <h3>Heading 1</h3>
                    <br />
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                </ul><!-- .ul-reset -->
                <ul class="ul-reset">
                    <h3>Heading 2</h3>
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                </ul><!-- .ul-reset -->
                <ul class="ul-reset">
                    <h3>Heading 3</h3>
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                    <li><a href='#'>Category One Sublink</a></li>
                </ul><!-- .ul-reset -->
                <ul class="ul-reset">
                    <h3>Heading 4</h3>
                    <li><img src="http://placehold.it/205x172"></li>
                </ul>
            </div><!-- .container -->
        </div>
        </li>
        {% endif %}
        {% endfor %}



</ul>