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

<div class="d-flex justify-content-center align-items-center min-vh-100 py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-5">
        <div class="card border-0 shadow-lg">
          <div class="card-body p-5">
            <!-- Logo -->
            <div class="text-center mb-4">
              <a href="{{ site.url }}">
                <img src="{{ site.brand.images.brandmark }}?cb={{ site.uj.cache_breaker }}" alt="{{ site.brand.name }}" style="width: 4rem;">
              </a>
            </div>

            <!-- Icon -->
            <div class="text-center mb-4">
              <div class="d-inline-flex align-items-center justify-content-center rounded-circle bg-primary bg-gradient text-white" style="width: 80px; height: 80px;">
                {% uj_icon "key", "fs-2" %}
              </div>
            </div>

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

            <!-- Reset Form -->
            <form>
              <div class="mb-4">
                <label for="email" class="form-label fw-semibold">Email Address</label>
                <div class="input-group input-group-lg">
                  <span class="input-group-text">
                    {% uj_icon "envelope", "" %}
                  </span>
                  <input type="email" class="form-control" id="email" placeholder="Enter your email address" required>
                </div>
              </div>

              <button type="submit" class="btn btn-primary btn-lg w-100 mb-4">
                {% uj_icon "paper-plane", "me-2" %}
                Send Reset Link
              </button>
            </form>

            <!-- Back to Sign In -->
            <div class="text-center">
              <p class="text-muted mb-0">
                Remember your password?
                <a href="/auth/signin" class="text-decoration-none fw-semibold">
                  {% uj_icon "arrow-left", "me-1" %}
                  Back to Sign In
                </a>
              </p>
            </div>

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

        <!-- Additional Info -->
        <div class="text-center mt-4">
          <div class="bg-body-tertiary 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>
      </div>
    </div>
  </div>
</div>

{{ content | uj_content_format }}