{% extends 'panel/base.html' %}

{% block panel_title %}Logowanie dwuetapowe{% endblock %}
{% block heading %}Logowanie dwuetapowe{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Kod z aplikacji albo z e-maila przy logowaniu do panelu.</p>{% endblock %}

{% block content %}
<div class="space-y-6">

  {% if codes %}
    <section class="card border-amber-300 dark:border-amber-800">
      <div class="border-b border-slate-200 px-5 py-3 dark:border-slate-800">
        <h2 class="font-semibold">Kody zapasowe - zapisz je teraz</h2>
      </div>
      <div class="card-body space-y-4">
        <p class="text-sm text-slate-500 dark:text-slate-400">
          Każdy kod działa raz i służy do wejścia bez telefonu i bez poczty. Ta lista pokazuje się
          jeden raz - po odświeżeniu strony już jej nie będzie.
        </p>
        <ul class="grid grid-cols-2 gap-2 font-mono text-sm sm:grid-cols-5">
          {% for code in codes %}
            <li class="border border-slate-200 px-3 py-2 text-center dark:border-slate-800">{{ code }}</li>
          {% endfor %}
        </ul>
      </div>
    </section>
  {% endif %}

  {% if config.is_confirmed %}
    <section class="card">
      <div class="border-b border-slate-200 px-5 py-3 dark:border-slate-800">
        <h2 class="font-semibold">Stan</h2>
      </div>
      <div class="card-body space-y-3 text-sm">
        <p>
          <span class="badge bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">włączone</span>
          <span class="text-slate-500 dark:text-slate-400">od {{ config.confirmed_at|date:"d.m.Y H:i" }}</span>
        </p>
        <p>
          Sposób: <strong>{{ config.get_method_display }}</strong>
          {% if config.uses_email %}<span class="text-slate-500 dark:text-slate-400">- kod przychodzi na adres {{ email }}</span>{% endif %}
        </p>
        <p class="text-slate-500 dark:text-slate-400">
          Pozostałe kody zapasowe: <strong>{{ config.codes_left }}</strong>
          {% if config.codes_left < 3 %}
            - to juz malo, warto wydac nowy komplet.
          {% endif %}
        </p>
        {% if required %}
          <p class="text-slate-500 dark:text-slate-400">
            Ten serwis wymaga logowania dwuetapowego, więc nie da się go tutaj wyłączyć.
          </p>
        {% endif %}
      </div>
    </section>

    <div class="grid gap-6 lg:grid-cols-2">
      <section class="card">
        <div class="border-b border-slate-200 px-5 py-3 dark:border-slate-800">
          <h2 class="font-semibold">Nowe kody zapasowe</h2>
        </div>
        <form method="post" class="card-body space-y-4">
          {% csrf_token %}
          <input type="hidden" name="action" value="codes">
          <p class="text-sm text-slate-500 dark:text-slate-400">
            Wydanie nowego kompletu unieważnia wszystkie poprzednie kody.
          </p>
          <button class="btn-ghost" type="submit">Wydaj nowe kody</button>
        </form>
      </section>

      {% if not required %}
        <section class="card">
          <div class="border-b border-slate-200 px-5 py-3 dark:border-slate-800">
            <h2 class="font-semibold">Wyłączenie</h2>
          </div>
          <div class="card-body space-y-4">
            {% if config.uses_email %}
              <form method="post" class="space-y-2">
                {% csrf_token %}
                <input type="hidden" name="action" value="email_send">
                <p class="text-sm text-slate-500 dark:text-slate-400">
                  Najpierw poproś o kod - przyjdzie na adres {{ email }}.
                </p>
                <button class="btn-ghost" type="submit">Wyślij kod na e-mail</button>
              </form>
            {% endif %}
            <form method="post" class="space-y-4"
                  data-confirm="Wyłączyć logowanie dwuetapowe dla tego konta?">
              {% csrf_token %}
              <input type="hidden" name="action" value="disable">
              <div class="space-y-1">
                <label class="label" for="id_disable_code">{% if config.uses_email %}Kod z e-maila{% else %}Bieżący kod{% endif %}</label>
                <input class="input max-w-[12rem]" type="text" id="id_disable_code" name="code"
                       inputmode="numeric" autocomplete="one-time-code" placeholder="000000" required>
                <p class="text-xs text-slate-500 dark:text-slate-400">
                  Kod potwierdza, że przy klawiaturze siedzi właściciel konta, a nie ktoś przy otwartej sesji.
                  Zadziała też kod zapasowy.
                </p>
              </div>
              <button class="btn-danger" type="submit">Wyłącz logowanie dwuetapowe</button>
            </form>
          </div>
        </section>
      {% endif %}
    </div>

  {% endif %}

  {% if not config.is_confirmed and required %}
    <p class="border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100">
      Ten serwis wymaga logowania dwuetapowego - do czasu konfiguracji panel jest zamknięty.
      Wybierz jeden z dwóch sposobów poniżej.
    </p>
  {% endif %}

  {% if not config.is_confirmed or config.uses_email %}
    <section class="card">
      <div class="border-b border-slate-200 px-5 py-3 dark:border-slate-800">
        <h2 class="font-semibold">{% if config.is_confirmed %}Przejście na kod z aplikacji{% else %}Sposób 1: kod z aplikacji w telefonie{% endif %}</h2>
      </div>
      <div class="card-body space-y-6">
        <ol class="space-y-6 text-sm">
          <li class="space-y-2">
            <p class="font-medium">1. Zainstaluj aplikacje uwierzytelniajaca</p>
            <p class="text-slate-500 dark:text-slate-400">
              Działa każda zgodna z TOTP - np. Aegis, Google Authenticator, 1Password, Bitwarden.
            </p>
          </li>
          <li class="space-y-3">
            <p class="font-medium">2. Dodaj w niej to konto</p>
            {% if qr %}
              <p class="text-slate-500 dark:text-slate-400">
                W aplikacji wybierz "dodaj konto" i zeskanuj ten kod:
              </p>
              {% comment %}Kod QR ma stałe kolory (ciemne moduły na białym),
                 więc białe tło zostaje także w ciemnym motywie panelu -
                 czytnik telefonu potrzebuje kontrastu.{% endcomment %}
              <div class="inline-block border border-slate-200 bg-white p-3 dark:border-slate-700">{{ qr }}</div>
              <p class="text-slate-500 dark:text-slate-400">
                Nie masz jak zeskanować? Wybierz w aplikacji wpisanie klucza z ręki:
              </p>
            {% else %}
              {% comment %}Brak kodu QR ma jedna przyczynę - bibliotekę segno,
                 której nie ma w środowisku. Mówimy o tym wprost: bez tego
                 zdania strona wygląda tak, jakby QR-a nigdy nie było
                 w planach.{% endcomment %}
              <p class="border border-amber-300 bg-amber-50 px-4 py-3 text-xs text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100">
                Kodu QR nie ma, bo w środowisku brakuje biblioteki <code>segno</code>.
                Zainstaluj zależności (<code>pip install -r requirements.txt</code>)
                i uruchom serwer ponownie. Parowanie kluczem poniżej działa tak samo.
              </p>
              <p class="text-slate-500 dark:text-slate-400">
                Wybierz w aplikacji wpisanie klucza z ręki i przepisz go stąd:
              </p>
            {% endif %}
            <p class="select-all break-all border border-slate-200 px-4 py-3 font-mono text-base dark:border-slate-800">{{ secret_groups }}</p>
            <p class="text-xs text-slate-500 dark:text-slate-400">
              Pozostałe pola, o które może zapytać aplikacja: rodzaj "czasowy" (TOTP),
              6 cyfr, co 30 sekund, algorytm SHA-1.
            </p>
          </li>
          <li class="space-y-2">
            <p class="font-medium">3. Przepisz kod, który pokaże aplikacja</p>
            <form method="post" class="space-y-4">
              {% csrf_token %}
              <input type="hidden" name="action" value="confirm">
              <input class="input max-w-[12rem] text-center text-lg tracking-[0.3em]" type="text" name="code"
                     inputmode="numeric" autocomplete="one-time-code" placeholder="000000" required>
              <div><button class="btn-primary" type="submit">{% if config.is_confirmed %}Przełącz na kod z aplikacji{% else %}Włącz logowanie dwuetapowe{% endif %}</button></div>
            </form>
          </li>
        </ol>

        <p class="text-xs text-slate-500 dark:text-slate-400">
          {% if config.is_confirmed %}
            Do czasu podania poprawnego kodu logowanie dalej działa kodem z e-maila.
          {% else %}
            Dopóki nie podasz poprawnego kodu, logowanie działa jak dotychczas - źle
            przepisany klucz nie zamknie Ci panelu.
          {% endif %}
        </p>
      </div>
    </section>
  {% endif %}

  {% if not config.is_confirmed or not config.uses_email %}
    <section class="card">
      <div class="border-b border-slate-200 px-5 py-3 dark:border-slate-800">
        <h2 class="font-semibold">{% if config.is_confirmed %}Przejście na kod z e-maila{% else %}Sposób 2: kod wysyłany e-mailem{% endif %}</h2>
      </div>
      <div class="card-body space-y-4 text-sm">
        <p class="text-slate-500 dark:text-slate-400">
          Bez aplikacji: po wpisaniu hasła serwis wyśle sześciocyfrowy kod na adres konta.
          Kod działa {{ minutes }} minut i tylko raz. Ten sposób jest tak bezpieczny,
          jak skrzynka pocztowa - chroń ją własnym, innym hasłem.
        </p>
        {% if not email %}
          <p class="border border-amber-300 bg-amber-50 px-4 py-3 text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100">
            Konto nie ma adresu e-mail. Wpisz go w <a class="underline" href="{% url 'panel:profile:index' %}">Moje konto &rsaquo; Dane profilu</a> i wróć tutaj.
          </p>
        {% else %}
          {% if mail_off %}
            <p class="border border-amber-300 bg-amber-50 px-4 py-3 text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100">
              Poczta serwisu nie wychodzi na zewnątrz (sposób wysyłki: konsola), więc kod nie dotrze
              do skrzynki. Ustaw serwer SMTP w Emaile &rsaquo; Konfiguracja poczty albo poproś o to
              administratora - do tego czasu wybierz kod z aplikacji.
            </p>
          {% endif %}
          <ol class="space-y-6">
            <li class="space-y-2">
              <p class="font-medium">1. Wyślij kod na adres {{ email }}</p>
              <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="email_send">
                <button class="btn-ghost" type="submit">{% if config.email_code_pending %}Wyślij nowy kod{% else %}Wyślij kod{% endif %}</button>
              </form>
            </li>
            <li class="space-y-2">
              <p class="font-medium">2. Przepisz kod z listu</p>
              <form method="post" class="space-y-4">
                {% csrf_token %}
                <input type="hidden" name="action" value="email_confirm">
                <input class="input max-w-[12rem] text-center text-lg tracking-[0.3em]" type="text" name="code"
                       inputmode="numeric" autocomplete="one-time-code" placeholder="000000" required>
                <div><button class="btn-primary" type="submit">{% if config.is_confirmed %}Przełącz na kod z e-maila{% else %}Włącz logowanie kodem z e-maila{% endif %}</button></div>
              </form>
            </li>
          </ol>
          <p class="text-xs text-slate-500 dark:text-slate-400">
            Nie ma listu? Zajrzyj do spamu. Dopóki nie podasz kodu, nic się nie zmienia.
          </p>
        {% endif %}
      </div>
    </section>
  {% endif %}
</div>
{% endblock %}