{%- capture menu_style -%}
    width: {{ section.settings.mobile_view_on_desktop_width }}%;
{%- endcapture -%}
<div id="mobile-menu-content" {% render 'overwrite-theme-style', settings: section.settings, append_style: menu_style %}>

    <div class="container">

        <div class="mobile-menu-header" style="--mobile-menu-header-logo-height: {{ section.settings.logo_height }}px;">
            {% comment %} HERE WE PLACE THE HEADER MENU LOGO PER JAVASCRIPT {% endcomment %}
            {% render 'image', image: section.settings.logo %}
            <div class="mobile-menu-header-close-icon no-click-highlight" style="--mobile-menu-header-close-icon-color: {{ section.settings.icon_color | color_to_hex }};">{% render 'icon-close' %}</div>
        </div>

        {%- if section.settings.show_search -%}
            <div class="mobile-menu-search" style="background-color: {{ section.settings.search_background_color }};">
                {% render 'icon-search' %}
                <span>{{ 'sections.search-popup.mobile_menu' | t }}</span>
            </div>
        {%- endif %}

        {%- if section.settings.show_border_shadow -%}
            <div class="mobile-menu-shadow-spacer"></div>
        {%- endif %}
        
        {%- for block in section.blocks -%}
        {% case block.type %}

            {%- when '@app' -%}
                {% render block %}
            {% when "menu" %}
                <ul class="mobile-menu-link-list" style="--mobile-menu-sub-link-list-border-color: {{ block.settings.border_color }};">
                    {%- assign menu = linklists[block.settings.menu] -%}
            
                    {%- if menu != blank and menu.links.size > 0 -%}
                        {%- for link in menu.links -%}
                        <li>
                            <a href="{{ link.url }}" class="h4" {% render 'overwrite-theme-style', settings: block.settings %}>
                                <span>{{ link.title }}</span>
                                {% if link.links.size > 0 -%}
                                    {% render 'icon-arrow-right' %}
                                {%- endif %}
                            </a>
                            {% comment %} SUB LINK LIST {% endcomment %}
                            {% if link.links.size > 0 -%}
                                <ul class="mobile-menu-sub-link-list" data-open="false">
                                {%- for link in link.links -%}
                                    <li>
                                        <a href="{{ link.url }}" class="h4" {% render 'overwrite-theme-style', settings: block.settings %}>
                                            <span>{{ link.title }}</span>
                                            {% if link.links.size > 0 -%}
                                                {% render 'icon-arrow-right' %}
                                            {%- endif %}
                                        </a>

                                        {% comment %} SUB SUB LINK LIST {% endcomment %}
                                        {% if link.links.size > 0 -%}
                                            <ul class="mobile-menu-sub-sub-link-list" data-open="false">
                                            {%- for link in link.links -%}
                                                <li>
                                                    <a href="{{ link.url }}" class="h4" {% render 'overwrite-theme-style', settings: block.settings %}>
                                                        <span>{{ link.title }}</span>
                                                    </a>
                                                </li>
                                            {%- endfor -%}
                                            </ul>
                                        {%- endif %}
                                        {% comment %} SUB SUB LINK LIST END {% endcomment %}
                                    </li>
                                {%- endfor -%}
                                </ul>
                            {%- endif %}
                            {% comment %} SUB LINK LIST END {% endcomment %}
                        </li>
                        {%- endfor -%}
                    {%- endif -%}
                </ul>

            {% when "separatorline" %}
                <div class="mobile-menu-separator-line" {% render 'overwrite-theme-style', settings: block.settings %}></div>

            {% when "image_with_text" %}
                <div class="mobile-menu-image-with-text" {% render 'overwrite-theme-style', settings: block.settings %}>
                    {% render 'image', image: block.settings.image %}
                    <div>{{ block.settings.text }}</div>
                </div>

        {% endcase %}
        {%- endfor -%}

    </div>

    {%- if section.settings.show_social_networks -%}
        <div class="mobile-menu-social-networks" style="background-color: {{ section.settings.social_network_background_color }};">{% render 'social-networks' %}</div>
    {%- endif -%}

