{{define "login.html"}}
  {{template "auth_base" .}}
{{end}}

{{define "login_content"}}
  <div class="auth-heading">
    <h1>Welcome back to Nucleus</h1>
    <p>Build your design system effortlessly with our powerful component library.</p>
  </div>
  <div class="auth-note" role="note">
    <strong>Demo account access</strong><br />
    Email: user@example.com · Password: Password123
  </div>
  {{if .Error}}
  <article class="contrast" role="alert">
    <header>Unable to sign in</header>
    <p>{{.Error}}</p>
  </article>
  {{end}}
  <form method="post" action="/login" class="auth-form">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}" />
    <label for="email">
      Email
      <input
        type="email"
        id="email"
        name="email"
        placeholder="Enter your email"
        required
        autofocus
        value="{{.Email}}"
      />
    </label>
    <label for="password">
      Password
      <input
        type="password"
        id="password"
        name="password"
        placeholder="Your password"
        required
        pattern="(?=.*[A-Z])(?=.*\d).{8,}"
        title="At least 8 characters including one uppercase letter and one number"
      />
    </label>
    <div class="auth-meta">
      <a href="#">Forgot password?</a>
      <label class="auth-toggle">
        <input type="checkbox" name="remember" />
        Remember me
      </label>
    </div>
    <div class="auth-actions">
      <button type="submit" class="primary">Log in</button>
      <div class="auth-divider">or</div>
      <button type="button" class="secondary outline auth-google">
        <svg
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <path
            d="M21.6 12.23c0-.74-.06-1.28-.19-1.84H12v3.34h5.52c-.11.83-.72 2.09-2.08 2.94l-.02.11 3.02 2.34.21.02c1.95-1.8 3.05-4.45 3.05-7.25z"
            fill="#4285F4"
          />
          <path
            d="M12 22c2.7 0 4.97-.89 6.63-2.41l-3.16-2.45c-.84.56-1.96.95-3.47.95-2.66 0-4.92-1.8-5.72-4.29H3.07v2.52C4.71 19.98 8.08 22 12 22z"
            fill="#34A853"
          />
          <path
            d="M6.28 13.8a5.95 5.95 0 010-3.6V7.68H3.07a9.96 9.96 0 000 8.64l3.21-2.52z"
            fill="#FBBC05"
          />
          <path
            d="M12 5.91c1.87 0 3.13.81 3.85 1.49l2.81-2.74C16.96 3.13 14.7 2 12 2 8.08 2 4.71 4.02 3.07 7.32l3.21 2.52C7.08 7.71 9.34 5.91 12 5.91z"
            fill="#EA4335"
          />
        </svg>
        Continue with Google
      </button>
    </div>
  </form>
  <p class="auth-footer">
    Don't have an account? <a href="/signup">Sign up</a>
  </p>
{{end}}