<turbo-stream action="append" target="fullscreen-overlay"><template><div class="fullscreen-overlay login-overlay-wrapper fullscreen-overlay--slide-from-right fullscreen-overlay--backdrop"
  data-controller="fullscreen-overlay"
  data-fullscreen-overlay-backdrop-value="true"
>
  <div class="login-overlay">
    <div class="login-overlay__header">
      <h3 class="login-overlay__title">Login</h3>
      <button type="button" class="login-overlay__close" data-action="fullscreen-overlay#onCloseClicked" aria-label="Close">
        <i class="fo-icon fo-close"></i>
      </button>
    </div>
    <div class="login-overlay__body">
      <form data-turbo="false" data-controller="form-validator" class="new_customer" id="loginForm" action="/customers/sign_in" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="zEJw3jPgBfL_CUJCOoGsUA5x3BwYnz5jq8QEFyzj8EG2UDSqAsPERO_JWsEuVsk77qfoY1soYWhYChMhl-V3_w" autocomplete="off" />
  
  <div class="field-group field-group--large">
    <div class="form-floating">
      <input autocomplete="email" type="email" class="form-control" id="loginEmail" required="required" placeholder="email@email.com" aria-label="E-mail input" name="customer[email]" />
      <label for="customer_email">E-mail</label>
    </div>
    <div class="form-floating form-floating--with-password-toggle " data-controller="password-visibility">
  <input class="form-control" required="required" autocomplete="current-password" placeholder="********" aria-label="Password input" data-password-visibility-target="input" id="loginPassword" type="password" name="customer[password]" />
  <label for="customer_password">Password</label>
  <button type="button"
          class="password-toggle"
          data-password-visibility-target="toggle"
          data-action="click->password-visibility#toggle"
          data-label-show="Show password"
          data-label-hide="Hide password"
          aria-label="Show password"
          title="Show password"
          aria-pressed="false"
          tabindex="-1">
    <i class="fo-icon fo-eye-open" data-password-visibility-target="icon" aria-hidden="true"></i>
  </button>
        <a class="forgot-password-link" href="/customers/password/new">I have forgotten my password</a>

</div>

  </div>
  <div class="stay-logged-in">
      <div class="field-group">
        <input name="customer[remember_me]" type="hidden" value="0" autocomplete="off" /><input autocomplete="off" type="checkbox" value="1" name="customer[remember_me]" id="customer_remember_me" />
        <label for="customer_remember_me">Stay logged in</label>
      </div>
  </div>
  <div class="fo-checkout__actions cta">
    <button name="button" type="submit" class="btn btn-primary btn-icon-text" data-action="form-validator#validate">
      <i class="fo-icon fo-user"></i>
      <span>Login</span>
</button>  </div>
    <div class="create-new-account">
      <p>I do not have a customer account yet</p>
      <a class="btn btn-block btn-secondary" href="/customers/registration">Create a Customer Account</a>
    </div>
  <div data-controller="accordion" class="other-payment-accordion">
    <div data-accordion-target="trigger"  data-action="click->accordion#toggle" class="collapsible title">
      <span>
        How do I access my customer account if I paid with PayPal Express or Amazon?
      </span>
    </div>
    <div data-accordion-target="content" class="content">
      <ol>
        <li>
          Click &quot;Forgot Password&quot; at the top.
        </li>
        <li>
          Then enter the e-mail address that was stored with the payment method during your order, and then click on “Send password”.
        </li>
        <li>
          You will then receive an e-mail that allows you to set a new password. With this new password, you can log in to your customer account.
        </li>
      </ol>
    </div>
  </div>
</form>
      <aside class="trust-information">
  <div class="trust-information_column trust-information_column--quote">
    <img alt="IT project manager" title="IT project manager" class="trust-person-image" src="/images/frontend/it-trusted.webp" />
    <p>&quot;I buy online myself. Data protection is important to me! We don&#39;t pass on any data!&quot;</p>
    <span>Ramon - Head of IT at wheeloutlet</span>
  </div>
  <div class="trust-information_column">
    <div class="check-container">
        <p><i class="fo-icon fo-garantie-check green"></i>Encryption via SSL</p>
        <p><i class="fo-icon fo-garantie-check green"></i>No spam, no advertising</p>
        <p><i class="fo-icon fo-garantie-check green"></i>Track your order</p>
        <p><i class="fo-icon fo-garantie-check green"></i>Simple online complaints</p>
    </div>
    <div class="batch-container">
          <img class="ssl-logo" title="Encryption via SSL" alt="Encryption via SSL" loading="lazy" src="/images/icons/trust/ssl_midi_en.webp" />

    </div>
  </div>
</aside>

    </div>
  </div>
</div>
</template></turbo-stream>