</div>

<div id="mobile-menu-content-submenu" {% render 'overwrite-theme-style', settings: section.settings %}>

    <div class="mobile-menu-content-submenu-header container">
        <div>
            {% render 'icon-arrow-right' %}
            <span>{{ 'sections.search-popup.back' | t }}</span>
        </div>
        <h3></h3>
    </div>

    <div class="mobile-menu-content-submenu-content container"></div>
    
</div>

<div id="mobile-menu-content-sub-submenu" {% render 'overwrite-theme-style', settings: section.settings %}>

    <div class="mobile-menu-content-submenu-header container">
        <div>
            {% render 'icon-arrow-right' %}
            <span>{{ 'sections.search-popup.back' | t }}</span>
        </div>
        <h3></h3>
    </div>

    <div class="mobile-menu-content-submenu-content container"></div>
    
</div>

{% comment %} ===== Section Help Video ===== {% endcomment %}
{%- if request.design_mode -%}
    <div 
        class="section-help-video-identifier" 
        data-title="{{ 'conrise.sectionHelpTitles.mobile-menu' | t }}", 
        data-video="18bb7c9d46064f4786a379e4b12129b1?sid=3f833a23-a642-47fd-8adc-80c22767ee47"
        data-padding-bottom="55.987558320373246%"
    ></div>
{%- endif -%}
{% comment %} ===== Section Help Video ===== {% endcomment %}

