{% extends "manage/base.html" %}

{% block title %}Credentials — Porchlight{% endblock %}

{% block manage_content %}
<h1>Credentials</h1>

{% if setup %}
<div role="status">
    <p><strong>Welcome, {{ username }}!</strong> Set up your credentials to secure your account.</p>
</div>
{% endif %}

<section>
    <h2>Security keys</h2>
    <div id="webauthn-list">
        {% if webauthn_credentials %}
        <ul>
            {% for cred in webauthn_credentials %}
            <li>
                {{ cred.device_name or "Security key" }}
                <small>(added {{ cred.created_at.strftime('%Y-%m-%d') }})</small>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p>No security keys registered.</p>
        {% endif %}
    </div>
    <button type="button" id="webauthn-register-btn">Add security key</button>
</section>

<section>
    <h2>Password</h2>
    <div id="password-section">
        {% if has_password %}
        <p>Password is set.</p>
        {% else %}
        <p>No password set.</p>
        {% endif %}
        <form hx-post="/manage/credentials/password" hx-target="#password-section" hx-swap="innerHTML">
            <input type="hidden" name="csrf_token" value="{{ csrf_token_processor(request) }}">
            <div>
                <label for="password">{{ "New password" if has_password else "Set password" }}</label>
                <input type="password" id="password" name="password" required minlength="8" autocomplete="new-password">
            </div>
            <div>
                <label for="confirm">Confirm password</label>
                <input type="password" id="confirm" name="confirm" required minlength="8" autocomplete="new-password">
            </div>
            <button type="submit">{{ "Change password" if has_password else "Set password" }}</button>
        </form>
    </div>
</section>
{% endblock manage_content %}

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