<!doctype html>
<!--[if IE 9]> <html class="ie9 no-js" lang="{{ shop.locale }}"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{ shop.locale }}"> <!--<![endif]-->
<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="{{ settings.color_button }}">
  <link rel="canonical" href="{{ canonical_url }}">

  {% if settings.favicon != blank %}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
  {% endif %}

  <title>
    {{ shop.name }} &ndash; {{ 'general.password_page.opening_soon' | t }}
  </title>

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

  {% include 'social-meta-tags' %}

  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  <!--[if (lte IE 9) ]>{{ 'match-media.min.js' | asset_url | script_tag }}<![endif]-->

  <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
  <!--[if lte IE 9]><script src="{{ 'vendor.js' | asset_url }}"></script><![endif]-->

  <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
  <!--[if lte IE 9]><script src="{{ 'theme.js' | asset_url }}"></script><![endif]-->

  <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'password.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
  <!--[if lte IE 9]><script src="{{ 'password.js' | asset_url }}"></script><![endif]-->

  {{ content_for_header }}
</head>

<body class="template-password">
  <div class="password-page text-center">
    <header class="password-header" role="banner">
      <div class="password-header__inner">
        <div class="password-login">
          <a href="#LoginModal" class="js-modal-open-login-modal link--action btn btn--secondary">
            {{ 'general.password_page.password_link' | t }} &rarr;
          </a>
        </div>
      </div>
    </header>

    <div class="password-main text-center" role="main">
      <div class="password-main__inner">
        {{ content_for_layout }}
      </div>
    </div>
  </div>

  <div id="LoginModal" class="modal">
    <div class="modal__inner">
      <div class="modal__centered password-modal__content page-width text-center">
        <p class="password__form-heading h4">{{ 'general.password_page.login_form_heading' | t }}</p>
          {% form 'storefront_password' %}
            {{ form.errors | default_errors }}
            <label for="password" class="label--hidden">{{ 'general.password_page.login_form_password_label' | t }}</label>
            <div class="input-group password__input-group">
              <input type="password" name="password" id="Password" class="input-group__field input--content-color" placeholder="{{ 'general.password_page.login_form_password_placeholder' | t }}">
              <span class="input-group__btn">
                <button type="submit" name="commit" class="btn btn--narrow">
                  {{ 'general.password_page.login_form_submit' | t }}
                </button>
              </span>
            </div>
          {% endform %}
        <p>{{ 'general.password_page.admin_link_html' | t }}</p>
      </div>
    </div>

    <button type="button" class="modal__close js-modal-close text-link">
      {% include 'icon-close' %}
      <span class="icon__fallback-text">{{ 'general.accessibility.close_modal' | t | json }}</span>
    </button>
  </div>

  <script>
    var theme = {
      strings: {
        addressError: {{ 'sections.map.address_error' | t | json }},
        addressNoResults: {{ 'sections.map.address_no_results' | t | json }},
        addressQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }},
        authError: {{ 'sections.map.auth_error_html' | t | json }}
      }
    }
  </script>

{% include 'zipify-couponcountdown-theme' %}</body>
</html>
