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

<div timeline hdt-reveal="slide-in" class="hdt-main-active-account hdt-section-spacing hdt-s-gradient" color-scheme="{{ section.settings.color_scheme }}">
  <div class="hdt-container lg:hdt-container hdt-px-15">
    <div class="hdt-customer">
      <div class="hdt-active-account">
      <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-text-center hdt-text-10xl hdt-font-normal">{{ 'customer.reset_password.title' | t }}</h3>
      <p class="hdt-text-center">{{ 'customer.reset_password.subtext' | t }}</p>
      {%- form 'activate_customer_password' -%}
        {%- 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="#{{ 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="password" name="customer[password]" id="password-{{ section.id }}" autocomplete="new-password" {% if form.errors contains 'password' %} aria-invalid="true" aria-describedby="password-error" {% endif %} placeholder="{{ 'customer.activate_account.password' | t }}">
          <label class="hdt-absolute hdt-top-0 hdt-pe-none hdt-flex hdt-align-center" for="password-{{ section.id }}">{{ 'customer.activate_account.password' | t }}</label>
        </div>
        {%- if form.errors contains 'password' -%}
          <span 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-relative">
          <input class="hdt-input" type="password" name="customer[password_confirmation]" id="password_confirmation-{{ section.id }}" autocomplete="new-password" {% if form.errors contains 'password_confirmation' %} aria-invalid="true" aria-describedby="password_confirmation-error" {% endif %} placeholder="{{ 'customer.activate_account.password_confirm' | t }}">
          <label class="hdt-absolute hdt-top-0 hdt-pe-none hdt-flex hdt-align-center" for="password_confirmation-{{ section.id }}">{{ 'customer.activate_account.password_confirm' | t }}</label>
        </div> 
        {%- if form.errors contains 'password_confirmation' -%}
          <span 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_confirmation | capitalize }} {{ form.errors.messages.password_confirmation }}
          </span>
        {%- endif -%}
        <div class="hdt-field hdt-row-grid hdt-grid-cols-1 lg: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.activate_account.submit' | t }}</span></button>
          <button name="decline" 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.activate_account.cancel' | t }}</span></button>
        </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-activate-account.name",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "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 %}
