<!-- sections/main-password.liquid -->
{%- style -%}.hdt-main-password .hdt-newsletter-form__message{margin-top:var(--spacing-1)}.hdt-main-password .hdt-newsletter-form__message--success{color:rgba(var(--color-success-text))}.hdt-main-password .hdt-newsletter-form__message svg{height:2.4rem;width:2.4rem;margin-inline-end:1rem;position:relative;top:-.2rem}#MainContent{padding-top:5rem}.hdt-main-password__title{font-size:3rem;font-weight:var(--hdt-font-normal)}.hdt-main-password__content>*+*{margin-top:2.8rem}.hdt-main-password__newsletter input.hdt-input{padding:1.55rem 1.8rem;border:.1rem solid rgb(var(--color-input-secondary));color:rgb(var(--color-input-secondary));background-color:rgb(var(--color-input-primary));;line-height:normal;resize:none;transition:border-color .1s ease-in-out;--height-input:var(--spacing-5);outline:none}.hdt-main-password__newsletter .hdt-input::placeholder{opacity:0}.hdt-main-password__newsletter .hdt-field label{left:1.8rem;transform:scale(1);transform-origin:left top;transition:transform .2s ease-in-out;height:100%;color:rgb(var(--color-input-secondary))}.hdt-main-password__newsletter .hdt-field label .hdt-required{margin-inline-start:.5rem}.hdt-main-password__newsletter .hdt-field input:-webkit-autofill~label,.hdt-main-password__newsletter .hdt-field input:focus~label,.hdt-main-password__newsletter .hdt-field input:not(:placeholder-shown)~label{transform:translateY(-.6rem) scale(.8)}.hdt-main-password__newsletter .hdt-field input:-webkit-autofill,.hdt-main-password__newsletter .hdt-field input:focus,.hdt-main-password__newsletter .hdt-field input:not(:placeholder-shown){padding:2.5rem 1.8rem .6rem}.hdt-main-password__inner{width:78rem;margin:auto;max-width:90%;padding:1.5rem;border:.1rem solid rgb(var(--color-foreground));border-radius:var(--rounded-input)}.hdt-main-password__inner .hdt-form__message svg{height:1.5rem;width:1.5rem;margin-inline-end:1rem;position:relative;top:-.1rem}@media (min-width:1150px){#MainContent{height:100vh;flex:1 0 0%;justify-content:center;overflow-y:auto;display:flex;align-items:center}.hdt-main-password__inner{padding:5rem 7rem}.hdt-main-password__title{font-size:4.2rem}#MainContent{padding-top:2rem}}.dir--rtl .hdt-main-password__newsletter .hdt-field label{left:auto;right:1.8rem;transform-origin:right top}{%- endstyle -%}
<div class="hdt-main-password" color-scheme="{{ section.settings.color_scheme }}">
  <div class="hdt-main-password__inner hdt-rounded">
    <div class="hdt-main-password__content hdt-text-center">
      {%- if section.settings.heading != blank -%}<h2 class="hdt-main-password__title">{{ section.settings.heading }}</h2>{%- endif -%} 
      {%- if section.settings.content != blank -%}<div class="hdt-main-password__subheading hdt-s-text2 hdt-rte">{{ section.settings.content }}</div>{%- endif -%}
      <div class="hdt-main-password__newsletter">
        {%- form 'customer', class: 'newsletter-form' -%}
          <div class="hdt-field hdt-relative">
            <input id="NewsletterForm--{{ section.id }}" type="email" name="contact[email]" class="hdt-input" value="{{ form.email }}" aria-required="true" autocorrect="off" autocapitalize="off" autocomplete="email" {% if form.errors %} autofocus aria-invalid="true" aria-describedby="Newsletter-error--{{ section.id }}" {% elsif form.posted_successfully? %} aria-describedby="Newsletter-success--{{ section.id }}" {% endif %} placeholder="{{ 'sections.newsletter_form.email_placeholder' | t }}" required>
            <label for="NewsletterForm--{{ section.id }}" class="hdt-absolute hdt-top-0 hdt-pe-none hdt-flex hdt-align-center">{{ 'sections.newsletter_form.email_placeholder' | t }}<span class="hdt-required hdt-s-text">*</span></label>
          </div>
          <div class="hdt-field">
            {%- if form.errors -%} 
            <div class="hdt-newsletter-form__message">
              <small class="hdt-form__message hdt-form-message--error hdt-d-flex hdt-items-center" id="Newsletter-error--{{ section.id }}">
                <svg aria-hidden="true" focusable="false" viewBox="0 0 13 13" style="color:rgb(var(--color-error-text));position: relative;top: -0.2rem;">
                  <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                  <circle cx="6.5" cy="6.5" r="5.5" fill="currentColor" stroke="currentColor" stroke-width="0.7"/>
                  <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                  <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                </svg>
                {{- form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email -}}
              </small>
            </div>
            {%- endif -%}
            {%- if form.posted_successfully? -%}
              <div class="hdt-newsletter-form__message">
                <span class="hdt-form__message hdt-newsletter-form__message--success hdt-d-flex hdt-items-center" id="Newsletter-success--{{ section.id }}">
                  <svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13" class="hdt-inline-block" class="color:rgb(var(--color-success-text));">
                    <path d="M6.5 12.35C9.73087 12.35 12.35 9.73086 12.35 6.5C12.35 3.26913 9.73087 0.65 6.5 0.65C3.26913 0.65 0.65 3.26913 0.65 6.5C0.65 9.73086 3.26913 12.35 6.5 12.35Z" fill="currentColor" stroke="white" stroke-width="0.7"></path>
                    <path d="M5.53271 8.66357L9.25213 4.68197" stroke="white"></path>
                    <path d="M4.10645 6.7688L6.13766 8.62553" stroke="white"></path>
                  </svg>
                  {{- 'sections.newsletter_form.confirmation' | t }}
                </span>
              </div>
            {%- endif -%}                                
          </div>
          <div class="hdt-field hdt-row-grid hdt-grid-cols-1" style="margin-top:2rem">
            <button type="submit" class="hdt-newsletter-form__button hdt-inline-flex hdt-align-center hdt-justify-center hdt-relative hdt-btn hdt-oh hdt-btn-solid hdt-btn-font-semibold" name="commit" id="Subscribe" aria-label="Subscribe"><span>{{- 'general.password_page.notify_submit' | t }}</span></button>
          </div>
        {%- endform -%}
      </div>
      <div class="hdt-main-password__socials">
        {%- render 'social_sharing', socials_style: section.settings.socials_style, socials_size: section.settings.socials_size -%}
      </div>
    </div>
  </div>
