{% extends 'paxalia/base.html' %}
{% load static i18n %}

{% block title %}{% trans "Two-Factor Authentication" %} – Paxalia Dashboard{% endblock %}
{% block page_title %}{% trans "Two-Factor Authentication" %}{% endblock %}
{% block page_subtitle %}{% trans "Protect your account with an authenticator app" %}{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'paxalia/styles/components/security.css' %}">
{% endblock %}

{% block dashboard_content %}
<div class="security-page">

    {% if already_enrolled %}
    <div class="table-card">
        <h2 class="card-title">{% trans "Two-factor authentication is enabled" %}</h2>
        <p class="form-hint">{% trans "Your account is protected with a mandatory administrator authenticator. Use the Security Authentication workspace to verify, recover, or reset the authenticator through the protected flow." %}</p>
        <div class="security-device-card__actions">
            <a class="btn btn-primary" href="{% url 'paxalia:security_authentication' %}">{% trans "Open Authentication & Recovery" %}</a>
        </div>
    </div>
    {% else %}
    <div class="table-card">
        <h2 class="card-title">{% trans "Set up an authenticator app" %}</h2>
        <ol>
            <li>{% trans "Open your authenticator app (Google Authenticator, 1Password, Authy, etc.)." %}</li>
            <li>
                {% trans "Add a new account using this setup key, or open the link below on the same device:" %}
                <br>
                <code style="word-break: break-all;">{{ otpauth_url }}</code>
            </li>
            <li>{% trans "Enter the 6-digit code your app shows below to finish setup." %}</li>
        </ol>
        <form method="post" class="security-inline-form">
            {% csrf_token %}
            <input type="text" name="token" inputmode="numeric" pattern="[0-9]*" maxlength="6"
                   placeholder="{% trans '6-digit code' %}" autofocus required>
            <button type="submit" class="btn btn-primary">{% trans "Verify & Enable" %}</button>
        </form>
    </div>
    {% endif %}

</div>
{% endblock %}

{% block page_scripts %}
    <script nonce="{{ request.csp_nonce }}" src="{% static 'paxalia/scripts/security.js' %}"></script>
{% endblock %}