
<!-- sections/main-login.liquid -->
{{ 'hdt-customer.css' | asset_url | stylesheet_tag }}

<div timeline hdt-reveal="slide-in" class="hdt-main-login hdt-section-spacing hdt-s-gradient" color-scheme="{{ section.settings.color_scheme }}">
  <div class="hdt-container">
    <div class="hdt-customer hdt-row-grid hdt-grid-cols-1 lg:hdt-grid-cols-2" style="--spacing-x:3rem;--spacing-y:3rem;">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'form' -%}
            <div timeline hdt-reveal="slide-in" class="hdt-login-form" {{ block.shopify_attributes }}>
              <div id="recover">
                <h3 class="hdt-register-form__heading hdt-text-10xl hdt-font-normal">{{ 'customer.recover_password.title' | t }}</h3>
                <p class="hdt-register-form__descripton">{{ 'customer.recover_password.subtext' | t }}</p>
                {%- form 'recover_customer_password' -%}
                  {%- assign recover_success = form.posted_successfully? -%}
                  <div class="hdt-field hdt-relative">
                    <input class="hdt-input" type="email" name="email" id="RecoverEmail-{{ section.id }}" autocomplete="email" autocorrect="off" autocapitalize="off" {% if form.errors contains 'form' %} aria-invalid="true" aria-describedby="RecoverEmail-email-error" autofocus {% endif %} placeholder="{{ 'customer.login_page.email' | t }}">
                    <label for="RecoverEmail-{{ section.id }}" class="hdt-absolute hdt-top-0 hdt-pe-none hdt-flex hdt-align-center">{{ 'customer.login_page.email' | t }}<span class="hdt-required hdt-s-text">*</span></label>
                  </div>
                  {%- if form.errors -%}
                    <div id="RecoverEmail-email-error" class="hdt-form__message hdt-flex hdt-align-center">
                      <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.messages.form }}
                    </div>
                  {%- endif -%}
                  <div class="hdt-field">
                    <a href="#login" class="hdt-inline-block hdt-link-cancel hdt-s-text2">{{ 'customer.login_page.cancel' | t }}</a>
                  </div>
                  <div class="hdt-field hdt-row-grid hdt-grid-cols-2">
                    <button class="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">{{ 'customer.recover_password.submit' | t }}</span></button>
                  </div>
                {%- endform -%}
              </div>
              <div id="login">
                <h3 class="hdt-form-heading hdt-text-10xl hdt-font-normal">{{ 'customer.log_in' | t }}</h3>
                {%- if recover_success == true -%}
                  <h3 class="hdt-form__message hdt-flex hdt-align-center">
                    <svg aria-hidden="true" class="hdt-inline-block" focusable="false" viewBox="0 0 13 13" style="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 d="M5.53271 8.66357L9.25213 4.68197" stroke="white"/>
                      <path d="M4.10645 6.7688L6.13766 8.62553" stroke="white">
                    </svg>
                    {{ 'customer.recover_password.success' | t }}
                  </h3>
                {%- endif -%}
                {%- form 'customer_login', novalidate: 'novalidate' -%}
                  {%- if form.errors -%}
                    <div class="hdt-form__message hdt-form-message--error">
                      <h2 class="hdt-form__message-title hdt-text-4xl hdt-font-normal hdt-flex hdt-align-center">
                        <span class="sr-only">{{ 'accessibility.error' | t }} </span>
                        <svg aria-hidden="true" focusable="false" viewBox="0 0 13 13" style="color:rgb(var(--color-error-text));">
                          <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>
                        {{ 'templates.contact.form.error_heading' | t }}
                      </h2>
                      <ul class="hdt-form-message--list">
                        {%- for field in form.errors -%}
                          <li>
                            {%- if field == 'form' -%}
                              {{ form.errors.messages[field] }}
                            {%- else -%}
                              <a href="#{{ field }}">
                                {{ form.errors.translated_fields[field] | capitalize }}
                                {{ form.errors.messages[field] }}
                              </a>
                            {%- endif -%}
                          </li>
                        {%- endfor -%}
                      </ul>
                    </div>
                  {%- endif -%}
                  <div class="hdt-field hdt-relative">
                    <input class="hdt-input" type="email" name="customer[email]" id="CustomerEmail-{{ section.id }}" autocomplete="email" autocorrect="off" autocapitalize="off" {% if form.errors contains 'form' %} aria-invalid="true" {% endif %} placeholder="{{ 'customer.login_page.email' | t }}">
                    <label for="CustomerEmail-{{ section.id }}" class="hdt-absolute hdt-top-0 hdt-pe-none hdt-flex hdt-align-center">{{ 'customer.login_page.email' | t }}<span class="hdt-required hdt-s-text">*</span></label>
                  </div>
                  {%- if form.password_needed -%}
                    <div class="hdt-field hdt-relative">
                      <input class="hdt-input" type="password" value="" name="customer[password]" id="CustomerPassword-{{ section.id }}" autocomplete="current-password" placeholder="{{ 'customer.login_page.password' | t }}">
                      <label for="CustomerPassword-{{ section.id }}" class="hdt-absolute hdt-top-0 hdt-pe-none hdt-flex hdt-align-center">{{ 'customer.login_page.password' | t }}<span class="hdt-required hdt-s-text">*</span></label>
                    </div>
                  {%- endif -%}
                  <div class="hdt-field">
                    <a href="#recover" class="hdt-inline-block hdt-link-recover hdt-s-text2">{{ 'customer.login_page.forgot_password' | t }}</a>
                  </div>
                  <div class="hdt-field hdt-row-grid hdt-grid-cols-1{% unless block.settings.btn_full %} lg:hdt-grid-cols-2{% endunless %}" style="--spacing-x:1rem">
                    <button class="hdt-login-form__submit hdt-inline-flex hdt-align-center hdt-justify-center hdt-relative hdt-btn hdt-oh hdt-btn-{{ block.settings.btn_style }} hdt-font-{{ block.settings.btn_fw }}"><span class="hdt-truncate">{{ 'customer.login_page.sign_in' | t }}</span>
                    {%- if block.settings.btn_icon == "1" -%}
                      <svg class="hdt-icon hdt-icon-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 64 64" fill="currentColor"><path d="M12,56.43,36.48,32,12,7.52,19.53,0,51.61,32,19.53,64Z"/></svg>
                    {%- elsif block.settings.btn_icon == "2" -%}
                      <svg class="hdt-icon hdt-icon-2" xmlns="http://www.w3.org/2000/svg" width="8" height="8"  viewBox="0 0 8 8" fill="currentColor"><path d="M0.861539 8L0 7.13846L5.90769 1.23077H0.615385V0H8V7.38462H6.76923V2.09231L0.861539 8Z"/></svg>
                    {%- endif -%}
                  </button>
                  </div>
                {%- endform -%}
              </div>
            </div>
          {%- else -%}
            <div timeline hdt-reveal="slide-in" class="hdt-login-content" {{ block.shopify_attributes }}>
              {%- if block.settings.title != blank -%}<h3 class="hdt-form-heading hdt-text-10xl hdt-font-normal">{{ block.settings.title }}</h3>{%- endif -%} 
              {%- if block.settings.description != blank -%}<p class="hdt-s-text2">{{ block.settings.description }}</p>{%- endif -%} 
              <a href="{{ routes.account_register_url }}" class="hdt-inline-flex hdt-align-center hdt-justify-center hdt-relative hdt-btn hdt-oh hdt-btn-{{ block.settings.btn_style }} hdt-font-{{ block.settings.btn_fw }}"{% if block.settings.btn_full %} style="width:100%" {% endif %}><span class="hdt-truncate">{{ 'customer.register.submit' | t }}</span>
                {%- if block.settings.btn_icon == "1" -%}
                  <svg class="hdt-icon hdt-icon-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 64 64" fill="currentColor"><path d="M12,56.43,36.48,32,12,7.52,19.53,0,51.61,32,19.53,64Z"/></svg>
                {%- elsif block.settings.btn_icon == "2" -%}
                  <svg class="hdt-icon hdt-icon-2" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><path d="M0.861539 8L0 7.13846L5.90769 1.23077H0.615385V0H8V7.38462H6.76923V2.09231L0.861539 8Z"/></svg>
                {%- endif -%}
              </a>
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</div>
{%- style -%}#shopify-section-{{section.id}}{--section-pt:{{section.settings.padding_top}}px;--section-pb:{{section.settings.padding_bottom}}px;--section-prate:{{section.settings.padding_rate}}}{%- endstyle -%}

