<!doctype html>
{% assign locale_rtl = 'ar,fa,he,ks,ps,sd,ur,' %}
{% assign current_locale = localization.language.iso_code | append: ',' %}
<html
  {% if locale_rtl contains current_locale %}
    dir='rtl'
  {% else %}
    dir='ltr'
  {% endif %}
  class='no-js'
  lang='{{ request.locale.iso_code }}'
>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>
    <meta name='theme-color' content=''>
    <link rel='canonical' href='{{ canonical_url }}'>
    {% render 'preconnect' %}

    {% render 'xotiny-theme' %}

    {%- if settings.favicon != blank -%}
      <link
        rel='icon'
        type='image/png'
        href='{{ settings.favicon | image_url: width: 32, height: 32 }}'
      >
    {%- endif -%}

    {% render 'page-title' %}

    {% if page_description %}
      <meta name='description' content='{{ page_description | escape }}'>
    {% endif %}

    {% render 'meta-tags' %}

    {{ content_for_header }}
    {% render 'settings-adapter' %}

    {{ 'xo-webcomponents.css' | asset_url | stylesheet_tag }}
    {{ 'style.css' | asset_url | stylesheet_tag }}

    {% render 'google-fonts-link' %}

    {% if settings.font_body_selection == 'shopify_fonts' %}
      <link
        rel='preload'
        as='font'
        href='{{ settings.type_body_font | font_url }}'
        type='font/woff2'
        crossorigin
      >
    {% endif %}

    {% if settings.font_heading_selection == 'shopify_fonts' %}
      <link
        rel='preload'
        as='font'
        href='{{ settings.type_header_font | font_url }}'
        type='font/woff2'
        crossorigin
      >
    {% endif %}

    <script>
      document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
      if (Shopify.designMode) {
        document.documentElement.classList.add('shopify-design-mode');
      }
    </script>

    <script src='{{ 'xo-webcomponents.js' | asset_url }}' defer></script>
    <script src='{{ 'main.js' | asset_url }}' defer></script>
  </head>

  <body class='gradient'>
    <div id='xo-root'>
      {% liquid
        assign button_text = 'accessibility.skip_to_text' | t
        render 'button', link: '#xo-main-content', class: 'xo-skip-to-content xo-visually-hidden', text: button_text
      %}

      {%- if template contains 'index' or template contains 'home' -%}
        {%- if settings.header_style == 'default' -%}
          {%- assign header = 'header-v1' %}
        {%- endif -%}
      {%- endif -%}

      {%- if template contains 'home-2' -%}
        {%- if settings.header_style == 'default' -%}
          {%- assign header = 'header-v2' %}
        {%- endif -%}
      {%- endif -%}

      {%- if template contains 'home-3' -%}
        {%- if settings.header_style == 'default' -%}
          {%- assign header = 'header-v3' %}
        {%- endif -%}
      {%- endif -%}

      {%- if template contains 'home-4' -%}
        {%- if settings.header_style == 'default' -%}
          {%- assign header = 'header-v4' %}
        {%- endif -%}
      {%- endif -%}

      {%- if template contains 'home-5' -%}
        {%- if settings.header_style == 'default' -%}
          {%- assign header = 'header-v5' %}
        {%- endif -%}
      {%- endif -%}

      {%- if settings.header_style != 'default' -%}
        {%- assign header = settings.header_style %}
      {%- endif -%}

      {% case header %}
        {% when 'header-v1' %}
          {% sections 'header-group' %}
        {% when 'header-v2' %}
          {% sections 'header2-group' %}
        {% when 'header-v3' %}
          {% sections 'header3-group' %}
        {% when 'header-v4' %}
          {% sections 'header4-group' %}
        {% when 'header-v5' %}
          {% sections 'header5-group' %}
        {%- else -%}
          {% sections 'header-group' %}
      {% endcase %}

      <main
        id='xo-main-content'
        class='content-for-layout focus-none'
        role='main'
        tabindex='-1'
      >
        {{ content_for_layout }}
      </main>

      {%- if template contains 'index' or template contains 'home' -%}
        {%- if settings.footer_style == 'default' -%}
          {%- assign footer = 'footer-v1' %}
        {%- endif -%}
      {%- endif -%}

      {%- if template contains 'home-2' -%}
        {%- if settings.footer_style == 'default' -%}
          {%- assign footer = 'footer-v2' %}
        {%- endif -%}
      {%- endif -%}

      {%- if template contains 'home-3' -%}
        {%- if settings.footer_style == 'default' -%}
          {%- assign footer = 'footer-v3' %}
        {%- endif -%}
      {%- endif -%}

      {%- if template contains 'home-4' -%}
        {%- if settings.footer_style == 'default' -%}
          {%- assign footer = 'footer-v4' %}
        {%- endif -%}
      {%- endif -%}

      {%- if template contains 'home-5' -%}
        {%- if settings.footer_style == 'default' -%}
          {%- assign footer = 'footer-v5' %}
        {%- endif -%}
      {%- endif -%}

      {%- if settings.footer_style != 'default' -%}
        {%- assign footer = settings.footer_style %}
      {%- endif -%}

      {% case footer %}
        {% when 'footer-v1' %}
          {% sections 'footer-group' %}
        {% when 'footer-v2' %}
          {% sections 'footer2-group' %}
        {% when 'footer-v3' %}
          {% sections 'footer3-group' %}
        {% when 'footer-v4' %}
          {% sections 'footer4-group' %}
        {% when 'footer-v5' %}
          {% sections 'footer5-group' %}
        {%- else -%}
          {% sections 'footer-group' %}
      {% endcase %}

      {% sections 'overlay-group' %}

      <ul hidden>
        <li id='a11y-refresh-page-message'>{{ 'accessibility.refresh_page' | t }}</li>
        <li id='a11y-new-window-message'>{{ 'accessibility.link_messages.new_window' | t }}</li>
      </ul>

      {% render 'scroll-top' %}
    </div>

    <script>
      window.shopUrl = '{{ request.origin }}';
      window.routes = {
        cart_add_url: '{{ routes.cart_add_url }}',
        cart_change_url: '{{ routes.cart_change_url }}',
        cart_update_url: '{{ routes.cart_update_url }}',
        cart_url: '{{ routes.cart_url }}',
        predictive_search_url: '{{ routes.predictive_search_url }}',
      };

      window.cartStrings = {
        error: `{{ 'sections.cart.cart_error' | t }}`,
        quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}`,
      };

      window.variantStrings = {
        addToCart: `{{ 'products.product.add_to_cart' | t }}`,
        soldOut: `{{ 'products.product.sold_out' | t }}`,
        unavailable: `{{ 'products.product.unavailable' | t }}`,
      };

      window.accessibilityStrings = {
        imageAvailable: `{{ 'products.product.media.image_available' | t: index: '[index]' }}`,
        shareSuccess: `{{ 'general.share.success_message' | t }}`,
        pauseSlideshow: `{{ 'sections.slideshow.pause_slideshow' | t }}`,
        playSlideshow: `{{ 'sections.slideshow.play_slideshow' | t }}`,
      };
    </script>
  </body>
</html>
