{% extends "base.html" %}
{% block title %}{{ t('Sign-in security') }}{% endblock %}
{% block content %}
<div class="page-head"><h1>{{ t('Sign-in security') }}</h1></div>
<div class="card">
  <h2>{{ t('Two-factor sign-in') }}</h2>
  {% if u.totp_enabled %}
    <p><span class="badge st-posted">{{ t('On') }}</span> {{ t('Each sign-in asks for a code from your authenticator app as well as your password.') }}</p>
    <form method="post" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center"><input type="hidden" name="action" value="off">
      <input type="password" name="password" placeholder="{{ t('Your password') }}" required aria-label="{{ t('Password') }}"><button class="btn danger">{{ t('Switch off') }}</button></form>
  {% elif qr %}
    <ol style="line-height:1.7">
      <li>{{ t('Open Google Authenticator, Microsoft Authenticator or a similar app on your phone.') }}</li>
      <li>{{ t('Scan this code:') }}<div style="background:#fff;display:inline-block;padding:8px;border-radius:10px;margin:8px 0">{{ qr|safe }}</div>
        <div class="muted"><small>{{ t('Or type this key:') }} <code>{{ u.totp_secret }}</code></small></div></li>
      <li>{{ t('Enter the 6-digit code the app shows:') }}
        <form method="post" style="display:flex;gap:8px;margin-top:6px"><input type="hidden" name="action" value="confirm">
          <input name="code" inputmode="numeric" autocomplete="one-time-code" maxlength="7" required style="width:140px;letter-spacing:.2em" aria-label="{{ t('Code') }}"><button class="btn">{{ t('Turn on') }}</button></form></li>
    </ol>
  {% else %}
    <p>{{ t('Protect your account with a second step: a code from an authenticator app on your phone, asked at every sign-in.') }}</p>
    <form method="post"><input type="hidden" name="action" value="start"><button class="btn">{{ t('Set up two-factor sign-in') }}</button></form>
  {% endif %}
</div>
{% endblock %}