{% comment %}
  Renders a hamburger menu

  Accepts:
  - menu: {Object} Menu object

  Usage:
  {% render 'menu-hamburger-style1', menu: section.settings.menu, hamburger_type: section.settings.hamburger_type, menu_type: section.settings.menu_type %}
{% endcomment %}
{% liquid
  unless hamburger_type
    assign hamburger_type = 'default'
  endunless
%}
{% liquid
  unless menu_type
    assign menu_type = 'default'
  endunless
%}
{% capture back_button %}
  <div class='menu-hamburger-style1-top'>
    <xo-modal-trigger class='xo-menu-hamburger-style1__link {%if hamburger_type == 'default' %}xo-menu-hamburger-style1__link--color {%else %}xo-menu-hamburger-style1__link--ab {%endif %}' style='{%if hamburger_type != 'default' %} border-bottom: unset{%endif %}'>
      <span class='xo-menu-hamburger-style1__back {%if hamburger_type =='default' %} xo-menu-hamburger-style1__back--flex {%endif %}'>
        <span class='xo-menu-hamburger-style1__arrow '>
          {% if hamburger_type == 'default' %}
            <div class='xo-menu-hamburger-style1__tablist'>
              {% render 'icon', name: 'hamburger1', icon_size: '2.3rem', color: "#fff" %}            
              <span class='xo-menu-hamburger-style1__tablist-item'>Menu</span>
            </div>
            {% else %}        
            {% render 'icon', name: 'close2', icon_size: '15', color: "#fff" %}
          {% endif %}        
        </span>
      </span>
    </xo-modal-trigger>
    <div class='menu-hamburger-style1-top__account'>
      <a href='{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}' class='menu-hamburger-style1-top__icon'>
        {% if customer %}
          {% render 'icon', name: 'account1', icon_size: '24' %}
        {% else %}
          {% render 'icon', name: 'account1', icon_size: '24', color: 'rbg(var(--color-foreground))' %}
        {% endif %}
      </a>
    </div>
  </div>
  {% endcapture %}

