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

<div timeline hdt-reveal="slide-in" class="hdt-main-register hdt-section-spacing hdt-s-gradient" color-scheme="{{ section.settings.color_scheme }}">
  <div class="hdt-container">
    <div class="hdt-customer">
      <div class="hdt-register-form">
        <svg style="display: none">
          <symbol id="icon-error" 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="currentColor" stroke-width="0.7">
          </symbol>
        </svg>
        <h3 class="hdt-register-form__heading hdt-text-10xl hdt-font-normal">{{ 'customer.register.title' | t }}</h3>
        <p class="hdt-register-form__descripton hdt-s-text2">{{ 'customer.register.subtext' | t }}</p>
        {%- form 'create_customer', 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">
                <svg aria-hidden="true" focusable="false" role="presentation"><use href="#icon-error" /></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="#RegisterForm-{{ 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="text" name="customer[first_name]" id="RegisterForm-FirstName-{{ section.id }}" {% if form.first_name %}value="{{ form.first_name }}" {% endif %} autocomplete="given-name" placeholder="{{ 'customer.register.first_name' | t }}">
            <label class="hdt-absolute hdt-top-0 hdt-pe-none hdt-flex hdt-align-center" for="RegisterForm-FirstName-{{ section.id }}">{{ 'customer.register.first_name' | t }}</label>
          </div>
          <div class="hdt-field hdt-relative">
            <input class="hdt-input" type="text" name="customer[last_name]" id="RegisterForm-LastName-{{ section.id }}" {% if form.last_name %}value="{{ form.last_name }}" {% endif %} autocomplete="family-name" placeholder="{{ 'customer.register.last_name' | t }}">
            <label class="hdt-absolute hdt-top-0 hdt-pe-none hdt-flex hdt-align-center" for="RegisterForm-LastName-{{ section.id }}">{{ 'customer.register.last_name' | t }}</label>
          </div>
          <div class="hdt-field hdt-relative">
            <input class="hdt-input" type="email" name="customer[email]" id="CustomerEmail-{{ section.id }}" {% if form.email %} value="{{ form.email }}" {% endif %} spellcheck="false" autocapitalize="off" autocomplete="email" autocorrect="off" autocapitalize="off" {% if form.errors contains 'email' %} aria-invalid="true" aria-describedby="RegisterForm-email-error"{% endif %} placeholder="{{ 'customer.register.email' | t }}">
            <label class="hdt-absolute hdt-top-0 hdt-pe-none hdt-flex hdt-align-center" for="CustomerEmail-{{ section.id }}">{{ 'customer.register.email' | t }}<span class="hdt-required hdt-s-text">*</span></label>
          </div>
          {%- if form.errors contains 'email' -%}
            <span id="RegisterForm-email-error" class="hdt-form__message hdt-flex hdt-align-center">
              <svg aria-hidden="true" focusable="false">
                <use href="#icon-error" />
              </svg>
              {{ form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email }}
            </span>
          {%- endif -%}
          <div class="hdt-field hdt-relative">
            <input class="hdt-input" type="password" value="" name="customer[password]" id="CustomerPassword-{{ section.id }}" {% if form.errors contains 'password' %} aria-invalid="true" aria-describedby="RegisterForm-password-error" {% endif %} autocomplete="current-password" placeholder="{{ 'customer.register.password' | t }}">
            <label class="hdt-absolute hdt-top-0 hdt-pe-none hdt-flex hdt-align-center" for="CustomerPassword-{{ section.id }}">{{ 'customer.register.password' | t }}<span class="hdt-required hdt-s-text">*</span></label>
          </div>
          {%- if form.errors contains 'password' -%}
            <span id="RegisterForm-password-error" class="hdt-form__message hdt-flex hdt-align-center">
              <svg aria-hidden="true" focusable="false">
                <use href="#icon-error" />
              </svg>
              {{ form.errors.translated_fields.password | capitalize }}
              {{ form.errors.messages.password }}
            </span>
          {%- endif -%}
          <div class="hdt-field hdt-row-grid hdt-grid-cols-1">
            <button class="hdt-register-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">{{ 'customer.register.submit' | t }}</span></button>
          </div>
          <div class="hdt-text-center">
            <a class="hdt-inline-block hdt-link-login hdt-s-text hdt-font-semibold" href="{{ routes.account_login_url }}">{{ 'customer.register.login_here' | t }} <svg class="hdt-icon hdt-icon-2 hdt-inline-block" 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></a>
          </div>
        {%- endform -%}
      </div>
    </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-register.name",
  "class": "hdt-section hdt-register-section",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_rate",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "t:sections.all.padding.padding_rate",
      "default": 75
    }
  ]
}
{% endschema %}