{% extends "base.html" %}

{% block title %}Log In - Makenotwork{% endblock %}

{% block body_attrs %} class="centered-page"{% endblock %}

{% block content %}
    <h1 class="brand-h1">Makenot<span class="dot">.</span>work</h1>
    <div class="login-container">
      <div id="login-errors">
        {% if let Some(msg) = error %}<div class="alert alert-error">{{ msg }}</div>{% endif %}
      </div>

      <form class="login-form"
            method="post"
            action="/login"
            hx-post="/login"
            hx-target="#login-errors"
            hx-swap="innerHTML"
            hx-indicator="#login-spinner">
        {% if let Some(token) = csrf_token %}<input type="hidden" name="_csrf" value="{{ token }}">{% endif %}
        <h2 class="subtitle-h2">Log in</h2>
        <div class="form-group">
          <label for="login">Username or Email</label>
          <input
            type="text"
            id="login"
            name="login"
            placeholder="username or you@example.com"
            value="{{ prefill_login }}"
            required
            autofocus
          />
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="--------"
            required
          />
        </div>

        <div class="checkbox-group">
          <input type="checkbox" id="remember-me" name="remember_me" />
          <label for="remember-me">Remember me</label>
        </div>

        <button type="submit" class="btn-primary">
          Log In
          <span id="login-spinner" class="htmx-indicator"> ...</span>
        </button>

        <div class="foot-link">
          <a href="/forgot-password">Reset Password<span class="dot">.</span></a>
        </div>

        <div class="foot-link">
          <a href="/join">Join now<span class="dot">.</span></a>
        </div>
      </form>

      <div id="passkey-login" class="hidden">
        <div class="login-divider">or</div>
        <button class="btn-secondary login-passkey-btn" onclick="loginWithPasskey()">
          Sign in with Passkey (fingerprint, face, or security key)
        </button>
        <div id="passkey-login-error" class="login-passkey-error"></div>
      </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    // Handle successful login redirect via HX-Redirect header
    document.body.addEventListener('htmx:beforeSwap', function(evt) {
        if (evt.detail.xhr.status === 200 && evt.detail.xhr.getResponseHeader('HX-Redirect')) {
            // Let HTMX handle the redirect
        }
    });
</script>
<script src="/static/passkey.js"></script>
<script>
    // Show passkey button if browser supports WebAuthn
    if (window.PublicKeyCredential) {
        document.getElementById('passkey-login').classList.remove('hidden');
    }
</script>
{% endblock %}