{% comment %} Based on: https://github.com/Shopify/dawn/blob/v7.0.1/sections/main-login.liquid {% endcomment %}
{%- if settings.multipass_login != true -%}
  {{ 'customer.css' | asset_url | stylesheet_tag }}

  {%- style -%}
    .login-logo {
      max-width: {{ section.settings.logo_width }}px;
    }

    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }
  {%- endstyle -%}

  <div class="customer login section-{{ section.id }}-padding">
    {%- if section.settings.logo != blank -%}
      <a href="https://{{ settings.storefront_hostname }}/" style="margin-bottom:3rem;">
        {%- assign logo_alt = shop.name | escape -%}
        {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%}
        {{ section.settings.logo | image_url: width: section.settings.width | image_tag:
          class: 'login-logo',
          widths: '50, 100, 150, 200, 250, 300, 400, 500',
          height: logo_height,
          width: section.settings.logo_width,
          alt: logo_alt
        }}
      </a>
    {%- endif -%}

    <h1 id="recover" tabindex="-1">
      Reset password
    </h1>
    <div>
      <p>
        We will send you an email to reset your password
      </p>

      {%- form 'recover_customer_password' -%}
        {% assign recover_success = form.posted_successfully? %}
        <div class="field">
          <input type="email"
            value=""
            name="email"
            id="RecoverEmail"
            autocorrect="off"
            autocapitalize="off"
            autocomplete="email"
            {% if form.errors %}
              aria-invalid="true"
              aria-describedby="RecoverEmail-email-error"
              autofocus
            {% endif %}
            placeholder="Email"
          >
          <label for="RecoverEmail">
            Email
          </label>
        </div>
        {%- if form.errors -%}
          <small id="RecoverEmail-email-error" class="form__message">
            <svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13">
              <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="#EB001B" stroke="#EB001B" 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'] }}
          </small>
        {%- endif -%}

        <button>
          Submit
        </button>

        <a href="#login">
          Back to login page
        </a>
      {%- endform -%}
    </div>

    <h1 id="login" tabindex="-1">
      Login
    </h1>
    <div>
      <p>
        Welcome back! Please enter your details.
      </p>

      {%- if recover_success == true -%}
        <h3 class="form__message" tabindex="-1" autofocus>
          <svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13">
            <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="#428445" 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 -%}
          <h2 class="form__message" tabindex="-1" autofocus>
            <span class="visually-hidden">{{ 'accessibility.error' | t }} </span>
            <svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13">
              <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="#EB001B" stroke="#EB001B" 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>
          {{ form.errors | default_errors }}
        {%- endif -%}

        <div class="field">        
          <input
            type="email"
            name="customer[email]"
            id="CustomerEmail"
            autocomplete="email"
            autocorrect="off"
            autocapitalize="off"
            {% if form.errors contains 'form' %}
              aria-invalid="true"
            {% endif %}
            placeholder="Email"
          >
          <label for="CustomerEmail">
            Email
          </label>
        </div>

        {%- if form.password_needed -%}
          <div class="field">          
            <input
              type="password"
              value=""
              name="customer[password]"
              id="CustomerPassword"
              autocomplete="current-password"
              {% if form.errors contains 'form' %}
                aria-invalid="true"
              {% endif %}
              placeholder="Password"
            >
            <label for="CustomerPassword">
              Password
            </label>
          </div>

          <a href="#recover">
            Forgot your password?
          </a>
        {%- endif -%}

        <button>
          Sign in
        </button>

        <p>
          Don't have an account?
          <a href="{{ routes.account_register_url }}">
            Sign up
          </a>
        </p>
        
      {%- endform -%}
    </div>
    
    {%- if shop.checkout.guest_login -%}
      <div>
        <hr>
        <h2>Continue as a guest</h2>

        {%- form 'guest_login' -%}
          <button>
            Continue
          </button>
        {%- endform -%}
      </div>
    {%- endif -%}
  </div>
{%- endif -%}

{% schema %}
{
  "name": "Login",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo image"
    },
    {
      "type": "range",
      "id": "logo_width",
      "min": 50,
      "max": 250,
      "step": 10,
      "default": 100,
      "unit": "px",
      "label": "Custom logo width"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 36
    }
  ]
}
{% endschema %}