{% layout none %}
<!DOCTYPE html>
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if (gt IE 8)|!(IE)]><!--> <html class="modern" lang="en"> <!--<![endif]-->
  <head>
    <meta charset="UTF-8">
    <title>
      {{ shop.name }}
    </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">

    {% if settings.favicon != empty %}
      <link rel="shortcut icon" href="{{ 'favicon.png' | asset_url }}" type="image/png" />
    {% endif %}

    {{ content_for_header }}

    <!-- CSS ================================================== -->
    {{ 'bc.style.scss.css' | asset_url | stylesheet_tag }}
    {{ 'arenafont.css' | asset_url | stylesheet_tag }}

    <!-- JS ================================================== -->
    {{ 'modernizr.js' | asset_url | script_tag }}
    <script src="{{ 'jquery-1.11.0.min.js' | asset_url }}" ></script>

  </head>

  <body class="template-password">

    <div class="password-page__wrapper">

      <header class="password-page__header" role="banner">

        <div class="password-page__header__inner">

          {% comment %}
            Link to password modal
          {% endcomment %}
          <p class="password-login text-right small--text-center">
            <a href="#LoginModal" class="js-toggle-login-modal" data-mfp-src="#LoginModal">
              <i class="demo-icon icon-lock"></i>
              {{ 'general.password_page.password_link' | t }}
            </a>
          </p>

        </div>

      </header>

      <div class="password-page__main" role="main">

        <div class="password-page__main__inner">

          {% comment %}
            Opening soon text
          {% endcomment %}
          <h2 class="password-page__hero">{{ 'general.password_page.opening_soon' | t }}</h2>

          {% comment %}
            Password message which you can edit on http://www.shopify.com/admin/online_store/preferences
          {% endcomment %}

          {% unless shop.password_message == blank %}
            <div class="password-page__message">
              {{ shop.password_message }}
            </div>
            <hr class="hr">
          {% endunless %}

          {% comment %}
            Signup form
          {% endcomment %}

          <div class="password-page__signup-form">
            {% form 'customer' %}
              {{ form.errors | default_errors }}
              {% if form.posted_successfully? %}
                <p class="form-success">{{ 'general.password_page.signup_form_success' | t }}</p>
              {% else %}
                <p class="h4">{{ 'general.password_page.signup_form_heading' | t }}</p>
                <input type="hidden" name="contact[tags]" value="prospect, password page">
                <label for="email" class="hidden-label">{{ 'general.password_page.signup_form_email_label' | t }}</label>
                <div class="input-group">
                  <input type="text" name="contact[email]" id="email" class="input-group-field" placeholder="{{ 'general.password_page.signup_form_email_placeholder' | t }}">
                  <span class="input-group-btn">
                    <input type="submit" class="btn password-page__signup-form__submit" value="{{ 'general.password_page.signup_form_submit' | t }}">
                  </span>
                </div>
              {% endif %}
            {% endform %}
          </div>

          {% comment %}
            Share homepage URL
            Shared text is from the store meta description
          {% endcomment %}

          {% if settings.share_facebook or settings.share_twitter or settings.share_google %}
          <div class="password-page__social-sharing">
            <p class="h4">{{ 'general.password_page.spread_the_word' | t }}</p>
            {% include 'social-sharing' %}
          </div>
          {% endif %}

        </div>

      </div>

      <footer class="password-page__footer" role="contentinfo">
        <div class="password-page__footer_inner">
          {% capture shopify %}
          <a class="shopify-link" href="//www.shopify.com" target="_blank" rel="noopener" title="Create your own online store with Shopify">
            {% include 'svg-definitions' with 'shopify-logo' %}
            <span class="shopify-name">Shopify</span>
          </a>
          {% endcapture %}
          {{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
        </div>
      </footer>

    </div>

    <div id="LoginModal" class="password-page__login-form text-center mfp-hide">
      <p class="h4">{{ 'general.password_page.login_form_heading' | t }}</p>
      {% form 'storefront_password' %}
      {{ form.errors | default_errors }}
      <label for="password" class="hidden-label">{{ 'general.password_page.login_form_password_label' | t }}</label>
      <div class="input-group">
        <input type="password" name="password" id="password" class="input-group-field" placeholder="{{ 'general.password_page.login_form_password_placeholder' | t }}" autofocus>
        <span class="input-group-btn">
          <input type="submit" class="btn password-page__login-form__submit" value="{{ 'general.password_page.login_form_submit' | t }}">
        </span>
      </div>
      {% endform %}
      <p class="admin-login">{{ 'general.password_page.admin_link_html' | t }}</p>
    </div>

    {{ 'magnific-popup.min.js' | asset_url | script_tag }}

    <script>
    $(function() {
      $('.js-toggle-login-modal').magnificPopup({
        type: 'inline',
        mainClass: 'mfp-fade',
        closeOnBgClick: false,
        closeBtnInside: false,
        closeOnContentClick: false,
        tClose: {{ 'general.password_page.close' | t | json }},
        removalDelay: 500,
        callbacks: {
          open: function() {
            window.setTimeout( function() { document.getElementById('password').focus(); }, 50 );
          }
        }
      });
      if ( $('.storefront-password-form .errors').size() ) {
        $('.js-toggle-login-modal').click();
      }
    });
    </script>

  </body>
</html>
