{% extends "base.html" %}

{% block title %}Sign in — Porchlight{% endblock %}

{% block content %}
<h1>Sign in</h1>

<div id="login-error"></div>

<section>
    <h2>Password</h2>
    <form hx-post="/login/password" hx-target="#login-error" hx-swap="innerHTML">
        <input type="hidden" name="csrf_token" value="{{ csrf_token_processor(request) }}">
        <div>
            <label for="username">Username</label>
            <input type="text" id="username" name="username" required autocomplete="username">
        </div>
        <div>
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required autocomplete="current-password">
        </div>
        <button type="submit">Sign in</button>
    </form>
</section>

<section>
    <h2>Security key</h2>
    <div id="webauthn-login-status"></div>
    <button type="button" id="webauthn-login-btn">Sign in with security key</button>
</section>
{% endblock %}

{% block scripts %}
<script src="/static/webauthn.js" defer></script>
{% endblock %}