{%- if section.settings.fixed_menu -%}
    {% style %}
        #header{
            --header-position: fixed;
        }
    {% endstyle %}
{%- endif -%}

{%- capture section_style -%}
    --header-menu-icon-color: {{ section.settings.icon_color | color_to_hex }};
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;

    {%- if section.settings.background_color != blank -%}
        {%- assign backgroundAlpha = section.settings.background_color | color_extract: 'alpha' -%}

        {%- if backgroundAlpha == 1 -%}
            background-color: {{ section.settings.background_color | color_to_hex }};
        {%- endif -%}
    {%- endif -%}
{%- endcapture -%}

<div class="header-menu {% if section.settings.mobile_view_on_desktop %} header-menu-force-mobile {% endif %} {% if section.settings.show_border %} header-menu__border {% endif %}{% if section.settings.show_box_shadow %} header-menu__box-shadow {% endif %}" style="{{ section_style }}">
<div class="container">
    <div class="header-menu-mobile-menu">
        {% render 'icon-menu' %}
    </div>

    <a href="/" class="header-menu-logo no-click-highlight">
        {%- capture image_style -%}
            height: {{ section.settings.logo_height }}px;

            {%- if section.settings.logo_margin_bottom != 0 -%}
                margin-bottom: {{ section.settings.logo_margin_bottom }}px;
            {%- endif -%}
        {%- endcapture -%}
        {% render 'image', 
            image: section.settings.logo, 
            class: 'header-menu-logo-img-mobile',
            style: image_style,
            placeholder_width: 115,
            placeholder_height: 30,
            placeholder_padding_vertical: 10,
            placeholder_padding_horizontal: 0
        %}

        {%- capture image_style -%}
            height: {{ section.settings.logo_height_desktop }}px;

            {%- if section.settings.logo_margin_bottom != 0 -%}
                margin-bottom: {{ section.settings.logo_margin_bottom }}px;
            {%- endif -%}
        {%- endcapture -%}
        {% render 'image', 
            image: section.settings.logo, 
            class: 'header-menu-logo-img-desktop',
            style: image_style,
            placeholder_width: 115,
            placeholder_height: 30,
            placeholder_padding_vertical: 10,
            placeholder_padding_horizontal: 0
        %}
    </a>

    <ul class="header-menu-linklist">
        {%- assign menu = linklists[section.settings.menu] -%}
        {%- if menu != blank and menu.links.size > 0 -%}
            {%- assign menu_limit = section.settings.menu_limit -%}
            {%- if menu_limit == blank or menu_limit == 0 -%}
                {%- assign menu_limit = menu.links.size -%}
            {%- endif -%}
            
            {% comment %} Prepare for "more" menu entry. {% endcomment %}
            {%- capture menu_entries -%}
                {%- for link in menu.links -%}
                    {%- if forloop.index > menu_limit -%}
                        {% render 'header-menu-link'
                            link: link,
                            sectionSettings: section.settings,
                            blockSettings: block.settings,
                            is_for_shrinked_sub_menu: true
                        %}
                    {%- endif -%}
                {%- endfor -%}
            {%- endcapture -%}

            {% comment %} Loop over menu entries. {% endcomment %}
            {%- for link in menu.links -%}
                {%- if forloop.index < menu_limit -%}
                    {% render 'header-menu-link'
                        link: link,
                        sectionSettings: section.settings,
                        blockSettings: block.settings
                    %}
                {%- elsif forloop.index == menu_limit -%}
                    {% render 'header-menu-link'
                        link: link,
                        sectionSettings: section.settings,
                        blockSettings: block.settings
                    %}

                    {%- assign more_text = 'sections.header-menu.more_text' | t -%}

                    {%- if menu_limit < menu.links.size -%}
                        {% render 'header-menu-link'
                            link: link,
                            title: more_text,
                            sectionSettings: section.settings,
                            blockSettings: block.settings,
                            sub_menu: menu_entries
                        %}
                    {%- endif -%}
                    {%- break -%}
                {%- endif -%}
            {%- endfor -%}
        {%- endif -%}
    </ul>

    <div class="header-menu-links">
        {%- if section.settings.show_search -%}
            <div class="header-menu-search-popup no-click-highlight {% unless section.settings.show_search_on_mobile %} header-menu-search-popup-only-desktop{% endunless %}">
                {% render 'icon-search' %}
            </div>
        {%- endif -%}

        {%- if section.settings.show_account_icon -%}
            <a href="{% if customer %}/account{% else %}/account/login{% endif %}" class="header-menu-account no-click-highlight {% unless section.settings.show_account_icon_on_mobile %} header-menu-account-only-desktop{% endunless %}">
                {% render 'icon-user' %}
            </a>
        {%- endif -%}

        {%- capture drawer_style -%}
            {%- if section.settings.background_color != blank -%}
                {%- assign alpha = section.settings.background_color | color_extract: 'alpha' -%}
        
                {%- if alpha == 1 -%}
                    --header-menu-cart-drawer-text-color: {{ section.settings.background_color | color_to_hex }};
                {%- endif -%}
            {%- endif -%}

            {%- if section.settings.cart_items_color != blank -%}
                {%- assign alpha = section.settings.cart_items_color | color_extract: 'alpha' -%}
        
                {%- if alpha == 1 -%}
                    --header-menu-cart-drawer-background-color: {{ section.settings.cart_items_color | color_to_hex }};
                {%- endif -%}
            {%- endif -%}
        {%- endcapture -%}

        <div class="header-menu-cart-drawer no-click-highlight {% if section.settings.animate_cart_item_count %} header-menu-cart-drawer-animated {% endif %}" style="{{ drawer_style }}">
            {% render 'icon-cart' %}
            <span id="header-cart-drawer-item-count" class="{% if cart.item_count == 0 %}hide{% endif %}">{{ cart.item_count }}</span>
        </div>
    </div>
