<!doctype html>
{%- liquid
  assign rtl_attr = ''
  if request.locale.iso_code == 'ar' or request.locale.iso_code == 'he'
    assign rtl_attr = ' dir="rtl"'
  endif
-%}
<html class="no-js" lang="{{ request.locale.iso_code }}" {{ rtl_attr }}>
  <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>

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

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

    {% render 'meta-tags' %}

    <script src="{{- 'swiper-bundle.min.js' | asset_url -}}" defer="defer"></script>
    <script src="{{- 'bodyScrollLock.min.js' | asset_url -}}" defer="defer"></script>
    <script src="{{- 'global.js' | asset_url -}}" defer="defer"></script>
    <noscript>
      <style>
        img[loading='lazy'] { opacity: 1; }
      </style>
    </noscript>
    <script src="{{- 'form-validate.js' | asset_url -}}" defer="defer"></script>

    {{ content_for_header }}

    {%- render 'settings' -%}

    {{- 'base.css' | asset_url | stylesheet_tag -}}
    {{- 'main-password.css' | asset_url | stylesheet_tag -}}
    {{- 'section-header-password.css' | asset_url | stylesheet_tag -}}
    {{- 'component-password-modal.css' | asset_url | stylesheet_tag -}}

    {{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}

    {% comment %}theme-check-disable AssetPreload{% endcomment %}
    {%- unless settings.type_heading_font.system? -%}
      <link rel="preload" as="font" href="{{ settings.type_heading_font | font_url }}" type="font/woff2" crossorigin>
    {%- endunless -%}
    {%- unless settings.type_body_font.system? -%}
      <link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
      {%- endunless -%}
    {% comment %}theme-check-enable AssetPreload{% endcomment %}

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

      if (Shopify.designMode) {
        document.documentElement.classList.add('shopify-design-mode');
      }
    </script>
  </head>

  <body class="template template--password template--{{ template.name }}{% if template.suffix %} template--{{- template.suffix -}}{% endif %} is-at-top">
    <a class="skip-to-content-link button visually-hidden" href="#MainContent">
      {{- 'theme.accessibility.skip_to_content' | t -}}
    </a>
    {%- section 'main-password-header' -%}
    <main class="content-for-layout focus-none"
      id="MainContent"
      role="main"
      tabindex="-1">
      {{ content_for_layout }}
    </main>

    <modal-dialog id="PasswordModal" class="password-modal">
      <div class="password-modal__dialog"
        role="dialog"
        aria-label="{{- 'password.heading' | t -}}"
        aria-modal="true"
      >
        <div class="password-modal__content" tabindex="-1">
          <div class="container max-w-narrow">
            <button id="ModalClose-PasswordModal" type="button" class="password-modal__close" aria-label="{{- 'theme.actions.close' | t -}}">{%- render 'icon', icon_name: 'theme-close', class: 'icon' -%}</button>
            <h4 class="password-modal__title">
              {{- 'password.heading' | t -}}
            </h4>
            <form-validate>
              {%- form 'storefront_password' -%}
                <div class="form-row">
                  {%- liquid
                    assign label = 'password.label' | t
                    assign placeholder = 'password.placeholder' | t
                    capture attr
                      echo 'autocomplete="current-password"'
                    endcapture
                    if form.errors
                      assign error = 'password.error' | t
                      assign has_error = true
                    endif
                    render 'text-input', id: 'storeFrontPassword', label: label, type: 'password', name: 'password', placeholder: placeholder, attr: attr, message: error, has_error: has_error, required: true
                  -%}
                </div>
                <div class="form-row">
                  {%- assign value = 'password.submit' | t -%}
                  {%- render 'button', type: 'submit', value: value, style: 'outlined', class: 'button' -%}
                  {%- assign value = nil -%}
                </div>
              {%- endform -%}
            </form-validate>
            <p class="caption">{{- 'password.admin_link_html' | t -}}</p>
          </div>
        </div>
      </div>
    </modal-dialog>
  </body>
</html>