{% if menu != blank %}
  <div class='xo-menu-hamburger-style1'>
    <xo-modal-trigger class='xo-menu-hamburger-style1__trigger' xo-name='xo-menu-hamburger-style1-1'>
      <div class='icon-hamburger-menu'></div>
    </xo-modal-trigger>

    <xo-modal
      class='xo-menu-hamburger-style1__modal'
      xo-portal
      xo-name='xo-menu-hamburger-style1-1'
      xo-animate='{%- if hamburger_type == 'horizontal' -%} fade-up {%- elsif hamburger_type == 'drawer' -%} fade-up {%- else -%}slide-right {%- endif -%}'
      xo-duration='300'
      xo-placement='top-left'
    >
      {% if hamburger_type == 'horizontal' %}
        <div class='xo-menu-hamburger-style1__content-horizontal'>
          {{ back_button }}
          {% for link in menu.links %}
            {% if link.links == blank %}
              {% if link.title contains '(' %}
              {% else %}
                <a
                  class='xo-menu-hamburger-style1__link-horizontal{% if link.current %} xo-menu-hamburger-style1__item--current{% endif %}'
                  href='{{ link.url }}'
                  {% if link.current %}
                    aria-current='page'
                  {% endif %}
                >
                  <span class='xo-menu-hamburger-style1__label-horizontal'>
                    {{ link.title }}
                  </span>
                </a>
              {% endif %}
            {% else %}
              <a
                class='xo-menu-hamburger-style1__link-horizontal{% if link.current %} xo-menu-hamburger-style1__item--current{% endif %}'
                href='{{ link.url }}'
                {% if link.current %}
                  aria-current='page'
                {% endif %}
              >
                <span class='xo-menu-hamburger-style1__label-horizontal'>
                  {{ link.title }}
                </span>
              </a>
            {% endif %}
          {% endfor %}
        </div>
      {% elsif hamburger_type == 'drawer' %}
        <div class='xo-menu-hamburger-style1__content-vertical'>
          {{ back_button }}
          {% for link in menu.links %}
            {% if link.links == blank %}
              {% if link.title contains '(' %}
              {% else %}
                <a
                  class='xo-menu-hamburger-style1__link-horizontal{% if link.current %} xo-menu-hamburger-style1__item--current{% endif %}'
                  href='{{ link.url }}'
                  {% if link.current %}
                    aria-current='page'
                  {% endif %}
                >
                  <span class='xo-menu-hamburger-style1__label-horizontal'>
                    {{ link.title }}
                  </span>
                </a>
              {% endif %}

            {% else %}
              <a
                class='xo-menu-hamburger-style1__link-horizontal{% if link.current %} xo-menu-hamburger-style1__item--current{% endif %}'
                href='{{ link.url }}'
                {% if link.current %}
                  aria-current='page'
                {% endif %}
              >
                <span class='xo-menu-hamburger-style1__label-horizontal'>
                  {{ link.title }}
                </span>
              </a>
            {% endif %}
          {% endfor %}
        </div>
      {% elsif hamburger_type == 'default' %}
        <div class='xo-menu-hamburger-style1__content'>
          {{ back_button }}
          {% for link in menu.links %}
            {% if link.links == blank %}
              {% if link.title contains '(' %}
              {% else %}
                <a
                  class='xo-menu-hamburger-style1__link{% if link.current %} xo-menu-hamburger-style1__item--current{% endif %}'
                  href='{{ link.url }}'
                  {% if link.current %}
                    aria-current='page'
                  {% endif %}
                >
                  <span class='xo-menu-hamburger-style1__label'>
                    {{ link.title }}
                  </span>
                  <span class='xo-menu-hamburger-style1__arrow xo-menu-hamburger-style1__arrow--mega-menu'>
                    {% render 'icon', name: 'chevron-right', size: '1.6rem' %}
                  </span>
                </a>
                <xo-modal
                  xo-portal
                  class='xo-menu-hamburger-style1__modal'
                  xo-name='xo-mega-menu-{{ forloop.index0 }}'
                  xo-animate='slide-right'
                  xo-duration='300'
                  xo-placement='top-left'
                  xo-backdrop-color='transparent'
                >
                  <div class='xo-menu-hamburger-style1__content'>
                    {{ back_button }}
                    <xo-mega-menu class='xo-menu-hamburger-style1__mega-menu' xo-name='header-mega-menu-v1' xo-index='{{ forloop.index0 }}'></xo-mega-menu>
                  </div>
                </xo-modal>
              {% endif %}
            {% else %}
              <xo-modal-trigger xo-name='xo-menu-hamburger-style1-link-{{ forloop.index0 }}' class='xo-menu-hamburger-style1__link'>
                <span class='xo-menu-hamburger-style1__label'>
                  {{ link.title }}
                </span>
                {% if link.links != blank %}
                  <span class='xo-menu-hamburger-style1__arrow xo-menu-hamburger-style1__arrow--mega-menu'>
                    {% render 'icon', name: 'chevron-right', size: '1.6rem' %}
                  </span>
                {% endif %}
              </xo-modal-trigger>
              <xo-modal
                xo-portal
                class='xo-menu-hamburger-style1__modal'
                xo-name='xo-menu-hamburger-style1-link-{{ forloop.index0 }}'
                xo-animate='slide-right'
                xo-duration='300'
                xo-placement='top-left'
                xo-backdrop-color='transparent'
              >
                <div class='xo-menu-hamburger-style1__content'>
                  {{ back_button }}
                  <xo-mega-menu class='xo-menu-hamburger-style1__mega-menu' xo-name='header-mega-menu-v1' xo-index='{{ forloop.index0 }}'></xo-mega-menu>
                  {% for childlink in link.links %}
                    {% if childlink.links == blank %}
                      <a
                        class='xo-menu-hamburger-style1__link{% if childlink.current %} xo-menu-hamburger-style1__item--current{% endif %}'
                        href='{{ childlink.url }}'
                        {% if childlink.current %}
                          aria-current='page'
                        {% endif %}
                      >
                        <span class='xo-menu-hamburger-style1__label'>
                          {{ childlink.title }}
                        </span>
                      </a>
                    {% else %}
                      <xo-modal-trigger xo-name='xo-menu-hamburger-style1-child-{{ forloop.index0 }}' class='xo-menu-hamburger-style1__link' xo-index='{{ forloop.index0 }}'>
                        <span class='xo-menu-hamburger-style1__label'>
                          {{ childlink.title }}
                        </span>
                        <span class='xo-menu-hamburger-style1__arrow xo-menu-hamburger-style1__arrow--mega-menu'>
                          {% render 'icon', name: 'chevron-right', size: '1.6rem' %}
                        </span>
                      </xo-modal-trigger>
                      <xo-modal
                        xo-portal
                        class='xo-menu-hamburger-style1__modal'
                        xo-name='xo-menu-hamburger-style1-child-{{ forloop.index0 }}'
                        xo-animate='slide-right'
                        xo-duration='300'
                        xo-placement='top-left'
                        xo-backdrop-color='transparent'
                      >
                        <div class='xo-menu-hamburger-style1__content'>
                          {{ back_button }}
                          {% for grandchildlink in childlink.links %}
                            <a
                              class='xo-menu-hamburger-style1__link{% if grandchildlink.current %} xo-menu-hamburger-style1__item--current{% endif %}'
                              href='{{ grandchildlink.url }}'
                              {% if grandchildlink.current %}
                                aria-current='page'
                              {% endif %}
                            >
                              <span class='xo-menu-hamburger-style1__label'>
                                {{ grandchildlink.title }}
                              </span>
                            </a>
                          {% endfor %}
                        </div>
                      </xo-modal>
                    {% endif %}
                  {% endfor %}
                </div>
              </xo-modal>
            {% endif %}
          {% endfor %}
        </div>
      {% endif %}
    </xo-modal>
  </div>
{% endif %}
