{% comment %}
  Renders a horizontal-v1 menu

  Accepts:
  - menu: {Object} Menu object
  - event_type: {'hover' | 'click'} Event type to trigger the menu. Default: 'hover' (optional)

  ***** Go together ********************************
  - image: For menu has a logo at middle
  - logo_width: Set width for image
  **************************************************

  - menu_label-capitalize: {Boolean} Style for the menu label is capitalize. Default: false (optional) // default header label style: 'uppercase'
  - menu_style-border: {Boolean} Style for the menu style is border. Default: false (optional)
  - menu_style-arrow: {Boolean} Style for the menu style is arrow. Default: false (optional)
  - font_size: font-size link label default 13px
  - font_size_child : font-size sub-menu default: 15px
  Usage:
  {% render 'menu-horizontal-v1',
     menu: section.settings.menu,
     event_type: section.settings.event_type,
     image: section.settings.logo ,
     logo_width: section.settings.logo_width
     menu_label-capitalize: true,
     menu_style-border: true,
     menu_style-arrow: true,
     font_size: 13,
     font_size_child: 15,
     color_text: section.settings.color_text,
     background_menu: section.settings.background_menu,
  %}
{% endcomment %}

{% liquid
  unless event_type
    assign event_type = 'hover'
  endunless
%}

{%- assign font_size = font_size | default: 13 -%}
{%- assign font_size_child = font_size_child | default: 15 -%}
{%- assign color_text = color_text | default: 'rgb(0, 0, 0)' -%}
{%- assign background_menu = background_menu | default: '#fff' -%}