</div>
<hdt-modal id="password-form-popup" class="hdt-modal hdt-modal-password hdt-hidden" color-scheme="{{ section.settings.color_scheme }}">
  <h3 slot="header" class="hdt-s-text hdt-text-10xl hdt-font-normal">{{ 'general.password_page.login_form_heading' | t }}</h3>
  <div class="hdt-password-form-popup">
    {%- form 'storefront_password' -%}
      <div class="hdt-field hdt-relative" style="margin-bottom: 3.3rem;">
        <input type="password" name="password" id="Password" class="hdt-input" autocomplete="current-password" {% if form.errors %} aria-invalid="true" aria-describedby="PasswordLoginForm-password-error" {%- endif -%} required="required" placeholder="{{ 'general.password_page.login_form_password_placeholder' | t }}">
        <label class="hdt-absolute hdt-top-0 hdt-pe-none hdt-flex hdt-align-center" for="{{ 'general.password_page.login_form_password_label' | t }}">{{- 'general.password_page.login_form_password_placeholder' | t -}}<span class="hdt-required hdt-s-text">*</span></label>
      </div>
      <div class="hdt-field hdt-field-btns hdt-row-grid hdt-grid-cols-1 lg:hdt-grid-cols-2 hdt-row-grid--modify hdt-justify-center">
        <button name="commit" class="hdt-login-form__submit hdt-inline-flex hdt-align-center hdt-justify-center hdt-relative hdt-btn hdt-oh hdt-btn-solid hdt-font-semibold"><span class="hdt-truncate"> {{ 'general.password_page.login_form_submit' | t }}</span></button>
      </div>
    {%- endform -%}
  </div>
</hdt-modal>
 
{% schema %}
{
  "name": "t:sections.main-password.name",
  "class": "hdt-section hdt-section-main-password",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.main-password.settings.heading.label",
      "default": "Coming Soon!"
    },
    {
      "type": "richtext",
      "id": "content",
      "label": "t:sections.main-password.settings.content.label",
      "default": "<p>We are about to go public so be sure to root on us and check back in anytime!<br> Can't wait to have you!</p>"
    },
    {
      "type": "paragraph",
      "content": "t:settings_schema.social-media.settings.paragraph.content"
    },
    {
      "type": "select",
      "id": "socials_style",
      "label": "t:settings_schema.social-media.settings.social_style.label",
      "default": "default",
      "options": [
        {
          "value": "default",
          "label": "t:settings_schema.social-media.settings.social_style.options__1.label"
        },
        {
          "value": "outline",
          "label": "t:settings_schema.social-media.settings.social_style.options__2.label"
        },
        {
          "value": "simple",
          "label": "t:settings_schema.social-media.settings.social_style.options__3.label"
        }
      ]
    },
    {
      "type": "select",
      "id": "socials_size",
      "label": "t:settings_schema.social-media.settings.social_size.label",
      "default": "medium",
      "options": [
        {
          "value": "small",
          "label": "t:settings_schema.social-media.settings.social_size.options__1.label"
        },
        {
          "value": "medium",
          "label": "t:settings_schema.social-media.settings.social_size.options__2.label"
        },
        {
          "value": "large",
          "label": "t:settings_schema.social-media.settings.social_size.options__3.label"
        }
      ]
    }
  ]
}
{% endschema %}
