{% load cjkcms_tags wagtailcore_tags wagtailimages_tags %}

{% block menu_item %}

    {% can_show_item value.visible_for as csi %}
    {% if csi %}
        {% if value.page.live or value.link or value.document %}
        {% is_menu_item_dropdown value as has_dropdown %}
        <li class="{{liclass}} {% if has_dropdown %}dropdown{% endif %}">
            {% is_active_page page value.page as is_active_url %}
            <a href="{% block url %}#{% endblock %}"
            {% if value.settings.custom_id %}id="{{value.settings.custom_id}}"{% endif %}
            class="{{aclass}} {% if has_dropdown %}dropdown-toggle{% endif %}
                    {% if is_active_url %}active{% endif %}
                    {{value.settings.custom_css_class}}"
            {% if has_dropdown %}data-bs-toggle="dropdown" data-mdb-toggle="dropdown"
            role="button"
            aria-haspopup="true"
            aria-expanded="false"
            {% endif %}
            {% if ga_event_label %}
            data-ga-event-label="{{ ga_event_label }}"
            {% endif %}
            {% if ga_event_category %}
            data-ga-event-category="{{ ga_event_category }}"
            {% endif %}
            >
                {% if value.image %}
                    {% image value.image max-200x200 as img %}
                    <img src="{{img.url}}" class="w-100" alt="{{img.image.title}}"/>
                {% elif value.display_text %}
                    {% link_display value.display_text as dt %}
                    {{dt|safe}}
                {% elif value.page %}
                    {{value.page.title}}
                {% elif value.document %}
                    {{value.document.title}}
                {% endif %}
            </a>


            {% if has_dropdown %}
            <ul class="dropdown-menu">
                {% for sub_link in value.sub_links %}
                    {% include_block sub_link with liclass="" aclass="dropdown-item" %}
                {% endfor %}
                {% if value.show_child_links %}
                    {% for child in value.page.specific.get_index_children %}
                        {% is_active_page page child as is_active_child %}
                        <li><a class="dropdown-item {% if is_active_child %}active{% endif %}" href="{% pageurl child %}">{{child.title}}</a></li>
                    {% endfor %}
                {% endif %}
            </ul>
            {% endif %}
        </li>
        {% endif %}
    {% endif %}
{% endblock %}