{% schema %}
{
    "name": "t:sections.mobile-menu.name",
    "settings": [
        {
            "type": "header",
            "content": "t:settings.general.section_help_video",
            "info": "[Video](https://www.loom.com/share/18bb7c9d46064f4786a379e4b12129b1?sid=3f833a23-a642-47fd-8adc-80c22767ee47)"
        },
        {
            "type": "image_picker",
            "id": "logo",
            "label": "t:sections.mobile-menu.settings.logo",
            "info": "t:sections.mobile-menu.settings.logo_info"
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "color",
            "id": "icon_color",
            "label": "t:sections.mobile-menu.settings.icon_color",
            "default": "#000000"
        },
        {
            "type": "range",
            "id": "logo_height",
            "label": "t:sections.mobile-menu.settings.logo_height",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 22
        },
        {
            "type": "checkbox",
            "id": "show_border_shadow",
            "label": "t:sections.mobile-menu.settings.show_border_shadow",
            "default": true
        },
        {
            "type": "range",
            "id": "mobile_view_on_desktop_width",
            "label": "t:sections.mobile-menu.settings.mobile_view_on_desktop_width",
            "info": "t:sections.mobile-menu.settings.mobile_view_on_desktop_width_info",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "%",
            "default": 50
        },
        {
            "type": "header",
            "content": "t:sections.mobile-menu.settings.social_networks"
        },
        {
            "type": "checkbox",
            "id": "show_social_networks",
            "default": true,
            "label": "t:sections.mobile-menu.settings.show_social_networks"
        },
        {
            "type": "color",
            "id": "social_network_background_color",
            "label": "t:sections.mobile-menu.settings.social_network_background_color",
            "default": "#fafafa"
        },
        {
            "type": "header",
            "content": "t:sections.mobile-menu.settings.search"
        },
        {
            "type": "checkbox",
            "id": "show_search",
            "label": "t:sections.mobile-menu.settings.show_search",
            "default": true
        },
        {
            "type": "color",
            "id": "search_background_color",
            "label": "t:sections.mobile-menu.settings.search_background_color",
            "default": "#eeeeee"
        },
        {
            "type": "header",
            "content": "t:sections.general.theme-settings.content",
            "info": "t:sections.general.theme-settings.info"
        },
        {
            "type": "color",
            "id": "overwrite_theme_background_color",
            "label": "t:sections.mobile-menu.settings.overwrite_theme_background_color",
            "info": "t:sections.mobile-menu.settings.overwrite_theme_background_color_info"
        }
    ],
    "blocks": [
        {
            "type": "@app"
        },
        {
            "type": "menu",
            "name": "t:sections.mobile-menu.blocks.menu.name",
            "settings": [
                {
                    "type": "link_list",
                    "id": "menu",
                    "label": "t:sections.mobile-menu.blocks.menu.settings.menu"
                },
                {
                    "type": "color",
                    "id": "border_color",
                    "label": "t:sections.mobile-menu.blocks.menu.settings.border_color",
                    "default": "#eeeeee"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_text_color",
                    "label": "t:sections.mobile-menu.blocks.menu.settings.overwrite_theme_text_color",
                    "info": "t:sections.mobile-menu.blocks.menu.settings.overwrite_theme_text_color_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size",
                    "label": "t:sections.mobile-menu.blocks.menu.settings.overwrite_theme_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.mobile-menu.blocks.menu.settings.overwrite_theme_font_size_info"
                }
            ]
        },
        {
            "type": "separatorline",
            "name": "t:sections.mobile-menu.blocks.separatorline.name",
            "settings": [
                {
                    "type": "header",
                    "content": "t:sections.general.margin"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_top",
                    "label": "t:sections.mobile-menu.blocks.separatorline.settings.overwrite_theme_margin_top",
                    "min": -30,
                    "max": 70,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_bottom",
                    "label": "t:sections.mobile-menu.blocks.separatorline.settings.overwrite_theme_margin_bottom",
                    "min": -30,
                    "max": 70,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_border_color",
                    "label": "t:sections.mobile-menu.blocks.separatorline.settings.overwrite_theme_border_color",
                    "info": "t:sections.mobile-menu.blocks.separatorline.settings.overwrite_theme_border_color_info"
                }
            ]
        },
        {
            "type": "image_with_text",
            "name": "t:sections.mobile-menu.blocks.image_with_text.name",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "image",
                    "label": "t:sections.mobile-menu.blocks.image_with_text.settings.image"
                },
                {
                    "type": "richtext",
                    "id": "text",
                    "label": "t:sections.mobile-menu.blocks.image_with_text.settings.text"
                },
                {
                    "type": "header",
                    "content": "t:sections.general.margin"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_top",
                    "label": "t:sections.mobile-menu.blocks.image_with_text.settings.overwrite_theme_margin_top",
                    "min": -30,
                    "max": 70,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_margin_bottom",
                    "label": "t:sections.mobile-menu.blocks.image_with_text.settings.overwrite_theme_margin_bottom",
                    "min": -30,
                    "max": 70,
                    "step": 1,
                    "unit": "px",
                    "default": 0
                },
                {
                    "type": "header",
                    "content": "t:sections.general.theme-settings.content",
                    "info": "t:sections.general.theme-settings.info"
                },
                {
                    "type": "color",
                    "id": "overwrite_theme_text_color",
                    "label": "t:sections.mobile-menu.blocks.image_with_text.settings.overwrite_theme_text_color",
                    "info": "t:sections.mobile-menu.blocks.image_with_text.settings.overwrite_theme_text_color_info"
                },
                {
                    "type": "range",
                    "id": "overwrite_theme_font_size",
                    "label": "t:sections.mobile-menu.blocks.image_with_text.settings.overwrite_theme_font_size",
                    "min": 0,
                    "max": 50,
                    "step": 1,
                    "unit": "px",
                    "default": 0,
                    "info": "t:sections.mobile-menu.blocks.image_with_text.settings.overwrite_theme_font_size_info"
                }
            ]
        }
    ],
    "default": {
        "blocks": [
            {
                "type": "menu",
                "settings": {
                    "menu": "main-menu"
                }
            },
            {
                "type": "separatorline",
                "settings": {
                    "overwrite_theme_margin_top": 10,
                    "overwrite_theme_margin_bottom": 10
                }
            },
            {
                "type": "image_with_text",
                "settings": {
                    "text": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.</p>",
                    "overwrite_theme_margin_top": 20
                }
            }
        ]
    }
}
{% endschema %}