</div>
</div>

{% comment %} ===== Section Help Video ===== {% endcomment %}
{%- if request.design_mode -%}
    <div 
        class="section-help-video-identifier" 
        data-title="{{ 'conrise.sectionHelpTitles.header-menu' | t }}", 
        data-video="38d3b3dabdd1496bb609d73dffd272ef?sid=76dbcf9a-a44d-40a2-a93b-99fb771b57f7"
        data-padding-bottom="55.987558320373246%"
    ></div>
{%- endif -%}
{% comment %} ===== Section Help Video ===== {% endcomment %}

{% schema %}
{
    "name": "t:sections.header-menu.name",
    "settings": [
        {
            "type": "header",
            "content": "t:settings.general.section_help_video",
            "info": "[Video](https://www.loom.com/share/38d3b3dabdd1496bb609d73dffd272ef?sid=76dbcf9a-a44d-40a2-a93b-99fb771b57f7)"
        },
        {
            "type": "image_picker",
            "id": "logo",
            "label": "t:sections.header-menu.settings.logo"
        },
        {
            "type": "link_list",
            "id": "menu",
            "label": "t:sections.header-menu.settings.menu",
            "info": "t:sections.header-menu.settings.menu_info",
            "default": "main-menu"
        },
        {
            "type": "number",
            "id": "menu_limit",
            "label": "t:sections.header-menu.settings.menu_limit",
            "info": "t:sections.header-menu.settings.menu_limit_info",
            "default": 3
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "color",
            "id": "icon_color",
            "label": "t:sections.header-menu.settings.icon_color",
            "default": "#000000"
        },
        {
            "type": "range",
            "id": "logo_height",
            "label": "t:sections.header-menu.settings.logo_height",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 33
        },
        {
            "type": "range",
            "id": "logo_height_desktop",
            "label": "t:sections.header-menu.settings.logo_height_desktop",
            "min": 0,
            "max": 100,
            "step": 1,
            "unit": "px",
            "default": 33
        },
        {
            "type": "range",
            "id": "logo_margin_bottom",
            "label": "t:sections.header-menu.settings.logo_margin_bottom",
            "min": -10,
            "max": 10,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "checkbox",
            "id": "show_box_shadow",
            "default": false,
            "label": "t:sections.header-menu.settings.show_box_shadow"
        },
        {
            "type": "checkbox",
            "id": "show_border",
            "default": true,
            "label": "t:sections.header-menu.settings.show_border"
        },
        {
            "type": "checkbox",
            "id": "fixed_menu",
            "default": false,
            "label": "t:sections.header-menu.settings.fixed_menu"
        },
        {
            "type": "checkbox",
            "id": "animate_cart_item_count",
            "default": true,
            "label": "t:sections.header-menu.settings.animate_cart_item_count"
        },
        {
            "type": "checkbox",
            "id": "mobile_view_on_desktop",
            "default": false,
            "label": "t:sections.header-menu.settings.mobile_view_on_desktop"
        },
        {
            "type": "header",
            "content": "t:sections.header-menu.settings.account"
        },
        {
            "type": "checkbox",
            "id": "show_account_icon",
            "default": false,
            "label": "t:sections.header-menu.settings.show_account_icon"
        },
        {
            "type": "checkbox",
            "id": "show_account_icon_on_mobile",
            "default": false,
            "label": "t:sections.header-menu.settings.show_account_icon_on_mobile"
        },        
        {
            "type": "header",
            "content": "t:sections.header-menu.settings.search"
        },
        {
            "type": "checkbox",
            "id": "show_search",
            "default": true,
            "label": "t:sections.header-menu.settings.show_search"
        },
        {
            "type": "checkbox",
            "id": "show_search_on_mobile",
            "default": true,
            "label": "t:sections.header-menu.settings.show_search_on_mobile"
        },
        {
            "type": "header",
            "content": "t:sections.general.padding"
        },
        {
            "type": "range",
            "id": "padding_top",
            "label": "t:sections.header-menu.settings.padding_top",
            "min": 0,
            "max": 40,
            "step": 1,
            "unit": "px",
            "default": 12
        },
        {
            "type": "range",
            "id": "padding_bottom",
            "label": "t:sections.header-menu.settings.padding_bottom",
            "min": 0,
            "max": 40,
            "step": 1,
            "unit": "px",
            "default": 12
        },
        {
            "type": "header",
            "content": "t:sections.general.theme-settings.content",
            "info": "t:sections.general.theme-settings.info"
        },
        {
            "type": "color",
            "id": "background_color",
            "label": "t:sections.header-menu.settings.background_color",
            "info": "t:sections.header-menu.settings.background_color_info"
        },
        {
            "type": "color",
            "id": "cart_items_color",
            "label": "t:sections.header-menu.settings.cart_items_color",
            "info": "t:sections.header-menu.settings.cart_items_color_info"
        },
        {
            "type": "color",
            "id": "overwrite_theme_text_color",
            "label": "t:sections.header-menu.settings.overwrite_theme_text_color",
            "info": "t:sections.header-menu.settings.overwrite_theme_text_color_info"
        },
        {
            "type": "range",
            "id": "overwrite_theme_font_size",
            "label": "t:sections.header-menu.settings.overwrite_theme_font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.header-menu.settings.overwrite_theme_font_size_info"
        }
    ]
}
{% endschema %}