{% comment %}
  Renders a header drawer menu for mobile and desktop.

  Usage:
  {% render 'header-drawer' %}
{% endcomment %}

<header-drawer data-breakpoint="{% if section.settings.menu_type_desktop == 'drawer' %}desktop{% else %}tablet{% endif %}">
  <details id="Details-menu-drawer-container" class="menu-drawer-container">
    <summary
      class="header__icon header__icon--menu header__icon--summary link focus-inset"
      aria-label="{{ 'sections.header.menu' | t }}"
    >
      <span>
        {% render 'icon-hamburger' %}
        {% render 'icon-close' %}
      </span>
    </summary>
    <div id="menu-drawer" class="gradient menu-drawer motion-reduce color-{{ section.settings.menu_color_scheme }}">
      <div class="menu-drawer__inner-container">
        <div class="menu-drawer__navigation-container">
          <nav class="menu-drawer__navigation">
            <ul class="menu-drawer__menu has-submenu list-menu" role="list">
              {%- for link in section.settings.menu.links -%}
                <li>
                  {%- if link.links != blank -%}
                    <details id="Details-menu-drawer-menu-item-{{ forloop.index }}">
                      <summary
                        id="HeaderDrawer-{{ link.handle }}"
                        class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
                      >
                        {{ link.title | escape }}
                        {% render 'icon-arrow' %}
                        {% render 'icon-caret' %}
                      </summary>
                      <div
                        id="link-{{ link.handle | escape }}"
                        class="menu-drawer__submenu has-submenu gradient motion-reduce"
                        tabindex="-1"
                      >
                        <div class="menu-drawer__inner-submenu">
                          <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
                            {% render 'icon-arrow' %}
                            {{ link.title | escape }}
                          </button>
                          <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
                            {%- for childlink in link.links -%}
                              <li>
                                {%- if childlink.links == blank -%}
                                  <a
                                    id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
                                    href="{{ childlink.url }}"
                                    class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
                                    {% if childlink.current %}
                                      aria-current="page"
                                    {% endif %}
                                  >
                                    {{ childlink.title | escape }}
                                  </a>
                                {%- else -%}
                                  <details id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">
                                    <summary
                                      id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
                                      class="menu-drawer__menu-item link link--text list-menu__item focus-inset"
                                    >
                                      {{ childlink.title | escape }}
                                      {% render 'icon-arrow' %}
                                      {% render 'icon-caret' %}
                                    </summary>
                                    <div
                                      id="childlink-{{ childlink.handle | escape }}"
                                      class="menu-drawer__submenu has-submenu gradient motion-reduce"
                                    >
                                      <button
                                        class="menu-drawer__close-button link link--text focus-inset"
                                        aria-expanded="true"
                                      >
                                        {% render 'icon-arrow' %}
                                        {{ childlink.title | escape }}
                                      </button>
                                      <ul
                                        class="menu-drawer__menu list-menu"
                                        role="list"
                                        tabindex="-1"
                                      >
                                        {%- for grandchildlink in childlink.links -%}
                                          <li>
                                            <a
                                              id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                              href="{{ grandchildlink.url }}"
                                              class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"
                                              {% if grandchildlink.current %}
                                                aria-current="page"
                                              {% endif %}
                                            >
                                              {{ grandchildlink.title | escape }}
                                            </a>
                                          </li>
                                        {%- endfor -%}
                                      </ul>
                                    </div>
                                  </details>
                                {%- endif -%}
                              </li>
                            {%- endfor -%}
                          </ul>
                        </div>
                      </div>
                    </details>
                  {%- else -%}
                    <a
                      id="HeaderDrawer-{{ link.handle }}"
                      href="{{ link.url }}"
                      class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
                      {% if link.current %}
                        aria-current="page"
                      {% endif %}
                    >
                      {{ link.title | escape }}
                    </a>
                  {%- endif -%}
                </li>
              {%- endfor -%}
            </ul>
          </nav>
          <div class="menu-drawer__utility-links">
            {%- if shop.customer_accounts_enabled -%}
              <a
                href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
                class="menu-drawer__account link focus-inset h5 medium-hide large-up-hide"
              >
                {% render 'icon-account' %}
                {%- liquid
                  if customer
                    echo 'customer.account_fallback' | t
                  else
                    echo 'customer.log_in' | t
                  endif
                -%}
              </a>
            {%- endif -%}
            {%- if localization.available_countries or localization.available_languages -%}
              <div class="menu-drawer__localization header-localization">
                {%- if localization.available_countries and localization.available_countries.size > 1 -%}
                  <noscript>
                    {%- form 'localization', id: 'HeaderCountryMobileFormNoScriptDrawer', class: 'localization-form' -%}
                      <div class="localization-form__select">
                        <h2 class="visually-hidden" id="HeaderCountryMobileLabelNoScriptDrawer">
                          {{ 'localization.country_label' | t }}
                        </h2>
                        <select
                          class="localization-selector link"
                          name="country_code"
                          aria-labelledby="HeaderCountryMobileLabelNoScriptDrawer"
                        >
                          {%- for country in localization.available_countries -%}
                            <option
                              value="{{ country.iso_code }}"
                              {%- if country.iso_code == localization.country.iso_code %}
                                selected
                              {% endif %}
                            >
                              {{ country.name }} ({{ country.currency.iso_code }}
                              {{ country.currency.symbol }})
                            </option>
                          {%- endfor -%}
                        </select>
                        {% render 'icon-caret' %}
                      </div>
                      <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
                    {%- endform -%}
                  </noscript>

                  <localization-form class="no-js-hidden">
                    {%- form 'localization', id: 'HeaderCountryMobileForm', class: 'localization-form' -%}
                      <div>
                        <h2 class="visually-hidden" id="HeaderCountryMobileLabel">
                          {{ 'localization.country_label' | t }}
                        </h2>
                        {%- render 'country-localization', localPosition: 'HeaderCountryMobile' -%}
                      </div>
                    {%- endform -%}
                  </localization-form>
                {% endif %}

                {%- if localization.available_languages and localization.available_languages.size > 1 -%}
                  <noscript>
                    {%- form 'localization',
                      id: 'HeaderLanguageMobileFormNoScriptDrawer',
                      class: 'localization-form'
                    -%}
                      <div class="localization-form__select">
                        <h2 class="visually-hidden" id="HeaderLanguageMobileLabelNoScriptDrawer">
                          {{ 'localization.language_label' | t }}
                        </h2>
                        <select
                          class="localization-selector link"
                          name="locale_code"
                          aria-labelledby="HeaderLanguageMobileLabelNoScriptDrawer"
                        >
                          {%- for language in localization.available_languages -%}
                            <option
                              value="{{ language.iso_code }}"
                              lang="{{ language.iso_code }}"
                              {%- if language.iso_code == localization.language.iso_code %}
                                selected
                              {% endif %}
                            >
                              {{ language.endonym_name | capitalize }}
                            </option>
                          {%- endfor -%}
                        </select>
                        {% render 'icon-caret' %}
                      </div>
                      <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
                    {%- endform -%}
                  </noscript>

                  <localization-form class="no-js-hidden">
                    {%- form 'localization', id: 'HeaderLanguageMobileForm', class: 'localization-form' -%}
                      <div>
                        <h2 class="visually-hidden" id="HeaderLanguageMobileLabel">
                          {{ 'localization.language_label' | t }}
                        </h2>
                        {%- render 'language-localization', localPosition: 'HeaderLanguageMobile' -%}
                      </div>
                    {%- endform -%}
                  </localization-form>
                {%- endif -%}
              </div>
            {%- endif -%}
            <ul class="list list-social list-unstyled" role="list">
              {%- if settings.social_twitter_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_twitter_link }}" class="list-social__link link">
                    {%- render 'icon-twitter' -%}
                    <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_facebook_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_facebook_link }}" class="list-social__link link">
                    {%- render 'icon-facebook' -%}
                    <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_pinterest_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_pinterest_link }}" class="list-social__link link">
                    {%- render 'icon-pinterest' -%}
                    <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_instagram_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_instagram_link }}" class="list-social__link link">
                    {%- render 'icon-instagram' -%}
                    <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_tiktok_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_tiktok_link }}" class="list-social__link link">
                    {%- render 'icon-tiktok' -%}
                    <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_tumblr_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_tumblr_link }}" class="list-social__link link">
                    {%- render 'icon-tumblr' -%}
                    <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_snapchat_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_snapchat_link }}" class="list-social__link link">
                    {%- render 'icon-snapchat' -%}
                    <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_youtube_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_youtube_link }}" class="list-social__link link">
                    {%- render 'icon-youtube' -%}
                    <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_vimeo_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_vimeo_link }}" class="list-social__link link">
                    {%- render 'icon-vimeo' -%}
                    <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </details>
</header-drawer>