{% extends 'base.html' %}

{% block title %}Kod logowania · {{ site.site_name|default:"D-LIS" }}{% endblock %}
{% block meta %}<meta name="robots" content="noindex, nofollow">{% endblock %}
{% block body_class %}panel-ui flex items-center justify-center p-4{% endblock %}

{% block body %}
<main class="w-full max-w-sm">
  <div class="card">
    <div class="card-body space-y-6">
      <div class="text-center">
        {% if site.logo %}<img src="{{ site.logo.url }}" alt="" class="mx-auto mb-3 h-12 w-auto">{% endif %}
        <h1 class="text-xl font-semibold">Kod logowania</h1>
        <p class="text-sm text-slate-500 dark:text-slate-400">Konto {{ username }} - drugi krok</p>
      </div>

      {% include 'panel/partials/messages.html' %}

      <form method="post" novalidate class="space-y-5">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ next }}">
        <div class="space-y-1">
          <label class="label" for="id_code">{% if by_email %}Kod z e-maila{% else %}Kod z aplikacji{% endif %}</label>
          <input class="input text-center text-lg tracking-[0.4em]" type="text" id="id_code" name="code"
                 inputmode="numeric" autocomplete="one-time-code" autofocus maxlength="12"
                 placeholder="000000" required>
          <p class="text-xs text-slate-500 dark:text-slate-400">
            {% if by_email %}
              Kod poszedł na adres {{ address }} i działa {{ minutes }} minut. Nie ma go? Zajrzyj do spamu
              albo wyślij nowy. Bez dostępu do poczty wpisz jeden z kodów zapasowych.
            {% else %}
              Kod zmienia się co 30 sekund. Bez telefonu wpisz jeden z kodów zapasowych.
            {% endif %}
          </p>
        </div>
        <button class="btn-primary btn-block" type="submit">Zaloguj</button>
      </form>

      {% if by_email %}
        <form method="post" class="text-center">
          {% csrf_token %}
          <input type="hidden" name="action" value="resend">
          <input type="hidden" name="next" value="{{ next }}">
          <button class="btn-ghost btn-block" type="submit">Wyślij nowy kod</button>
        </form>
      {% endif %}

      <p class="text-center text-xs text-slate-500 dark:text-slate-400">
        <a class="hover:underline" href="{% url 'panel:login' %}">Wróć do logowania</a>
      </p>
    </div>
  </div>
</main>
{% endblock %}