<!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 full-height'
  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 }}'>
    <link rel='preconnect' href='https://cdn.shopify.com' crossorigin>
    {% render 'preconnect' %}
    {% render 'google-fonts-link' %}

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

    {%- unless settings.type_header_font.system? -%}
      <link rel='preconnect' href='https://fonts.shopifycdn.com' crossorigin>
    {%- endunless -%}

    <title>{{ shop.name }}</title>

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

    {% render 'meta-tags' %}

    {{ content_for_header }}

    {%- liquid
      assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
      assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
      assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
    %}

    {% render 'settings-adapter' %}

    {%- unless settings.type_body_font.system? -%}
      <link rel='preload' as='font' href='{{ settings.type_body_font | font_url }}' type='font/woff2' crossorigin>
    {%- endunless -%}
    {%- unless settings.type_header_font.system? -%}
      <link rel='preload' as='font' href='{{ settings.type_header_font | font_url }}' type='font/woff2' crossorigin>
    {%- endunless -%}

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

    <script>
      document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
    </script>

    <script src='{{ 'xo-webcomponents.min.js' | asset_url }}' defer></script>
    <script src='{{ 'main.js' | asset_url }}' defer='defer'></script>
    <script src='{{ 'details-modal.js' | asset_url }}' defer='defer'></script>
    <script src='{{ 'password-modal.js' | asset_url }}' defer='defer'></script>
    <script src='{{ 'xo-wc.js' | asset_url }}' defer></script>
  </head>

  <body class='password gradient'>
    {% comment %}
      <a class='skip-to-content-link button visually-hidden' href='#MainContent'>
        {{ 'accessibility.skip_to_text' | t }}
      </a>
    {% endcomment %}

    {% section 'main-password-header' %}

    <main id='MainContent' class='password-main'>
      {{ content_for_layout }}
    </main>
    <footer>
      {% section 'main-password-footer' %}
    </footer>
    <ul hidden>
      <li id='a11y-new-window-message'>{{ 'accessibility.link_messages.new_window' | t }}</li>
    </ul>
  </body>
</html>