{% if menu != blank %}
  <ul class='xo-menu-horizontal-v1 list-unstyled{% if event_type == 'hover' %} xo-menu-horizontal-v1--hover{% else %} xo-menu-horizontal-v1--click{% endif %}'>
    {% for link in menu.links %}
      <li class='xo-menu-horizontal-v1__item{% if event_type == 'hover' %} xo-menu-horizontal-v1__item--hover{% else %} xo-menu-horizontal-v1__item--click{% endif %}{% if link.current %} xo-menu-horizontal-v1__item--current{% endif %}'>
        <xo-mega-menu class='xo-menu-horizontal-v1__mega-menu' xo-name='header-mega-menu-v1' xo-index='{{ forloop.index0 }}'></xo-mega-menu>
        {% if link.title contains '[' %}
          <a
            class='
              xo-menu-horizontal-v1__link {% if menu_style-border %}
                xo-menu-horizontal-v1__border
              {%- endif -%}
            '
            href='{{ link.url }}'
            title='{{link.title | split: '[' | first }}'
            {% if link.current %}
              aria-current='page'
            {% endif %}
            style='
              text-transform: uppercase; {%- if menu_label-capitalize -%}
                text-transform: capitalize
              {%- endif -%}
            '
          >
            {{- link.title | split: '[' | first }}
            <span
              class='xo-menu-horizontal-v1__label-filter xo-menu-horizontal-v1__label--{{link.title | handleize}}-{{forloop.index}}'
              {% if link.title contains '(' %}
                style='background-color: {{link.title | split: '(' | last  | split: ')' | first}}; --border-label:{{link.title | split: '(' | last  | split: ')' | first}};'
              {% endif %}
            >
              <span>{{ link.title | split: '[' | last | split: ']' | first }}</span>
            </span>
            <style>
              .label_menu-{{link.title | handleize}}-{{forloop.index}}:before {
                border-top: 4px solid {{link.title | split: '(' | last  | split: ')' | first}};
              }
            </style>

            {% if link.links != blank %}
              <span
                class='
                  xo-menu-horizontal-v1__arrow
                  {% if menu_style-arrow != true %}
                    xo-menu-horizontal-v1__arrow--hide
                  {% endif %}
                '
              >
                {% render 'icon', name: 'chevron-down', icon_size: '1.2rem' %}
              </span>
            {% else %}
              <span
                class='
                  xo-menu-horizontal-v1__arrow xo-menu-horizontal-v1__arrow--mega-menu {% if menu_style-arrow != true %}
                    xo-menu-horizontal-v1__arrow--hide
                  {% endif %}
                '
              >
                {% render 'icon', name: 'chevron-down', icon_size: '1.2rem' %}
              </span>
            {% endif %}
          </a>
        {% else %}
          <a
            class='
              xo-menu-horizontal-v1__link {% if menu_style-border %}
                xo-menu-horizontal-v1__border
              {%- endif -%}
            '
            href='{{ link.url }}'
            {% if link.current %}
              aria-current='page'
            {% endif %}
          >
            {% if link.title contains '(' %}
              <div class='xo-menu-horizontal-v1__logo-image'>
                {% if image %}
                  {%- assign logo_alt = image.alt | default: shop.name | escape -%}
                  {%- assign logo_height = logo_width | divided_by: logo_width.aspect_ratio -%}
                  {{ image | image_url: width: logo_width | image_tag: widths: '50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250', height: logo_height, width: logo_width, alt: logo_alt }}
                {% endif %}
              </div>
            {% else %}
              <h3
                class='xo-menu-horizontal-v1__label'
                style='
                  {%- if menu_label-capitalize-%}
                    text-transform: capitalize
                  {%- endif -%}; font-size: {{ font_size }}px
                '
              >
                {{- link.title }}
              </h3>
              {% if link.links != blank %}
                <span
                  class='
                    xo-menu-horizontal-v1__arrow
                    {% if menu_style-arrow != true %}
                      xo-menu-horizontal-v1__arrow--hide
                    {% endif %}
                  '
                >
                  {% render 'icon', name: 'chevron-down', icon_size: '1.2rem' %}
                </span>
              {% else %}
                <span
                  class='
                    xo-menu-horizontal-v1__arrow xo-menu-horizontal-v1__arrow--mega-menu {% if menu_style-arrow != true %}
                      xo-menu-horizontal-v1__arrow--hide
                    {% endif %}
                  '
                >
                  {% render 'icon', name: 'chevron-down', icon_size: '1.2rem' %}
                </span>
              {% endif %}
            {% endif %}
          </a>
        {% endif %}
        {% if link.links != blank %}
          <ul class='xo-menu-horizontal-v1__sub-menu list-unstyled' style="background-color: {{ background_menu }}">
            {% for childlink in link.links %}
              <li class='xo-menu-horizontal-v1__item xo-menu-horizontal-v1__item--sub{% if event_type == 'hover' %} xo-menu-horizontal-v1__item--hover{% else %} xo-menu-horizontal-v1__item--click{% endif %}{% if childlink.current %} xo-menu-horizontal-v1__item--current{% endif %}'>
                <a
                  class='xo-menu-horizontal-v1__link xo-menu-horizontal-v1__link--sub'
                  href='{{ childlink.url }}'
                  {% if childlink.current %}
                    aria-current='page'
                  {% endif %}
                >
                  <span class='xo-menu-horizontal-v1__label' style='font-size: {{ font_size_child }}px; --color: {{ color_text }}; color: {{ color_text }}'>
                    {{ childlink.title }}
                  </span>
                  {% if childlink.links != blank %}
                    <span class='xo-menu-horizontal-v1__arrow' style= " --color: {{ color_text }}">
                      {% render 'icon', name: 'chevron-right', icon_size: '1.5rem' %}
                    </span>
                  {% endif %}
                </a>
                {% if childlink.links != blank %}
                  <ul class='xo-menu-horizontal-v1__sub-menu list-unstyled' style="background-color: {{ background_menu }}">
                    {% for grandchildlink in childlink.links %}
                      <li class='xo-menu-horizontal-v1__item xo-menu-horizontal-v1__item--sub{% if grandchildlink.current %} xo-menu-horizontal-v1__item--current{% endif %}'>
                        <a
                          class='xo-menu-horizontal-v1__link xo-menu-horizontal-v1__link--sub'
                          href='{{ grandchildlink.url }}'
                          {% if grandchildlink.current %}
                            aria-current='page'
                          {% endif %}
                        >
                          <span class='xo-menu-horizontal-v1__label' style='font-size: {{ font_size_child }}px;  --color: {{ color_text }}; color: {{ color_text }}'>
                            {{ grandchildlink.title }}
                          </span>
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                {% endif %}
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
{% endif %}
