{% extends "pages/base.html" %}
{% load i18n %}

{% block title %}{% trans "Authenticator setup" %}{% endblock %}

{% block content %}
<div class="container my-4">
  <div class="row justify-content-center">
    <div class="col-lg-8 col-xl-6">
      <div class="card shadow-sm">
        <div class="card-body">
          <h1 class="card-title h3 mb-3">{% trans "Authenticator app enrollment" %}</h1>
          <p class="text-muted">{% trans "Use an authenticator app to generate one-time codes for logging in." %}</p>
          {% if confirmed_device %}
          <div class="alert alert-success" role="alert">
            {% trans "An authenticator app is currently registered for your account." %}
          </div>
          {% else %}
          <div class="alert alert-warning" role="alert">
            {% trans "No authenticator app is registered yet. Generate a secret to get started." %}
          </div>
          {% endif %}

          <form method="post" class="mb-4">
            {% csrf_token %}
            <input type="hidden" name="action" value="generate">
            <button type="submit" class="btn btn-secondary">
              {% if pending_device %}
                {% trans "Generate a new secret" %}
              {% elif confirmed_device %}
                {% trans "Replace authenticator secret" %}
              {% else %}
                {% trans "Generate authenticator secret" %}
              {% endif %}
            </button>
          </form>

          {% if pending_device %}
          <div class="border rounded p-3 mb-4">
            <h2 class="h5 mb-3">{% trans "Scan and confirm" %}</h2>
            {% if qr_data_uri %}
            <div class="text-center mb-3">
              <img src="{{ qr_data_uri }}" alt="{% trans 'Authenticator QR code' %}" class="img-fluid" style="max-width: 240px;">
            </div>
            {% endif %}
            {% if manual_key %}
            <p class="mb-2">
              {% blocktrans trimmed %}If you cannot scan the QR code, enter this key in your authenticator app:{% endblocktrans %}
            </p>
            <p class="fw-semibold text-center text-break">{{ manual_key }}</p>
            {% endif %}
            <p class="mb-3">{% trans "After scanning, enter a code from your app to confirm enrollment." %}</p>
            <form method="post" class="row gy-2 gx-2 align-items-end">
              {% csrf_token %}
              <input type="hidden" name="action" value="confirm">
              <div class="col-12">
                {% if enrollment_form.non_field_errors %}
                <div class="alert alert-danger" role="alert">
                  {% for error in enrollment_form.non_field_errors %}{{ error }}{% if not forloop.last %}<br>{% endif %}{% endfor %}
                </div>
                {% endif %}
                <label for="{{ enrollment_form.token.id_for_label }}" class="form-label">{{ enrollment_form.token.label }}</label>
                <input
                  type="text"
                  name="{{ enrollment_form.token.html_name }}"
                  id="{{ enrollment_form.token.id_for_label }}"
                  value="{{ enrollment_form.token.value|default_if_none:'' }}"
                  class="form-control{% if enrollment_form.token.errors %} is-invalid{% endif %}"
                  inputmode="numeric"
                  pattern="[0-9]*"
                  autocomplete="one-time-code"
                  required
                >
                {% for error in enrollment_form.token.errors %}
                <div class="invalid-feedback">{{ error }}</div>
                {% endfor %}
              </div>
              <div class="col-12">
                <button type="submit" class="btn btn-primary">{% trans "Confirm code" %}</button>
              </div>
            </form>
          </div>
          {% endif %}

          {% if confirmed_device %}
          <form method="post" class="mt-3">
            {% csrf_token %}
            <input type="hidden" name="action" value="remove">
            <button type="submit" class="btn btn-outline-danger">{% trans "Remove authenticator" %}</button>
          </form>
          {% endif %}

          <p class="mt-4 text-muted small">
            {% trans "Password-based logins remain available even when an authenticator app is enabled." %}
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}