{% schema %}
{
  "name": "t:sections.main-login.name",
  "class": "hdt-section hdt-login-section",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 20,
      "max": 120,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 60
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 20,
      "max": 120,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 113
    },
    {
      "type": "range",
      "id": "padding_rate",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "t:sections.all.padding.padding_rate",
      "default": 75
    }
  ],
  "blocks": [
    {
      "type": "form",
      "name": "Form",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "btn_full",
          "label": "t:sections.all.button.settings.btn_full.label"
        },
        {
          "type": "select",
          "id": "btn_style",
          "label": "t:sections.all.button.settings.style.label",
          "options": [
            {
              "value": "solid",
              "label": "t:sections.all.button.settings.style.options.option_1"
            },
            {
              "value": "outline",
              "label": "t:sections.all.button.settings.style.options.option_2"
            },
            {
              "value": "link",
              "label": "t:sections.all.button.settings.style.options.option_4"
            }
          ],
          "default": "solid"
        },
        {
          "type": "select",
          "id": "btn_fw",
          "label": "t:sections.all.button.settings.font_weight.label",
          "options": [
            {
              "value": "normal",
              "label": "t:sections.all.button.settings.font_weight.options.option_1"
            },
            {
              "value": "medium",
              "label": "t:sections.all.button.settings.font_weight.options.option_2"
            },
            {
              "value": "semibold",
              "label": "t:sections.all.button.settings.font_weight.options.option_3"
            },
            {
              "value": "bold",
              "label": "t:sections.all.button.settings.font_weight.options.option_4"
            }
          ],
          "default": "normal"
        },
        {
          "type": "select",
          "id": "btn_icon",
          "label": "t:sections.all.button.settings.icon.label",
          "options": [
            {
              "value": "none",
              "label": "t:sections.all.button.settings.icon.options.option_0"
            },
            {
              "value": "1",
              "label": "t:sections.all.button.settings.icon.options.option_1"
            },
            {
              "value": "2",
              "label": "t:sections.all.button.settings.icon.options.option_2"
            }
          ],
          "default": "none"
        }
      ]
    },
    {
      "type": "infos",
      "name": "Infos",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "t:sections.main-login.blocks.infos.settings.title.label",
          "default": "I'm new here"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "t:sections.main-login.blocks.infos.settings.description.label",
          "default": "Sign up for early Sale access plus tailored new arrivals, trends and promotions. To opt out, click unsubscribe in our emails."
        },
        {
          "type": "checkbox",
          "id": "btn_full",
          "label": "t:sections.all.button.settings.btn_full.label"
        },
        {
          "type": "select",
          "id": "btn_style",
          "label": "t:sections.all.button.settings.style.label",
          "options": [
            {
              "value": "solid",
              "label": "t:sections.all.button.settings.style.options.option_1"
            },
            {
              "value": "outline",
              "label": "t:sections.all.button.settings.style.options.option_2"
            },
            {
              "value": "link",
              "label": "t:sections.all.button.settings.style.options.option_4"
            }
          ],
          "default": "solid"
        },
        {
          "type": "select",
          "id": "btn_fw",
          "label": "t:sections.all.button.settings.font_weight.label",
          "options": [
            {
              "value": "normal",
              "label": "t:sections.all.button.settings.font_weight.options.option_1"
            },
            {
              "value": "medium",
              "label": "t:sections.all.button.settings.font_weight.options.option_2"
            },
            {
              "value": "semibold",
              "label": "t:sections.all.button.settings.font_weight.options.option_3"
            },
            {
              "value": "bold",
              "label": "t:sections.all.button.settings.font_weight.options.option_4"
            }
          ],
          "default": "normal"
        },
        {
          "type": "select",
          "id": "btn_icon",
          "label": "t:sections.all.button.settings.icon.label",
          "options": [
            {
              "value": "none",
              "label": "t:sections.all.button.settings.icon.options.option_0"
            },
            {
              "value": "1",
              "label": "t:sections.all.button.settings.icon.options.option_1"
            },
            {
              "value": "2",
              "label": "t:sections.all.button.settings.icon.options.option_2"
            }
          ],
          "default": "none"
        }
      ]
    }
  ]
}
{% endschema %}
