---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/cover

### PAGE CONFIG ###
---

<section class="col-12 col-md-8 col-lg-6 col-xl-5 mw-sm">
  <div class="card border-0 shadow-lg">
    <div class="card-body p-3 p-md-5">
      <!-- Logo -->
      <div class="text-center mb-3">
        <div class="avatar avatar-xl">
          <img src="{{ site.brand.images.brandmark }}?cb={{ site.uj.cache_breaker }}" class="filter-adaptive" alt="{{ site.brand.name }} Logo"/>
        </div>
      </div>

      <!-- Header -->
      <div class="text-center mb-4">
        <h1 class="h3 mb-2">Reset password</h1>
        <p class="text-muted">Enter your email address and we'll send you a link to reset your password.</p>
      </div>

      <!-- Spinner -->
      {% capture initializing_spinner %}<span class="spinner-border spinner-border-sm me-2 form-initializing-spinner"></span>{% endcapture %}

      <!-- Reset Form -->
      <form id="auth-form" autocomplete="on" novalidate onsubmit="return false">
        <div class="mb-4 text-start">
          <label for="email" class="form-label fw-semibold">
            Email <span class="text-danger">*</span>
          </label>
          <input type="email" class="form-control form-control-md" id="email" name="email" placeholder="Enter your email" autocomplete="email" autofocus required disabled>
        </div>

        <button type="submit" class="btn btn-success _btn-lg w-100 mb-4" data-provider="email" disabled>
          {{ initializing_spinner }}
          {% uj_icon "paper-plane", "me-2" %}
          <span class="button-text">Send reset link</span>
        </button>
      </form>

      <!-- Back to Sign in -->
      <div class="text-center">
        <p class="text-muted mb-0">
          Remember your password?
          <a href="/signin" class="text-decoration-none fw-semibold">
            Sign in
          </a>
        </p>
      </div>

      <!-- Help Section -->
      <div class="mt-4 pt-4 border-top text-center">
        <p class="text-muted small mb-2">Need help?</p>
        <a href="/contact" class="btn btn-outline-adaptive btn-sm">
          {% uj_icon "headset", "me-1" %}
          Contact support
        </a>
      </div>

      <!-- Additional Info -->
      {% comment %}
        <div class="text-center mt-4">
          <div class="bg-body rounded-3 p-4">
            <div class="d-flex align-items-center justify-content-center mb-3">
              {% uj_icon "shield-check", "text-success fs-3 me-2" %}
              <h3 class="h6 fw-bold mb-0">Secure & Private</h3>
            </div>
            <p class="text-muted small mb-0">
              We'll only send a password reset link to your registered email address.
              The link expires in 1 hour for your security.
            </p>
          </div>
        </div>
      {% endcomment %}
    </div>
  </div>
</section>

{{ content | uj_content_format }}