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

### PAGE CONFIG ###
features:
  - title: "Secure login"
    description: "Your data is protected with enterprise-grade security"
    icon: "shield-check"
  - title: "Quick access"
    description: "Get back to what matters most in seconds"
    icon: "clock"
  - title: "Multi-Device"
    description: "Access your account from anywhere, anytime"
    icon: "devices"

social_signin:
  - id: "google.com"
    name: "Google"
    logo: "https://cdn.itwcreativeworks.com/assets/general/images/brands/color/google.svg"
---

<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">Welcome back!</h1>
        <p class="text-muted">Sign in to your {{ site.brand.name }} account</p>
      </div>

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

      <!-- Sign in Form -->
      <form id="auth-form" autocomplete="on" novalidate onsubmit="return false">
        <!-- Hidden default submit button for Enter key -->
        <button type="submit" class="d-none" data-provider="email" aria-hidden="true" tabindex="-1"></button>

        <!-- Social Login (Optional) -->
        <div class="mb-4">
          {% for provider in page.resolved.social_signin %}
            <button type="submit" class="btn btn-adaptive _btn-lg w-100 mb-3 d-flex align-items-center justify-content-center" data-provider="{{ provider.id }}" disabled>
              {{ initializing_spinner }}
              <span class="avatar avatar-xs me-2">
                <img src="{{ provider.logo }}?cb={{ site.uj.cache_breaker }}" class="object-fit-contain" alt="{{ provider.name }} Logo"/>
              </span>
              <span class="button-text">Continue with {{ provider.name }}</span>
            </button>
          {% endfor %}
        </div>

        <!-- Divider -->
        <div class="position-relative mb-4">
          <hr class="text-muted">
          <span class="position-absolute top-50 start-50 translate-middle px-3 text-muted small bg-body-secondary">OR</span>
        </div>

        <div class="mb-3 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 disabled>
        </div>

        <div class="mb-3 text-start">
          <label for="password" class="form-label fw-semibold">
            Password <span class="text-danger">*</span>
          </label>
          <div class="input-group">
            <input type="password" class="form-control form-control-md" id="password" name="password" placeholder="Enter your password" autocomplete="current-password" disabled>
            <button class="btn border uj-password-toggle px-3" type="button" aria-label="Toggle password visibility">
              <span class="uj-password-show">{% uj_icon "eye", "fa-fw" %}</span>
              <span class="uj-password-hide d-none">{% uj_icon "eye-slash", "fa-fw" %}</span>
            </button>
          </div>

        </div>

        <button type="submit" class="btn btn-success _btn-lg w-100 mb-2" data-provider="email" disabled>
          {{ initializing_spinner }}
          {% uj_icon "arrow-right-to-bracket", "me-2" %}
          <span class="button-text">Sign in</span>
        </button>

        <a href="/reset" class="btn btn-outline-adaptive w-100 mb-3">
          {% uj_icon "key", "me-2" %}
          Recover account
        </a>
      </form>

      <!-- Links -->
      <div class="text-center">
        <p class="text-muted mb-0">
          Don't have an account yet?
          <a href="/signup" class="text-decoration-none fw-semibold">Sign up</a>
        </p>
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}